山西農業大學 王藝燕
基于HTML+CSS+JS的網頁版2048的實現
山西農業大學 王藝燕
描述了一個使用HTML和CSS進行UI界面設計,使用JS進行后臺邏輯設計的網頁版2048小游戲的實現。
HTML;CSS;JS;網頁版;2048
2048是一款簡單而流行的休閑益智類小游戲,憑借著簡單而不失美觀的UI設計與獨特的創意吸引了許多的游戲玩家。游戲一開始會產生兩個數字2或4,將所有數字朝著一個方向移動時,相同的數字會疊加,同時在空白地方會產生一個新的數字,然后重復操作直到得到一個2048就算勝利。因為規則簡單,所以2048小游戲有許多版本,本文將分析與研究如何使用js來實現游戲的邏輯設計。
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,這里重點分析游戲失敗的邏輯。游戲失敗必須同時滿足兩種情況,即棋盤沒有空余的位置,并且也無法再進行移動。具體代碼如下:
本研究首先對2048小游戲的規則行了簡單介紹,其次對如何用js實現具體的邏輯進行了詳細闡述,并給出相應的核心代碼。在此基礎上,還可以設置關卡、進行分數統計、添加音樂效果,從而增強游戲的趣味性與可玩性。
[1]姚敦紅,楊凌,張志美,李曉黎等.jQuery程序設計基礎教程[M].北京:人民郵電出版社,2016.
[2]聶常虹.Web前端開發技術[M].北京:人民郵電出版社,2016.
[3]兵學軍.JavaScript前端開發實用技術教程[M].北京:人民郵電出版社,2016.