基于HTML+CSS+JS的網(wǎng)頁版2048的實(shí)現(xiàn)

山西農(nóng)業(yè)大學(xué) 王藝燕

基于HTML+CSS+JS的網(wǎng)頁版2048的實(shí)現(xiàn)

山西農(nóng)業(yè)大學(xué) 王藝燕

描述了一個使用HTML和CSS進(jìn)行UI界面設(shè)計(jì)，使用JS進(jìn)行后臺邏輯設(shè)計(jì)的網(wǎng)頁版2048小游戲的實(shí)現(xiàn)。

HTML；CSS；JS；網(wǎng)頁版；2048

1.前言

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

2.設(shè)計(jì)

2.1 總體架構(gòu)

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

（2）游戲的主循環(huán)則是根據(jù)玩家所按的方向鍵決定所需調(diào)用的函數(shù)。

2.2 邏輯設(shè)計(jì)與實(shí)現(xiàn)

圖1 游戲活動圖

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

（1）棋盤初始化

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

圖2 效果圖

圖3 棋盤初始化

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

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

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

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

（3）游戲是否結(jié)束

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

3.結(jié)束語

本研究首先對2048小游戲的規(guī)則行了簡單介紹，其次對如何用js實(shí)現(xiàn)具體的邏輯進(jìn)行了詳細(xì)闡述，并給出相應(yīng)的核心代碼。在此基礎(chǔ)上，還可以設(shè)置關(guān)卡、進(jìn)行分?jǐn)?shù)統(tǒng)計(jì)、添加音樂效果，從而增強(qiáng)游戲的趣味性與可玩性。

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

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

[3]兵學(xué)軍.JavaScript前端開發(fā)實(shí)用技術(shù)教程[M].北京:人民郵電出版社,2016.