原生js的2048的制作过程

Posted 张利

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js的2048的制作过程相关的知识,希望对你有一定的参考价值。

1.首先我们来看一下效果图

开始:

 

 结束:

 

 接下来我们来实现代码部分:

html部分:

 

 2048大家应该都玩过,首先我们要准备16个盒子让它4*4排列,这里的css我就不说了,这应该使我们都会的,在这里我组要提醒一点,你们应该看到了,我对这16个命名的方式应该注意到了,为什么要这样命名,这样有规律的命名,方便我们在写js时好操作写。

2.再来看接下来的逻辑是什么样的

(1)我们的游戏一开始的时候就会在页面上产生两个随机数2或4

(2)初始化分数

(3)键盘事件(方便我们上下左右移动的);

(4)当数字相同时会相加,并把自己以前的位子清空 如下图   

        

 

 

不相同的话:

左右移动:如果前面有数字的话,后面的数就会紧跟其后,并把自己以前的位子清空 如下图   

  

 

 

其他方向和上面的差不多;

(5)当我们的16个格子都占满的时候且不能在相加的时候判断游戏结束

(6)并显示遮罩层使整个页面不能在操作;并显示自己的分数

大致就是这样了

3.接下来实现这些功能

(1)

 

 这是我们准备工作和游戏开始的时候,因为我们是面向对象编程,所以我们都是在对象里面编程,

在这里提一下数组其实也是一个对象,你可把数组进行深挖,最终你会发现它也是对象

(2)获取随机数方法

 

 其实看上面的注释已经很清楚了,在这要说的就是一个三元表达式,这就是生成随机素的核心,这里就涉及到概率的问题,我这是五五开,这里可以根据自己的概率去改;

(3)更新视图的方法

 

 

 首先对行和列进行循环遍历,并找到这个数的位置坐标。并获取这个数的ID,然后再对这个数进行判断当这个数是0的时候,此时的位置为空,不管它,当它有数字的时候,此时的位置就为这个数,并获取到它的class属性,同时并把分数赋值到页面上去,此时在看游戏的状态,当游戏结束的时候并出现遮罩层,并把分数显示出来,反之就继续;

 (4)游戏结束判断方法:

 

 首先判断数组中是否有空的位置,左右判断是否有相等的数,此时有人可能不明白为什么现在行和1列长度都变成3了,简单理解,竟然是左右移动看是否相等可定是两两比较,

 

 

 

 

 这就是为什么行和列要加一的原因;

前面的准备工作做完了,接下来我们就要做移动事件了

4.左移事件:

 

 上面我就不一 一解释了

其实只要把上面的逻辑弄清楚了,右,上,下都应该可以写出来了

右:

 

 上:

 

 下:

 

 5.键盘事件:

 

 这个键盘事件的键盘值可以根据自己的想法改不一定要上下左右键

最后补充点改变this指向的3种方法的区别:

call、apply与bind区别:前两个可以自动执行,bind不会自动执行,需要手动调用

call、bind与apply区别:前两个都有无数个参数,apply只有两个参数,而且第二个参数为数组

以上是关于原生js的2048的制作过程的主要内容,如果未能解决你的问题,请参考以下文章

原生js写一个2048游戏

用原生js写2048小游戏

用原生js写2048小游戏

用原生js写2048小游戏

很有点意思的特效,本人很喜欢

这些例子有点意思,可以研究一下哈