2048小游戏(JavaScript版) (1) 游戏介绍
发布于2021-03-10 19:01 阅读(1281) 评论(0) 点赞(4) 收藏(3)
作者：@小灰灰
本文为作者原创，转载请注明出处：https://www.cnblogs.com/liuhui0308/p/14411698.html
1. 游戏介绍
现在开始学编程的，基本上都过手机游戏2048吧，那么这个游戏的玩法相信很多人都熟悉，我在这里再给大家回顾下吧。
1.1 游戏规则
每次控制所有方块向同一个方向运动，两个相同数字的方块撞在一起之后合并成为他们的和，每次操作之后会在空白的方格处随机生成一个2或者4，不断的组合让分数提高，在手机上有分数排行榜，那些大佬的分数真的令人叹服。如果16个格子全部填满并且相邻的格子都不相同也就是无法移动的话，那么恭喜你，gameover。
1.2 游戏基本原则
1. 最大的数一定要放到角落
2. 数字要按顺序紧邻排序
3. 保证最大数和次大数那一行/列是满的
这就是我给新手玩家分享的经验，遵守这几个规则，可以保证达到几万分的水准。
1.3 主要实现功能
然后就要来分析一下我们需要实现的功能了：
1. 初始化界面，并且随机生成两个数字为2或者4的格子
2. 方块移动和合并适合的效果，方块的颜色要随着值的改变而改变
3. 判断在某个方向上是否可以移动，不能移动就不变化
4. 在后续生成随机数字的时候判断是否还有空间，有则生成下一块，没有则判断四个方向是否都无法移动，都满足时提示gameover并结束游戏
5. 在任意两个格子合并后，分数都要加上值为合并后格子的值
6. 判断每个格子移动到什么位置，会不会合并
实现思路：
用向右方向移动为例，先判断格子是否能够向右方向移动，如果可以，循环每一个格子。如果这个格子的值不为0，遍历格子右侧的元素，判断落脚的位置是否为空以及落脚位置的数字是否和本来的数字相等 。如果落脚的位置为空 && 中间没有障碍物，更新样式，将落脚位置格子的值设为移动格子的值，原格子值设为空。如果落脚位置的数字和本来的数字相等&& 中间没有障碍物，更新样式，将落脚位置格子的值设为移动格子值与落脚位置格子值相加后的值，原格子值设为空。
1.4 使用技术
HTML
CSS
JavaScript
jQuery
Vue
我准备做三个版本的，原生JavaScript版、jQuery版以及Vue版。
这也是第一次做录音视频，讲的不好的地方大家见谅。
原文链接:https://www.cnblogs.com/liuhui0308/p/14411698.html
所属网站分类: 技术文章 > 博客
作者：大哥你来啦
链接：http://www.qianduanheidong.com/blog/article/34338/800ebea32948c08c4ba3/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力