基于HTML+CSS+JS的網頁版2048的實現

山西農業大學 王藝燕

基于HTML+CSS+JS的網頁版2048的實現

山西農業大學 王藝燕

描述了一個使用HTML和CSS進行UI界面設計，使用JS進行后臺邏輯設計的網頁版2048小游戲的實現。

HTML；CSS；JS；網頁版；2048

1.前言

2048是一款簡單而流行的休閑益智類小游戲，憑借著簡單而不失美觀的UI設計與獨特的創意吸引了許多的游戲玩家。游戲一開始會產生兩個數字2或4，將所有數字朝著一個方向移動時，相同的數字會疊加，同時在空白地方會產生一個新的數字，然后重復操作直到得到一個2048就算勝利。因為規則簡單，所以2048小游戲有許多版本，本文將分析與研究如何使用js來實現游戲的邏輯設計。

2.設計

2.1 總體架構

（1）該2048小游戲采用面向過程的設計方法，整個開發過程一共用五個文件實現。game.html用于對游戲界面元素進行簡單布局，gameStyle.css用于設計界面元素的樣式，mainFunction.js用于設計該游戲的主邏輯，bottom.js 用于存放一些被主邏輯所調用的底層邏輯，showAnimation.js則是用于存放動畫效果。

（2）游戲的主循環則是根據玩家所按的方向鍵決定所需調用的函數。

2.2 邏輯設計與實現

圖1 游戲活動圖

整個游戲的大致流程用活動圖表示如圖1所示，最終效果如圖2所示。其中：

（1）棋盤初始化

如圖3所示，首先將一個棋盤劃分為4*4的類名為child-cell的底層div，然后再為每個小格子添加一層類名為number-cell的div用于存放數據并且將數據的值賦為0。如果數據為0，則只顯示底層div，如果數字非0，頂層的div將會以動畫的形式覆蓋底層的div小格子。核心代碼如下所示。

圖2 效果圖

圖3 棋盤初始化

（2）是否可以左移（以左移為例）

在這一部分的邏輯設計中，首先要判斷是否可以向左移動，其次要知道移動到哪里，最后進行結果的一個疊加。

1）左移判斷：最左邊的格子，無論上面是否有數字均不可以向左移動；如果格子左側沒有數據，可向左移動；如果格子上的數字與左邊的數字相同，也可以向左移動。

2）移動位置：用noHorizontalCell(row,col1,col2,board)判斷落腳位置與小格子之間是否存在障礙物。如果沒有障礙并且落腳位置數據為0，則直接覆蓋。如果沒有障礙并且落腳位置的數據與小格子的數據相同，則需要將兩個小格子上的數據相加，再覆蓋到落腳位置上。

（3）游戲是否結束

游戲結束首先分為兩種結果，一種是成功得到了2048，另一種是game over，這里重點分析游戲失敗的邏輯。游戲失敗必須同時滿足兩種情況，即棋盤沒有空余的位置，并且也無法再進行移動。具體代碼如下：

3.結束語

本研究首先對2048小游戲的規則行了簡單介紹，其次對如何用js實現具體的邏輯進行了詳細闡述，并給出相應的核心代碼。在此基礎上，還可以設置關卡、進行分數統計、添加音樂效果，從而增強游戲的趣味性與可玩性。

[1]姚敦紅,楊凌,張志美,李曉黎等.jQuery程序設計基礎教程[M].北京:人民郵電出版社,2016.

[2]聶常虹.Web前端開發技術[M].北京:人民郵電出版社,2016.

[3]兵學軍.JavaScript前端開發實用技術教程[M].北京:人民郵電出版社,2016.