摘要:所以我们在全局写一个键盘的事件监听函数。一个是移动后应该立马检测游戏有没有结束,如果四个方向都不能移动的话,游戏就应该了。
先声明哈:我做的这个也是跟着被人学习的,写文章是为了复习思路,还有巩固一下。总而言之呢,就是为了多理解思路,多折腾代码。
键盘监听函数
玩过这款游戏的人都知道,操作就是通过上下左右来移动小方块,完成合并操作。所以我们在全局写一个键盘的事件监听函数$(document).keydown()。
我们需要在其中写入什么呢?首先需要判断是哪个按键被按下,所以肯定需要获取event这个事件触发式生成的对象
Event 对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠的位置、鼠标按钮的状态。
事件通常与函数结合使用,函数不会在事件发生前被执行!
具体的event的解释大家可以去w3school看看。其中event有一个keyCode属性能够获取到敲击键盘的虚拟键盘码
我们通过拿到的keyCode来判断哪个键被按下,同时执行相应的函数就好了,代码如下
$(document).keydown(function (event){ switch(event.keyCode){ case 37: //left moveLeft(); generateOneNumber(); break; case 38: //up break; case 39: //right break; case 40: //down break; } });
但这牵扯到的两个问题,一个是当前的游戏状态允不允许执行左移或者右移,比如如果是不能左移的话,那按下←应该是无效的,同时就不应该新生成一个数字。一个是移动后应该立马检测游戏有没有结束,如果四个方向都不能移动的话,游戏就应该GameOver了。为解决第一个问题,我们需要做一个检测,返回一个值来决定需不需要新生成一个数字。为解决第二个问题,我们需要写一个isgameover().
我们将检测函数写在moveleft内部返回,将键盘监听代码改为如下
case 37://left if(moveLeft()){ generateOneNumber(); isgameover(); }
左移函数moveLeft()
在这里面我们做两件事,一个是先判断能不能移动,不行的话直接返回false。如果能移动的话,我们再执行接下来的移动部分。我先把代码贴出来
完整代码:
function moveLeft(){ if(!canMoveLeft(board)){ return false; } //遍历右边12个格子 for(var i=0;i<4;i++){ for(var j=1;j<4;j++){ if(board[i][j]!=0){ //有数字则遍历左边 for(var k=0;k我们通过canMoveLeft来判断当前游戏状态能不能左移,我们要用到的是存储格子数据的数组board,我们将这个函数写在support.js中
//检测能否左移 function canMoveLeft(board){ for(var i=0;i<4;i++){ for(var j=1;j<4;j++){ if(board[i][j]!= 0){ if(board[i][j-1]==0||board[i][j-1]==board[i][j]) return true; } } } return false; }这里面显而易见的是左边第一列的4个格子是不能移动的,所以只需要遍历右边的12个格子,只要有一个有数字的格子的自身左边的一个格子为空,或者说值和它相等,那么游戏状态就是可以左移的,直接return true;即可。
看完检测函数后我们来看看后面的移动的部分。//遍历右边12个格子 for(var i=0;i<4;i++){ for(var j=1;j<4;j++){ if(board[i][j]!=0){ //有数字则遍历左边 for(var k=0;k同理,也是只需要遍历右边的12个格子,先判断遍历到的这个格子是不是有值,有的话则遍历其左边的所有格子。这里就分成两种情况
1.目标格子是空的,且中间没有阻碍,于是可以移动过去
2.目标格子的值和自身是相等的,而且中间没有阻碍,那么就可以合并
除了这两种情况以外的都不需要做什么操作。
为此我们需要在support.js中写一个检测两个格子间(同一行)有没有阻碍的函数
noBlockHorizontal://检测行上有无阻碍 function noBlockHorizontal(row,col1,col2,board){ for(var i=col1+1;i这个我相信大家都看得懂,我就不解释了。
对于第一种情况我们的操作是:调用移动动画函数
更新board数组,将自身的值传给目标格子,自身设为0
对于第二种情况我们的操作是:
调用移动动画函数
更新board数组,目标格子的值加上自身的值,自身设为0
移动动画函数showMoveAnimation(fromx,fromy,tox,toy)
//移动动画 function showMoveAnimation(fromx,fromy,tox,toy){ var numberCell=$("#number-cell-"+fromx+"-"+fromy); numberCell.animate({ left:getPosLeft(tox,toy), top:getPosTop(tox,toy) },200); }我们是取自身这个数字方块,给它加个animate。animate里面传的是目标格子的left和top值,这个值是通过目标格子的坐标得到的。
moveLeft()函数收尾
在一系列的修改都完成后,我们就需要根据现在的board来渲染格子视图所以最后添加,并返回true给键盘监听函数使用。
//遍历完后更新格子显示状态,慢一点才能显示动画 setTimeout("updateBoardView()",200); return true;最后的最后
其他方向的移动函数也是同理,我就不贴代码了,几乎一模一样,细节上的一些数字不同罢了。当一切都完成后,我们就已经可以开始愉快的玩耍我们的游戏啦!!后面还有一些小bug的修复,得分的统计,游戏结束的判断等,就放到下一篇文章吧,谢谢!!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50448.html
摘要:所以我们在全局写一个键盘的事件监听函数。一个是移动后应该立马检测游戏有没有结束,如果四个方向都不能移动的话,游戏就应该了。 先声明哈:我做的这个也是跟着被人学习的,写文章是为了复习思路,还有巩固一下。总而言之呢,就是为了多理解思路,多折腾代码。 咳咳,上次我们已经将游戏的初始化全部完成了,包括游戏过程中需要的updataBoardView(); generateOneNumber();...
摘要:所以我们在全局写一个键盘的事件监听函数。一个是移动后应该立马检测游戏有没有结束,如果四个方向都不能移动的话,游戏就应该了。 先声明哈:我做的这个也是跟着被人学习的,写文章是为了复习思路,还有巩固一下。总而言之呢,就是为了多理解思路,多折腾代码。 咳咳,上次我们已经将游戏的初始化全部完成了,包括游戏过程中需要的updataBoardView(); generateOneNumber();...
摘要:导语本次将会从头到尾讲一个游戏的制作过程,中间也会穿插自己的理解一项目结构除了和文件外,分了,以及引入。我们将两个方法写在中是格子之间的距离,是一个小格子的宽度定位完成后我们进行的是数组的初始化,初始化为一个的二维数组,值为。 导语 本次将会从头到尾讲一个2048游戏的制作过程,中间也会穿插自己的理解 一.项目结构 除了html和css文件外,分了main.js,support.js,...
摘要:导语本次将会从头到尾讲一个游戏的制作过程,中间也会穿插自己的理解一项目结构除了和文件外,分了,以及引入。我们将两个方法写在中是格子之间的距离,是一个小格子的宽度定位完成后我们进行的是数组的初始化,初始化为一个的二维数组,值为。 导语 本次将会从头到尾讲一个2048游戏的制作过程,中间也会穿插自己的理解 一.项目结构 除了html和css文件外,分了main.js,support.js,...
阅读 3109·2021-11-24 09:39
阅读 968·2021-09-07 10:20
阅读 2389·2021-08-23 09:45
阅读 2254·2021-08-05 10:00
阅读 565·2019-08-29 16:36
阅读 833·2019-08-29 11:12
阅读 2812·2019-08-26 11:34
阅读 1839·2019-08-26 10:56