JavaScript實現2048小遊戲

2021-09-13 11:22:39 字數 3341 閱讀 5400

首先要明白該遊戲怎麼玩,即

在 4*4 的16宮格中,您可以選擇上、下、左、右四個方向進行操作,數字會按方向移動,相鄰的兩個數字相同就會合併,組成更大的數字,每次移動或合併後會自動增加乙個數字。當16宮格中沒有空格子,且四個方向都無法操作時,遊戲結束。

這部分是通過類名emptyitemnonemptyitem來實現的。

步驟:① 隨機生成乙個數字2或者4

② 獲取所有空元素(類名emptyitem

③ 隨機選擇乙個空元素,將生成的數字填充到空元素中,並將類名emptyitem移除,新增類名nonemptyitem,即非空元素

④ 重複①、②、③步,再隨機生成乙個數字填充到隨機的位置。

移動有四個方向:上、下、左、右。實現思路如下:

如果觸發向左移動

遍歷所有非空元素

如果當前元素在第乙個位置

不動如果當前元素不在第乙個位置

如果當前元素左側是空元素

向左移動

如果當前元素左側是非空元素

如果左側元素和當前元素的內容不同

不動如果左側元素和當前元素的內容相同

向左合併

如果觸發向右移動

遍歷所有非空元素

如果當前元素在最後乙個位置

不動如果當前元素不在最後乙個位置

如果當前元素右側是空元素

向右移動

如果當前元素右側是非空元素

如果右側元素和當前元素的內容不同

不動如果右側元素和當前元素的內容相同

向右合併

向上移動 和 向下移動的思路同上。

獲取所有元素

獲取所有非空元素

如果所有元素的個數 == 所有非空元素的個數

迴圈遍歷所有非空元素

上面元素存在 && (當前元素的內容 == 上面元素的內容) return

下面元素存在 && (當前元素的內容 == 下面元素的內容) return

左邊元素存在 && (當前元素的內容 == 左邊元素的內容) return

右邊元素存在 && (當前元素的內容 == 右邊元素的內容) return

以上條件都不滿足,game over!

來看效果圖

可以看到,遊戲框上方是一些文字描述,遊戲框外面是乙個大的灰色的div,裡面設定有4行,每行有4個單元格,一共是16個單元格。使用bootstrap的柵欄布局可以寫成div.container>div.main>h2.title+h3.highestscore+h3.currentscore+div.panel.col-md-6>(div.row>(div.item.emptyitem)*4)*4,其中panel樣式的div就是表示遊戲框,row樣式表示每一行,row裡的每一行用小div來充當單元格,輔助說明的樣式使用item表示單元格,emptyitem樣式表示空單元格,nonemptyitem表示非空單元格,然後根據矩陣中單元格的位置,再給各自的單元格新增樣式,如x0y0,x1y0......根據這些樣式,單獨給每個單元格自定義乙個x屬性和y屬性,x=「0」,y=「0」......具體作用在js中體現。

html**

請通過鍵盤方向鍵進行操作

重新整理

在css**中首先進行css初始化,然後根據效果圖,自行配置。

在js檔案中,首先進入遊戲初始化函式gameinit(),

gameinit()中先將分數初始化,然後給「重新整理」按鈕繫結監聽事件指向gamerefresh()函式,然後呼叫兩次newitem函式新增兩個隨機元素(2或4),然後呼叫refrecolor()函式遍歷單元格,根據單元格文字值重新整理背景色。

newitem()函式中,根據乙個包含2和4的陣列,隨機選出乙個,然後遍歷所有空白單元格(有樣式emptyitem的)然後隨機選擇乙個,新增樣式nonemptyitem,刪除樣式emptyitem,然後修改文字值為2或4的隨機數。

refreshcolor()函式中,根據樣式item,將所有單元格依據文字值進行背景顏色的修改。

全域性新增鍵盤響應事件,根據keycode的值,選擇方向鍵的不同事件,先將isnewrnditem=false;表明每次移動之前將產生新元素的標記置為false,呼叫move函式和isgameover()函式。

move()函式中,首先遍歷所有非空的單元格(有nonemptyitem樣式),根據傳入的方向direction引數,決定正反向遍歷,其中正向遍歷為左和上,反向遍歷為右和下。

對於左移動和上移動,需要正向遍歷有數值的單元格,當需要移動的時候,下標小的元素可以先往上移動或往左移動,

反之,對於右移動和下移動,需要反向遍歷單元格,讓下標大的單元格先移動,如果下標小的先移動,如果同一行有單元格的話,小的單元格會被大單元格擋住。在遍歷的每個單元格中,呼叫moveitem()函式。

moveitem()函式中,首先呼叫getsideitem()函式,得到其旁邊元素的資訊(有或無,有值或空),根據旁邊元素的樣式和文字值,進行操作(移動,合併等)。

其餘函式自行檢視。

window.onload=function()

else

//初始化遊戲

gameinit();

//初始化設定

function gameinit()

//重新開始遊戲

function gamerefresh()

} if(isnewrnditem)

} //判斷遊戲是否結束,即遍歷所有元素,

function isgameover(){

var nonemptyitems=document.getelementsbyclassname('nonemptyitem');

var allitems=document.getelementsbyclassname('item');

if(nonemptyitems.length==allitems.length){//所有單元格鋪滿,檢查是否有可以合併的兩個單元格

for(var i=0;i

204 計數質數

統計所有小於非負整數 n 的質數的數量。示例 輸入 10 輸出 4 解釋 小於 10 的質數一共有 4 個,它們是 2,3,5,7 這個題目思路很簡單,但是可能效率不高,裡面有一些小trick需要注意,所以在這裡記錄一下優化過程。思路1 逐個判斷每個數是否質數,超時 class solution d...

204 計數質數

統計所有小於非負整數 n 的質數的數量。示例 輸入 10 輸出 4 解釋 小於 10 的質數一共有 4 個,它們是 2,3,5,7 判斷質數的常規解法 如判斷n是否為質數,只需要判斷n是否能整除2 int sqrt n 厄拉多塞篩法 比如說求20以內質數的個數,首先0,1不是質數.2是第乙個質數,然...

204 計數質數

統計所有小於非負整數 n 的質數的數量。示例 輸入 10 輸出 4 解釋 小於 10 的質數一共有 4 個,它們是 2,3,5,7 埃拉託色尼篩選法,迴圈中置對應值的倍數為0,最後統計為1的個數,也就是質數的個數。class solution def countprimes self,n int i...