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

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><p>本次用时</p><span>'+ timerRan.toString().slice(0,5) +'</span><a href="javascript: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(){ $('#timer').text('0.000'); $('#gameover').remove(); $('.block').remove(); init(); }

总结

这个小游戏，如果学会了之前的 jQuery编写网页版2048小游戏，就会觉得这个挺简单的，基本的思想和方法都大同小异，如果有任何的建议如果或者想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)