本文总浏览量次
游戏逻辑
游戏分为两类:一种是基于时间流逝的游戏,一种是基于玩家响应的游戏,2048属于后者,2048是基于用户在电脑上,监听用户按下的上下左右来进行一系列的逻辑,然后实现页面上的变化
keaibaobao
代码的实现
首先是页面的设计,需要有一个标题2048还有score,还有下面的移动方格,方格的底子可以直接写出来,但是由于有数字的格子是会变化的,则需要用js控制动态生成
实现动态生成的部分代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| function updateBoardView(){ $(".number-cell").remove(); for(var i=0;i<4;i++){ for(var j=0;j<4;j++){ $("#grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>'); var theNumberCell=$('#number-cell-'+i+'-'+j); if(board[i][j]==0){ theNumberCell.css('width','0px'); theNumberCell.css('height','0px'); theNumberCell.css('top',getPosTop(i,j)+50); theNumberCell.css('left',getPosLeft(i,j)+50); } else{ theNumberCell.css('width','100px'); theNumberCell.css('height','100px'); theNumberCell.css('top',getPosTop(i,j)); theNumberCell.css('left',getPosLeft(i,j)); theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j])); theNumberCell.text(board[i][j]); } } } }
|
在页面设计好之后就是游戏的重点逻辑的实现
我觉得大概js的实现流程应该是
首先需要实现的是页面刚开始就必须在随机的格子上生成两个随机数字
部分代码,用了js的Math.random()巧妙的随机
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| function generateOneNumber(){ if(nospace(board)) { return false; } var randx=parseInt(Math.floor(Math.random()*4)); var randy=parseInt(Math.floor(Math.random()*4)); while(true){ if(board[randx][randy]==0){ break; } randx=parseInt(Math.floor(Math.random()*4)); randy=parseInt(Math.floor(Math.random()*4)); } var randNumber=Math.random()<0.5?2:4; board[randx][randy]=randNumber; showNumberWithAnimation(randx,randy,randNumber); return true; }
|
然后是用keydown来检测用户的上下左右键
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
| $(document).keydown(function(event){ switch(event.keyCode){ case 37: if(moveLeft()){ setTimeout("generateOneNumber()",210); setTimeout("isgameover()",300); } break; case 38: if(moveUp()){ setTimeout("generateOneNumber()",210); setTimeout("isgameover()",300); } break; case 39: if(moveRight()){ setTimeout("generateOneNumber()",210); setTimeout("isgameover()",300); } break; case 40: if(moveDown()){ setTimeout("generateOneNumber()",210); setTimeout("isgameover()",300); } break; default: break; } });
|
接着编写上下左右键作用下的格子的逻辑变化(以左为例)
这个的实现使整个游戏的关键部分,首先得判断里面的格子是否可以向左边移动,就是判断格子的左边是否有数值为0或者与它相等的数,接着在可以向左移后,从左边开始计数,来判断各行某一列的格子可以移动到哪里,这就又要判断它左边哪里是空或者哪里和它相等,并且中间不能被阻隔,要是满足的话,就直接移过去,将数值改变,最后更新页面变化,包括分数等等
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| function moveLeft(){ if(!canMoveLeft(board)) { return false; } for(var i=0;i<4;i++){ for(var j=1;j<4;j++){ if(board[i][j]!=0){ for(var k=0;k<j;k++){ if(board[i][k]==0&&noBlockHorizontal(i,k,j,board)){ showMoveAnimation(i,j,i,k); board[i][k]=board[i][j]; board[i][j]=0; continue; } else if(board[i][k]==board[i][j]&&noBlockHorizontal(i,k,j,board)){ showMoveAnimation(i,j,i,k); board[i][k]+=board[i][j]; board[i][j]=0; score+=board[i][k]; updateScore(score); continue; } } } } } setTimeout("updateBoardView()",200); return true;}
|
最后就是判断游戏是否结束了
其实就是增加判断是不是全部格子都有数字了,是不是都不能移动了,就解决了
1 2 3 4 5 6 7 8
| function isgameover(){ if(nospace(board)&&nomove(board)){ gameover(); } } function gameover(){ alert("gameover!"); }
|
移动中动画的实现
用的是jquery中的animate()来实现动画,将格子的容器posision: relative,然后让格子容器中中动态生成的格子数字用posision: absolute,然后在js里控制left,top等等来实现动态定位,然后animate的第二个参数来控制动画的时间,便可以顺利完成动画
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| function showNumberWithAnimation(i,j,randNumber){ var numberCell=$('#number-cell-'+i+"-"+j); numberCell.css('background-color',getNumberBackgroundColor(randNumber)); numberCell.css('color',getNumberColor(randNumber)); numberCell.text(randNumber); numberCell.animate({ width:"100px", height:"100px", top:getPosTop(i,j), left:getPosLeft(i,j) },50); } function showMoveAnimation(fromx,fromy,tox,toy){ var numberCell=$('#number-cell-'+fromx+'-'+fromy); numberCell.animate({ top:getPosTop(tox,toy), left:getPosLeft(tox,toy) },200); }
|
教程
链接:http://www.imooc.com/learn/76
可自由转载、引用,但需署名作者且注明文章出处。