笔记仓库:https://github.com/nnngu/LearningNotes
1、游戏简介
2048是一款休闲益智类的数字叠加小游戏。(文末给出源代码和演示地址)
2、游戏玩法
在 4*4 的16宫格中,您可以选择上、下、左、右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合并,组成更大的数字,每次移动或合并后会自动增加一个数字。
当16宫格中没有空格子,且四个方向都无法操作时,游戏结束。
3、游戏目的
目的是合并出 2048 这个数字,获得更高的分数。
4、游戏截图
5、游戏实现原理
(1)首先,把16宫格看成是矩阵的形式
(2)在html中给每个格子添加类名及属性,来记录每个格子的位置
注:类名item
是每个格子的类名,emptyItem
是空格子的类名,nonEmptyItem
是非空格子的类名。
(3)游戏开始时,随机生成两个数字,2或者4,出现在矩阵中任意位置
这部分是通过类名emptyItem
及nonEmptyItem
来实现的。
步骤:
① 随机生成一个数字2或者4
② 获取所有空元素(类名emptyItem
)
③ 随机选择一个空元素,将生成的数字填充到空元素中,并将类名emptyItem
移除,添加类名nonEmptyItem
,即非空元素
④ 重复①、②、③步,再随机生成一个数字填充到随机的位置。
(4)游戏的核心在于移动
移动有四个方向:上、下、左、右。实现思路如下:
如果触发向左移动
遍历所有非空元素
如果当前元素在第一个位置
不动
如果当前元素不在第一个位置
如果当前元素左侧是空元素
向左移动
如果当前元素左侧是非空元素
如果左侧元素和当前元素的内容不同
不动
如果左侧元素和当前元素的内容相同
向左合并
如果触发向右移动
遍历所有非空元素
如果当前元素在最后一个位置
不动
如果当前元素不在最后一个位置
如果当前元素右侧是空元素
向右移动
如果当前元素右侧是非空元素
如果右侧元素和当前元素的内容不同
不动
如果右侧元素和当前元素的内容相同
向右合并
向上移动 和 向下移动的思路同上。
(5)判断游戏是否结束
获取所有元素
获取所有非空元素
如果所有元素的个数 == 所有非空元素的个数
循环遍历所有非空元素
上面元素存在 && (当前元素的内容 == 上面元素的内容) return
下面元素存在 && (当前元素的内容 == 下面元素的内容) return
左边元素存在 && (当前元素的内容 == 左边元素的内容) return
右边元素存在 && (当前元素的内容 == 右边元素的内容) return
以上条件都不满足,Game Over!
相关推荐
JavaScript实现2048游戏源码
js实现2048小游戏
2048的JS版,能够实现2048的全部功能,可以根据自己需要做更改
HTML+JS实现2048小游戏demo
html+css+js实现2048小游戏完整代码,内含音乐播放器
JQuery初体验-JavaScript实现2048小游戏PC端源码 游戏页面 游戏页面样式 游戏基础逻辑 游戏动画逻辑 游戏主逻辑 游戏交互逻辑
利用了css3实现动画效果 使用了语义化的html使得代码更可读,利用了部分html5特性。 纯原生的javascript代码操控DOM控制元素组件 大量使用es6语法使得代码更简洁
经典2048小游戏,原生JavaScript实现,可改变格子数,漂亮好玩易操作
本项目为使用JavaScript实现2048小游戏。游戏玩法:在 4*4 的16宫格中,您可以选择上、下、左、右四个方向进行操作,数字会按方向移动,相邻的两个数字相同就会合并,组成更大的数字,每次移动或合并后会自动增加一...
原生Js编写一款2048小游戏 涉及点: 鼠标上移、下移、左移、右移 鼠标释放之后移动方块,包括方块数字叠加 方块移动/叠加处理完成之后随机产生新的方块 判断是否没有可移动的方块了,提示游戏接受
经典2048,纯javaScript开发 微信小程序开发工具直接运行就行!!!!
2048. html + js + css实现网页版2048小游戏源码,直接下载运行index.html和2048.html即可。对于熟练练习JS和html以及css有很大帮助
js实现的2048小游戏。供初学者参考,代码有注释。供参考
纯JS实现的贪吃蛇小游戏,很好很强大,欢迎下载
通过使用多个二维数组,使用javascript在canvas对应坐标上绘制对应的数字,再通过JavaScript的事件监听来实现。
2048游戏规则: 一共16个单元格,初始时由2或者4构成。 1、手指向一个方向滑动,所有格子会向那个方向运动。 2、相同数字的两个格子,相遇时数字会相加。 3、每次滑动时,空白处会随机出现一个数字。 4、当所有...
基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的扫雷小游戏 基于原生JavaScript实现的...
2048小游戏js版本,键盘上下左右操作。2048小游戏js版本,键盘上下左右操作。
本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码,有需要的小伙伴可以参考下。