jQuery编写网页版2048小游戏(2)

// 随机的在一个位置上产生一个数字 function randomNum(){ // 随机产生一个坐标值 var randomX = Math.floor(Math.random() * 4); var randomY = Math.floor(Math.random() * 4); // 随机产生一个数字（2或4） var randomValue = Math.random() > 0.5 ? 2 : 4; // 在数字格不为0的地方生成一个随机数字 while(true){ if(checkerboard[randomX][randomY] == 0){ break; }else{ var randomX = Math.floor(Math.random() * 4); var randomY = Math.floor(Math.random() * 4); } } // 将随机产生的数字显示在随机的位置上 checkerboard[randomX][randomY] = randomValue; // 动画 randomNumAnimate(randomX,randomY,randomValue); }

// 随机产生数字的动画 function randomNumAnimate(randomX,randomY,randomValue){ var randomnum = $('#number-'+ randomX +'-'+ randomY); randomnum.css({ backgroundColor:getBackgroundColor(randomValue), color:getColor(randomValue), }) .text(randomValue) .animate({ width:'100px', height:'100px', top:getPos(randomX), left:getPos(randomY) },50); }

基本操作

我们通过switch循环，来根据用户不同的输入进行不同的操作

代码：

// 获取键盘事件，检测不同的按键进行不同的操作 $(document).keydown(function(event){ switch(event.keyCode){ case 37://左 if(canMoveLeft(checkerboard)){ // 如果可以向左移动 MoveLeft(); // 向左移动 setTimeout(function(){ randomNum(); },200); // 随机产生一个数字 } break; case 38://上 if(canMoveUp(checkerboard)){ // 如果可以向上移动 MoveUp(); // 向上移动 setTimeout(function(){ randomNum(); },200); // 随机产生一个数字 } break; case 39://右 if(canMoveRight(checkerboard)){ // 如果可以向右移动 MoveRight(); // 向右移动 setTimeout(function(){ randomNum(); },200); // 随机产生一个数字 } break; case 40://下 if(canMoveDown(checkerboard)){ // 如果可以向下移动 MoveDown(); // 向下移动 setTimeout(function(){ randomNum(); },200); // 随机产生一个数字 } break; default: break; } });

由于数字格的移动只有左、上、右、下四种方式，并且他们都是大同小异的，所以就拿向左移动为例，

向左移动，我们首先需要判断它是否能向左移动，能向左移动有两种情况

第一种：当前格子的左边的格子是空的即值为0

第二种：当前格子的值和左边格子的值相同

由于向左移动，所以第一列的格子不可能向左移动，所以不需要判断

代码：

// 判断是否可以向左移动 function canMoveLeft(checkerboard){ for(var i=0;i<4;i++){ for(var j=1;j<4;j++){ if(checkerboard[i][j] != 0){ // 如果这个数字格它左边的数字格为空或者左边的数字格和它相等，则可以向左移动 if(checkerboard[i][j-1] == 0 || checkerboard[i][j] == checkerboard[i][j-1]){ return true; } } } } return false; }

判断能否向左移动后，我们就要对可以移动的格子进行移动，这里需要特别注意，向哪个方向移动就要先从哪个方向开始判断

代码：

// 向左移动 function MoveLeft(){ for(var i=0;i<4;i++){ for(var j=1;j<4;j++){ if(checkerboard[i][j] != 0){ for(var k=0;k<j;k++){ if(checkerboard[i][k] == 0 && noMiddleNumRow(i,k,j,checkerboard)){ moveAnimation(i,j,i,k); checkerboard[i][k] = checkerboard[i][j]; checkerboard[i][j] = 0; }else if(checkerboard[i][k] == checkerboard[i][j] && noMiddleNumRow(i,k,j,checkerboard) && !hasConflicted[i][k]){ moveAnimation(i,j,i,k); checkerboard[i][k] += checkerboard[i][j]; checkerboard[i][j] = 0; } } } } } // 设置刷新的时间是为了让运动的动画走完在进行更新数字格，否则数字格运动的动画将会被打断 setTimeout(function(){ numFormat(); },200); }

// 判断中间的数字格是否为0(行) function noMiddleNumRow(row,col1,col2,checkerboard){ for(var i=col1+1;i<col2;i++){ if(checkerboard[row][i] != 0){ return false; } } return true; }

将上、右、下四个方向写完以后，游戏基本的操作就已经完成了。

游戏分数和判断游戏结束

游戏的分数是每个相加的数的和，所以我们在每个数相加的时候更新分数就可以了

代码：

// 更新分数 score += checkerboard[k][j]; updateScore(score);

// 设置分数 function updateScore(num){ $('#score').text(num); }

判断游戏是否结束很简单，用我们之前定义的方法就可以实现

代码：