【总结篇】js编写的2048小游戏开发（下：算法实现）

最新推荐文章于 2021-09-12 14:17:31 发布

SuperZZQ_

最新推荐文章于 2021-09-12 14:17:31 发布

阅读量2.1k

点赞数 3

分类专栏： js jquery 综合文章标签： js 2048 jquery 算法

本文链接：https://blog.csdn.net/superzzq_/article/details/85042771

版权

本文详细介绍了使用js开发2048小游戏的关键算法，包括新增格子、上下左右移动、合并操作和游戏结束判断的实现。通过编程思路和代码解读，帮助新手理解编程思维和开发小游戏的技巧。

摘要由CSDN通过智能技术生成

在上一篇展现了js编写2048小游戏的思路以及编程框架搭建，本篇将基于上篇的结构来讲解游戏关键操作方法的具体算法实现。适合已经阅读完上一篇文章https://blog.csdn.net/SuperZZQ_/article/details/82662732，这篇的文章在编辑过程中侧重于讲解如何将我们熟悉的、可见的操作通过对产生条件、触发效果、细分步骤方面进行解构，转化成编程思维，并利用前端语言写成代码，最终形成一个完整的小游戏。对于每一句代码进行了解读和剖析，适合初次开发小游戏的新手小白更好地理解程序，有助于日后开发小游戏过程中的编程思维培养与训练。

一. 新增格子方法

1. 操作描述：

每按下方向键后若格子能够发生变动（即有移动或合并操作产生），便在移动或合并操作后剩下的空白处某一随机位置新增一个数值为2的格子。

2. 编程思路：

我们需要结合其它方法来判断是否执行此方法，因此定义一个全局的布尔类型变量 moveAble，用作新增格子的“开关”。默认状态下让它“关闭”，即在声明时赋值为 false。在进行了移动或合并操作后将它“打开”，即在移动和合并的方法内部将true赋值给 moveAble。并在即将进行新一轮移动或合并操作前再将它“关闭”，即在上篇监听方法中执行向上/下/左/右方法之前将其值设为false。

了解这个“开关”的作用后开始编写新增格子方法。首先判断 moveAble 是否为 true ，为 true 则继续进行，否则控制台返回“不能增加新格子，请尝试其他方向移动！”。接着遍历整个二维数组，将数值为空的坐标保存进局部定义的数组变量 ableArr 中，对下标进行随机方法，将最终的随机下标值和格子值（2）或随机下标值传入 arrValueUpdate 与 drawCell 方法中来画出新格子。

3. 代码：

//新增格子方法
newCell:function(){
		var i,j,len,index;
		var ableArr = [];                           //用于保存遍历后提取出来的空格子位
		if(this.moveAble != true){                  //判断是否符合增加格子的条件
			console.log('不能增加新格子，请尝试其他方向移动！');
			return;
		} 
		for (i = 0; i < 4; i++) {                   //通过遍历提取出空格子位数组
			for (j = 0; j < 4; j++) {
				if(this.arr[i][j].value == 0){
					ableArr.push([i,j]);
				}
			}
		}
		len = ableArr.length;
		if(len > 0){
			index = getRandom(len);                 //在数组中随机出一个位置
			i = ableArr[index][0];
			j =