基于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é) 王藝燕

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

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

1.前言

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

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

2.1 總體架構(gòu)

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

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

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

圖1 游戲活動(dòng)圖

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

（1）棋盤初始化

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

圖2 效果圖

圖3 棋盤初始化

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

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

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

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

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

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

3.結(jié)束語

本研究首先對(duì)2048小游戲的規(guī)則行了簡(jiǎn)單介紹，其次對(duì)如何用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.