用js實現2048小遊戲

2021-09-11 15:27:43 字數 1493 閱讀 6890

筆記倉庫:github.com/nnngu/learn…

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

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

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

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

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

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

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

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

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

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

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

如果觸發向左移動

遍歷所有非空元素

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

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

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

向左移動

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

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

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

向左合併

如果觸發向右移動

遍歷所有非空元素

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

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

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

向右移動

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

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

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

向右合併

複製**

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

獲取所有元素

獲取所有非空元素

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

迴圈遍歷所有非空元素

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

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

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

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

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

複製**

源**:github.com/nnngu/js_ga…

用js實現2048小遊戲

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

用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小遊戲

頁面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...