有了地圖之後,我們就可以開始讓蛇在上面爬了,今天我們的目標是畫出蛇的頭,並且可以操控他在地圖上跑來跑去。 新增蛇的物件 首先我們先來新增一個蛇的物件 const...
嗨囉!大家好啊!就像上一期(還是上上一期?)最後說的,今天就要來處理新增資料啦!話說剛剛在準備進度時,都沒經過任何測試,一次執行就過,讓我非常驚訝,一直在試是不...
DAY28 React Redux 一家親 範例程式碼:https://github.com/max80713/react-30-days 有任何問題都可以在...
【前言】 不怕我誤人子弟嗎QQ【正文】 昨天我們簡單的利用react-router模擬一個SPA的網頁,今天我們就來說說Router、Route、Link到...
昨天把新增的表單處理完了!今天要來處理Redux的部分,雖然年代久遠,不知道大家還記不記得,忘記的話就當作複習,來做一次吧! 確認資料 在要做新作業的時候,最...
昨天 Day13 我們已經把畫面區塊規劃出來了,今天要來把主畫面地圖畫好。 地圖畫面座標系 我們需要一個 xy 軸的二維直角座標系,這邊我的做法是把地圖切成...
DAY27 各司其職 - Container Component vs Presentational Component 範例程式碼:https://gith...
【前言】 終於來到最後的react-router囉!再撐一下就可以把這三劍客都認識一遍了!【正文】 我想大家應該都很常聽到什麼SPA、單頁式網站、Singl...
Hi!大家好!一天做一點點的感覺有點像以前買的科學雜誌XD,要從創刊號慢慢蒐集到最後,把所有的贈品都留下來才能組合出一個完整的東西,哈哈! 話說剛露營回來,不知...
頁面佈局規劃 如同前篇遊戲 Tic Tac Toe 一樣,我們要來規劃一下遊戲的畫面,因為我希望我們貪吃蛇的遊戲在電腦上可以玩,在手機上也可以玩,所以我想要把遊...
【前言】 這篇不會有什麼新東西,只會有一堆廢話......嗚嗚嗚【正文】 話說也踏入前端五個月了,也就代表學習react五個月,然後也意味著被react荼毒...
DAY26 Redux Store 現身 範例程式碼:https://github.com/max80713/react-30-days 有任何問題都可以在...
事前聲明 在挑戰鐵人賽之前,其實我也完全沒有想過貪吃蛇要怎麼做,所以為了做這次的貪吃蛇遊戲,我找了一些資料。其中對我幫助很大的是墨雨設計吳哲宇老師在 hahow...
Hi啊!因為昨天雄心壯志下了決心要完成作品,今天也只能繼續做下去了XD,就從昨天的進度step1開始吧! ㄛ對了,這時間點看到我還滿神奇的對吧XD,因為小弟我明...
DAY25 動作了然後呢 - Redux Reducer 範例程式碼:https://github.com/max80713/react-30-days 有任...
Hi!各位,想不到吧,已經到了最後十篇了,感覺真不想結束呢! 才怪!明明天天都在倒數文章數量XD,雖然這一趟很累,但是還是得要對自己來個期末測驗才行!所以接下來...
前言 談到經典小遊戲,除了圈圈叉叉遊戲之外,還有一個家喻戶曉的遊戲,就是貪吃蛇,雖然現在智慧型手機和各種遊戲機的遊戲越做越華麗,越來越炫砲,但是經典的遊戲終究還...
【前言】 這篇會是redux的複習索引,下篇開始就是react-router囉!【正文】 一開始我們先介紹了redux的概念,也強調它可以單獨使用,不是一定...
DAY24 一個口令一個動作 - Redux Action 範例程式碼:https://github.com/max80713/react-30-days 有...
【前文】 廢話不多說,直接進正文。【正文】 一般來說,以往用redux所做的action、reducer、store,在程式傳遞的時候都是同步執行的,也就是...
Single Play機制 昨天完成判斷勝負功能之後,我們剩下最後一個功能,就是讓玩家可以跟電腦對弈,回憶一下 Day03 的時候,我們有設計一個 isSing...
Hi!大家好啊!想不到又重回最初的Route篇了吧!不過其實一開始也根本沒有說到他過XD,連他的小跟班match都提過了,就是沒有好好解釋過Route這個組件,...
【前言】 終於先把基本的redux告一段落了......可是工作上的進度還是大延遲(嘆氣【正文】 採用以往的方式撰寫action、reducer的確可行,但...
Hi啊大家好!這幾天我一直在想該怎麼打出一篇好文章(雖然鐵人賽都過一半了XD),但這也是鐵人賽一路走來才會思考到的事情吧?在一天一篇文章持續30天的過程中,該怎...
勝負判斷分析 昨天完成了 row 方向和 column 方向的勝負判斷,今天我們要來完成右斜和左斜方向的勝負判斷,我這邊先把這兩個方向命名為 forwardSl...
DAY22 彈跳視窗 - Portal 範例程式碼:https://github.com/max80713/react-30-days 有任何問題都可以在 Y...
【前言】 最近工作不順到覺得很挫折、壓力也很大,我覺得Redux跟我不是好朋友了。這不是我想的這樣啊(哭,繼續加油對自己打氣吧! 【正文】 昨天把conta...
Hi,大家好,昨天介紹了一些關於Router的基本用法,也解決了在實作時遇到的一些問題,不過在都已經解決掉的現在就讓我們繼續學習吧! match 在Router...
勝負判斷分析 窮舉法 在 3x3 的圈圈叉叉遊戲中,獲勝的組合只有 8 種,以上圖為例,每個格子裡面的數字代表 block id,我們窮舉出所有獲勝連線: /...