JS做2048

首先我们了解一下2048这个游戏的原理:

  他由一个4x4二维数组组成,在游戏一开始时候在随机位置随机生成一个2或者4  

  如:

  

  1.每点击一次开始就刷新一次游戏界面;

  2.通过键盘的上下左右四个方向键分别来控制数字的移动;

  3.当移动的时候判断相应的方向有无相同的数字或者0;

    a.若为相同的数字则叠加,讲叠加的和作为分数计算进总分;

    b.若为0,则与其换位,

  4.当页面被铺满时,且每个数字都无法叠加,那么叛定为游戏结束,显示一个结束界面,界面内容有当前分数以及重新开始;

  

  以上是游戏的基本流程,其中还要考虑到每个数字的不同颜色。

  游戏开始页面:

  1.定义二维数组初始化状态,

 

2.随机在数组中出现2或者4

3.根据数组中的状态来更新界面:

4.左移动:

  当向左移时,要查找当前元素右侧第一个不为0的数字,若存在则返回不为0元素的下标,否则返回-1,若返回-1则判断这一行为空。如果当前元素的值为0,返回值不为空,则将返回下标元素的值赋给当前元素,并将返回下标元素的值设为0,继续循环判定;若当前元素值 == 返回下标元素的值,则将当前元素的值*=2,且将返回元素的值设置为0;若返回-1则跳出循环

  5.接着实现所有行的左移动,一词循环所有的行,实现元素的左移动

 

右移动可以根据此逻辑实现;而上下的移动因为移动方向不一样,他们是根据列的变化来进行判定的,不过只要写出来第一个移动,剩下的就很好办。

6.接下来定义键盘事件(通过上下左右来控制数字的变化)

上下左右是根据Unicode码来分析控制

 7.最后判断游戏是否结束

  我之前的想法是判定整个数组是否被铺满且每个相邻的数都不相等,具备这两个情况说明游戏结束,且放在键盘的循环之中,效果是每移动一次就进行这样的判断,

但是最后做出来的结果是动一下就结束,后来发现问题是break带来的影响,最后没有继续这个想法。

而是...

先给游戏定义一个状态:

判断:当state == GAMEONER时表示游戏结束,那么我隐藏的结束界面就会显示,若不等于0则结束界面继续隐藏

好,思路确定后先确定如何判断游戏结束:

这个思路是遍历每个数组之中的每个数,若数的周围不等于自身且不为0则false,

否则true

这样就可以确定游戏是否结束

最后将结束的页面显示出来:

 附带2048文件,自行去文件下载,仅供学习

https://i.cnblogs.com/Files.aspx

  

原文地址:https://www.cnblogs.com/hzqzwl/p/11331890.html