JS如何做2048(详细)

在做2048之前,我们首先要了解它的游戏规则,以及运行逻辑

  首先,来看上半部分

  

  除了标题外还有记录每次获得的分数,以及总分数,还有一个重新开始按钮,这个最大分数会保存下来。

  来看页面内容

 页面内容由16个格子组成,格子里面装着数字

以上就是2048的基础显示部分

在游戏一开始运行的时候会在格子随机位置生成   2   或  4   这两个随机数,

代码:

  

// 随机生成2 或 4
Random:function(){
// 生成死循环
for(;;){
var r = Math.floor(Math.random()*4);
var c = Math.floor(Math.random()*4);
if(this.date[r][c]==0){
var num = Math.random()>0.5?2:4;
this.date[r][c]=num;
break;
}
}
},

在这个之前,我们要先定义分数,以及游戏运行时和结束时的状态

  

 在获取到随机数后我们要将随机数放到这些格子中去

 这样后,每次刷新页面都会在不同位置生成2或4

当完成这一步后我们需要知道,2048是用户通过键盘的上下左右来控制方向,然后进行数字的移动和相加的,所以我们要定义四个键盘事件

 定义好了以后,我们写一个向左移动事件

写之前我们要理清楚逻辑,当向左移动时,先判断当前行有无数字,分两种情况,1:有数字时则判断是否相同,若为相同的数字则相加,若不相同则向最左侧移动;2.无数字时则交换位置,原位置清空置零。

最后我们还需要判断是否进行了移动,这里提供一个思想,在移动之前拍个照,然后在移动之后再拍个照,若两个不相等则进行移动的操作

拍照:

  

 左移动:

  

 写了一个移动后其余几个大同小异,逻辑清楚后就很快写出来了

然后我们要进行一个游戏结束的判断,首先我们有个游戏结束的界面

这个界面应该经过什么判断出来好呢?

先判断十六个格子的是否铺满,若铺满了则返回false,结束判断;再就是判断行

和列,若行或者列等于下一个则无法移动相加,所以由此可以判断游戏为结束状态

代码:

最后扩充一下,将游戏打包成移动端;

移动端的屏幕是通过手指的滑动进行操控的,怎么将2048的上下左右放在手机上判断呢?

那需要重新定义触发事件:

手机可以当做一个坐标轴,原点是左上角,然后获取不同手机的分辨率,获取分辨率后,得到

x和y,通过对x和y的相关判断来重新定义上下左右事件。

代码:

  

最后通过打包软件就可以在手机上下载运行了,前提是你的2048格子是由弹性盒子或者百分比写的,不然太小了。

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