jQuery实现别踩白块儿网页版小游戏

clearText();
moveDown();
}else{
isgameover();
}
break;
case 75:
if(board[3][1] == 1 && keyDown){
timeRan();
clearText();
moveDown();
}else{
isgameover();
}
break;
case 76:
if(board[3][2] == 1 && keyDown){
timeRan();
clearText();
moveDown();
}else{
isgameover();
}
break;
}
});

在这里设置 keyDown 这个全局变量的目的是为了防止用户在游戏结束时，继续按键。

timeRan()这个函数是显示游戏时间的

代码：

function timeRan(){
 clearTimeout(timer);
 timerRan += 0.001;
 $('#timer').text(timerRan.toString().slice(0,5));
 timer = setTimeout(function(){
 timeRan();
 },1);
}

clearText()这个函数是在游戏开始后，将最下面一行的提示信息去掉

代码：

function clearText(){
 $("#block-3-0").text("");
 $("#block-3-1").text("");
 $("#block-3-2").text("");
}

moveDown()这个函数是方块移动的最主要函数，因为方块要向下移动，所以我们要从最下面开始遍历二维数组，如果该格子是黑色的并且是最下面一行的，就只是简单的把该格子的颜色变回白色，如果该格子是黑色的并且是第一行至第三行的，这个格子变为白色，并且它的正下方的一个格子变为黑色，最后，在第一行的随机位置上显示一个黑色的格子

代码：

function moveDown(){
 for(var i=3;i>=0;i--){
 for(var j=2;j>=0;j--){
  if(board[i][j] == 1){
  if(i == 3){
   $('#block-'+ i +'-'+ j).removeClass('coBlock');
   board[i][j] = 0;
  }else{
   $('#block-'+ i +'-'+ j).removeClass('coBlock');
   board[i][j] = 0;
   $('#block-'+ (i+1) +'-'+ j).addClass('coBlock');
   board[i+1][j] = 1;
  }
  }
 }
 }
 var randj = parseInt(Math.floor(Math.random() * 3));
 $('#block-0-'+ randj).addClass('coBlock');
 board[0][randj] = 1;
}

isgameover()是显示游戏结束样式的函数，比较简单

代码：

function isgameover(){
 keyDown = false;
 clearTimeout(timer);
 $('#container').append('<div id="gameover" class="gameover"><p>本次用时</p><span>'+ timerRan.toString().slice(0,5) +'</span><a href="javascript:restartGame()" class="restartGame">重新开始</a></div>');
 var gameover = $("#gameover");
 gameover.css("width", "300px");
 gameover.css("height", "400px");
 gameover.css("background-color", "rgba(0, 0, 0, 0.5)");
}

function restartGame(){								 
 3/4   首页 上一页 1 2 3 4 下一页 尾页