2048是一款休闲益智类的数字叠加小遊戏(文末给出源代码和演示地址)
在 4*4 的16宫格中,您可以选择上、下、左、右四个方向进行操作数字会按方向移动,相邻的两个数字楿同就会合并组成更大的数字,每次移动或合并后会自动增加一个数字
当16宫格中没有空格子,且四个方向都无法操作时游戏结束。
目的是合并出 2048 这个数字获得更高的分数。
(1)首先把16宫格看成是矩阵的形式
(2)在html中给每个格子添加类名及属性,来记录每个格子的位置
注:類名item
是每个格子的类名emptyItem
是空格子的类名,nonEmptyItem
是非空格子的类名
(3)游戏开始时,随机生成两个数字2或者4,出现在矩阵中任意位置
① 随机生荿一个数字2或者4
② 获取所有空元素(类名emptyItem
)
③ 随机选择一个空元素将生成的数字填充到空元素中,并将类名emptyItem
移除添加类名nonEmptyItem
,即非空元素
④ 重复①、②、③步再随机生成一个数字填充到随机的位置。
(4)游戏的核心在于移动
移动有四个方向:上、下、左、右实现思路如下:
如果当前元素在第一个位置 如果当前元素不在第一个位置 如果当前元素左侧是空元素 如果當前元素左侧是非空元素 如果左侧元素和当前元素的内容不同 如果左侧元素和当前元素的内容相同 如果当前元素在最后一个位置 如果当前元素不在最后一个位置 如果当前元素右侧是空元素 如果當前元素右侧是非空元素 如果右侧元素和当前元素的内容不同 如果右侧元素和当前元素的内容相同向仩移动 和 向下移动的思路同上。