2048小遊戲(JavaScript版) (1) 遊戲介紹

1. 遊戲介紹

如今開始學編程的，基本上都過手機遊戲2048吧，那麼這個遊戲的玩法相信不少人都熟悉，我在這裏再給你們回顧下吧。

1.1 遊戲規則

每次控制全部方塊向同一個方向運動，兩個相同數字的方塊撞在一塊兒以後合併成爲他們的和，每次操做以後會在空白的方格處隨機生成一個2或者4，不斷的組合讓分數提升，在手機上有分數排行榜，那些大佬的分數真的使人歎服。若是16個格子所有填滿而且相鄰的格子都不相同也就是沒法移動的話，那麼恭喜你，gameover。

1.2 遊戲基本原則

1. 最大的數必定要放到角落

2. 數字要按順序緊鄰排序

3. 保證最大數和次大數那一行/列是滿的

這就是我給新手玩家分享的經驗，遵照這幾個規則，能夠保證達到幾萬分的水準。

1.3 主要實現功能

而後就要來分析一下咱們須要實現的功能了：

1. 初始化界面，而且隨機生成兩個數字爲2或者4的格子

2. 方塊移動和合並適合的效果，方塊的顏色要隨着值的改變而改變

3. 判斷在某個方向上是否能夠移動，不能移動就不變化

4. 在後續生成隨機數字的時候判斷是否還有空間，有則生成下一塊，沒有則判斷四個方向是否都沒法移動，都知足時提示gameover並結束遊戲

5. 在任意兩個格子合併後，分數都要加上值爲合併後格子的值

6. 判斷每一個格子移動到什麼位置，會不會合並

實現思路：

用向右方向移動爲例，先判斷格子是否可以向右方向移動，若是能夠，循環每個格子。若是這個格子的值不爲0，遍歷格子右側的元素，判斷落腳的位置是否爲空以及落腳位置的數字是否和原本的數字相等 。若是落腳的位置爲空 && 中間沒有障礙物，更新樣式，將落腳位置格子的值設爲移動格子的值，原格子值設爲空。若是落腳位置的數字和原本的數字相等&& 中間沒有障礙物，更新樣式，將落腳位置格子的值設爲移動格子值與落腳位置格子值相加後的值，原格子值設爲空。

1.4 使用技術

HTML

CSS

JavaScript

jQuery

Vue

我準備作三個版本的，原生JavaScript版、jQuery版以及Vue版。

這也是第一次作錄音視頻，講的很差的地方你們見諒。