用js實現2048小遊戲

2021-08-15 14:33:44 字數 1579 閱讀 7686

筆記倉庫:

2048是一款休閒益智類的數字疊加小遊戲。(文末給出源**和演示位址)

在 4*4 的16宮格中,您可以選擇上、下、左、右四個方向進行操作,數字會按方向移動,相鄰的兩個數字相同就會合併,組成更大的數字,每次移動或合併後會自動增加乙個數字。

當16宮格中沒有空格子,且四個方向都無法操作時,遊戲結束。

目的是合併出 2048 這個數字,獲得更高的分數。

注:類名item是每個格仔的類名,emptyitem是空格子的類名,nonemptyitem是非空格子的類名。

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

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

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

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

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

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

如果觸發向左移動

遍歷所有非空元素

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

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

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

向左移動

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

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

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

向左合併

如果觸發向右移動

遍歷所有非空元素

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

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

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

向右移動

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

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

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

向右合併

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

獲取所有元素

獲取所有非空元素

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

迴圈遍歷所有非空元素

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

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

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

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

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

源**:

用JS實現2048小遊戲

重新開始 撤回上一步 game top game top button game panel gridvar grid document.getelementsbyclassname grid var arr before 0,0,0,0 0,0,0,0 0,0,0,0 0,0,0,0 var ar...

用js實現2048小遊戲

筆記倉庫 github.com nnngu learn 2048是一款休閒益智類的數字疊加小遊戲。文末給出源 和演示位址 在 4 4 的16宮格中,您可以選擇上 下 左 右四個方向進行操作,數字會按方向移動,相鄰的兩個數字相同就會合併,組成更大的數字,每次移動或合併後會自動增加乙個數字。當16宮格中...

js實現2048小遊戲

頁面class hidden id end id endspan id table colspan 4 id s1 id s2 id s3 id s4 id s5 id s6 id s7 id s8 id s9 id s10 id s11 id s12 id s13 id s14 id s15 id...