纯js实现2048小游戏

立即下载用AI写一个

发布时间：2020-01-16

3人 | 浏览：1703次 | 收藏 |

技术：js + jquery + html5

运行环境：chrome

概述

本文讲述如何使用纯js + juqery实现风靡一时的小游戏 --- 2048 ,文中会讲解个人思路以及具体实现过程.

详细

> 记得把这几点描述好咯：需求（要做什么） + 代码实现过程 + 项目文件结构截图 + 演示效果

### 前言
想必2048这款风靡一时的解压打磨时间的小游戏,有不少小伙伴都玩过吧,本人玩过了,最高只合成到了4096,在合成第二个4096的时候,合成到了差一个512就可以的时候,挂掉了,准备重新玩一把的时候,出来了一堆的广告,弄得不胜其烦,作为一个程序员,一个有代码洁癖的程序员最看不惯的就是各种广告.但是又想玩2048怎么办呢,思来想去,自己写一个吧,自娱自乐,于是乎,就有了这篇文章
### 完成效果：
这个是自己手写的哈,只用了jQuery和html5,可以无限撤回哈,没有限制,纯属自娱自乐哈!
![](/contentImages/image/20200116/9VwfqwxfeW9p2q48N4i.png)

### 思路：
玩过2048的童鞋都知道,其实是一个很简单的规则,棋盘是 4 * 4 的16格棋盘,开局会默认显示两个数字,这两个数字是2和4中的随机一个,要么是2要么是4,在接下来,玩家要通过上下左右操作,将每一行/列的数据进行定向排列合并,理论数字可以支持到很大的,每一次操作之后会在空白处随机生成一个数字,这个数字也在也是2和4中的随机一个.
我们知道规则了,如何将之转换为代码逻辑呢?
本人的想法是,将棋盘看作是一个以棋盘左下角作为原点的二维坐标系的第一象限,这样可以很清楚的表达一个位置,也更利于列或者行取出,或渲染指定位置的数据以及颜色.即:
![](/contentImages/image/20200116/9Ky6VbKdGjo0mRhRZYz.png)
这里的坐标点表示方式和数学中坐标点的表达方式的不太一样哈,数学中代表一个点的坐标是 {x , y},我这里我当时惯性思维写成了{y , x},
大家不要见笑哈.

在这个4 * 4 的棋盘中,我们可以将任意一行,或者任意一列取出来进行单独的移动合并操作,具体是操作列还是操作行,需要看玩家的操作:

玩家的操作如果是左右,那么我们的操作合并对象为行,需要将行数据根据具体左右键进行定向移动合并;
	玩家的操作如果是上下,那么我们的操作合并对象为列,需要将列数据根据具体上下键进行定向移动合并;

但是我们不管是操作列,还是操作行都是将这一列/行的四个位置的数据拿出来成为一个长度为4的数组进行操作,所有我们可以将上下左右四个方向的操作,按照数组的操作拆分为两种:

左和下操作,是将行/列的数据向靠近坐标系原点的方向移动,下标是减小的,我们称之为反向操作
	右和上操作,是将行/列的数据向远离坐标系原点的方向移动,下标是增大的,我们称之为正向操作

换成数组的话

放在数组中的话,就是左和下,是将数据向数组前方移动合并;右和上,是将数据向数组后方移动合并

到此,我门将游戏中的所有操作,转换成为了一个简单的长度为四的数组的四个值的移动和合并.

那么我们如何对着一个数组进行定向移动合并呢,我的思路是:

1.将四个值中的""去掉,实现所有数字相邻(2204 --> 224 , 0代表"")
	2.判断当前操作未正向操作还是反向操作:
		2.1 正向操作 数字向右合并 (2224 ==> 2044 , 0代表"")
		2.2 反向操作 数字向左合并 (2224 ==> 4024 , 0代表"")
	3.再次将""取出,实现数字相邻
	4.根据当前操作方向,在数组前后添加""
		4.1 正向操作 数组前方添加"" (244 ==> 0244 , 0代表"")
		4.2 反向操作 数组后方添加"" (244 ==> 2440 , 0代表"")

至此思路操作均已转换为代码逻辑,剩下的就是代码编写啦!这里就不贴了,只有不到400行代码.需要的朋友可以先自己写一下试试看,下不出来的话,再来下载我的demo,我的demo中每一行都有详细的注释,包括颜色的渲染,分数的计算,最高分的统计和记录,以及撤回功能的实现:
![](/contentImages/image/20200116/dcQuiKDbYNWRTdOEJPS.png)

### 项目结构
项目结构很简单,不需要环境,一个jquery.min.js 和一个 2048.html,demo中的每一步我都注明了注释:
![](/contentImages/image/20200116/qjHuu8PpsIN2CckUVYA.png)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

纯js实现2048小游戏

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子