jQuery实现别踩白块儿网页版小游戏
大致介绍
终于结束了考试，放假回家了。这次的别踩白块儿网页版要比之前做的jQuery编写网页版2048小游戏要简单一点，基本的思路都差不多。
这篇博客并不是详细的讲解，只是大致介绍函数的作用，其中实现的细节注释中有解释，网上的这个源码有点乱，如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)
思路
这个小游戏可以抽象化分为3层
◆最底下的一层是基本的样式（可见的）
◆中间的层是最主要的，是一个4x3的二维数组，游戏中我们都是对这个二维数组进行操作（不可见的）
◆最上面的一层也是一个4x3的二维数组，是用户能最终看见的
我们通过最底下的一层显示最基本的12个小方格，不同的颜色，每个格子对应的中间的层有不同的值，最上面的一层负责显示样式
基本结构与样式
基本的结构和样式都挺简单，直接看代码
结构：
<body> <divid="header"> <h1>别踩白块儿</h1> <divid="timer">0.0000</div> </div> <divid="container"> <divclass="grid"id="grid-0-0"></div> <divclass="grid"id="grid-0-1"></div> <divclass="grid"id="grid-0-2"></div> <divclass="grid"id="grid-1-0"></div> <divclass="grid"id="grid-1-1"></div> <divclass="grid"id="grid-1-2"></div> <divclass="grid"id="grid-2-0"></div> <divclass="grid"id="grid-2-1"></div> <divclass="grid"id="grid-2-2"></div> <divclass="grid"id="grid-3-0"></div> <divclass="grid"id="grid-3-1"></div> <divclass="grid"id="grid-3-2"></div> </div> </body>
样式：
body{
background-color:#008694;
font:12px/20px"黑体",arial;
}
#header{
display:block;
margin:0auto;
width:500px;
text-align:center;
}
#headerh1{
font-family:Arial;
font-size:40px;
font-weight:bold;
}
#timer{
z-index:4;
font-size:24px;
color:#fa3c3c;
font-weight:700;
text-shadow:2px2px3pxrgba(0,0,0,.3)
}
#container{
width:302px;
height:402px;
margin:50pxauto;
background-color:#55d769;
border:5pxsolid#000;
position:relative;
}
.grid{
width:100px;
height:100px;
background-color:#fff;
border:1pxsolid#000;
position:absolute;
}
.block{
width:100px;
height:100px;
border:1pxsolid#000;
font-family:Arial;
font-weight:bold;
font-size:20px;
color:#fff;
text-align:center;
position:absolute;
}
.coBlock{
background-color:#000;
}
.gameover{
display:block;
margin:0auto;
width:300px;
text-align:center;
vertical-align:middle;
position:absolute;
}
.gameoverp{
font-family:Arial;
font-size:50px;
color:white;
margin:50pxauto;
margin-top:150px;
}
.gameoverspan{
font-family:Arial;
font-size:50px;
color:white;
margin:50pxauto;
}
.restartGame{
display:block;
margin:20pxauto;
width:180px;
padding:10px10px;
background-color:#8f7a66;
font-family:Arial;
font-size:30px;
color:white;
border-radius:10px;
text-decoration:none;
}
.restartGame:hover{
background-color:#9f8b77;
}
这里并没有设置每个格子的位置，位置由js代码来设置，以及第二层的二维数组、第三层的显示层都由js来设置，这里和jQuery编写网页版2048小游戏并没有什么大的区别
代码：
functioninit(){
timerRan=0.000;
keyDown=true;
for(vari=0;i<4;i++){
board[i]=[];
for(varj=0;j<3;j++){
board[i][j]=[];
vargrid=$('#grid-'+i+'-'+j);
grid.css({
'top':getPosTop(i,j),
'left':getPosLeft(i,j)
});
$('#container').append('<divclass="block"id="block-'+i+'-'+j+'"></div>');
varblock=$('#block-'+i+'-'+j);
block.css({
'top':getPosTop(i,j),
'left':getPosLeft(i,j)
});
board[i][j]=0;
}
}
functiongetPosTop(i,j){
returni*100;
}
functiongetPosLeft(i,j){
returnj*100;
}
初始化
游戏开始时，要在每一行随机的位置显示一个黑色的方块，并且在最下面的那一行的黑色方块上要有提示信息
代码：
for(vari=0;i<4;i++){
varrandj=parseInt(Math.floor(Math.random()*3));
if(i>0&&board[i-1][randj]==1){
randj=parseInt(Math.floor(Math.random()*3));
}
$('#block-'+i+'-'+randj).addClass('coBlock');
board[i][randj]=1;
}
$('#block-3-0').text('按J开始游戏');
$('#block-3-1').text('按K开始游戏');
$('#block-3-2').text('按L开始游戏');
基本操作
我们通过switch循环，来根据用户不同的输入进行不同的操作
代码：
$(document).keydown(function(event){
switch(event.keyCode){
case74:
if(board[3][0]==1&&keyDown){
timeRan();
clearText();
moveDown();
}else{
isgameover();
}
break;
case75:
if(board[3][1]==1&&keyDown){
timeRan();
clearText();
moveDown();
}else{
isgameover();
}
break;
case76:
if(board[3][2]==1&&keyDown){
timeRan();
clearText();
moveDown();
}else{
isgameover();
}
break;
}
});
在这里设置keyDown这个全局变量的目的是为了防止用户在游戏结束时，继续按键。
timeRan()这个函数是显示游戏时间的
代码：
functiontimeRan(){
clearTimeout(timer);
timerRan+=0.001;
$('#timer').text(timerRan.toString().slice(0,5));
timer=setTimeout(function(){
timeRan();
},1);
}
clearText()这个函数是在游戏开始后，将最下面一行的提示信息去掉
代码：
functionclearText(){
$("#block-3-0").text("");
$("#block-3-1").text("");
$("#block-3-2").text("");
}
moveDown()这个函数是方块移动的最主要函数，因为方块要向下移动，所以我们要从最下面开始遍历二维数组，如果该格子是黑色的并且是最下面一行的，就只是简单的把该格子的颜色变回白色，如果该格子是黑色的并且是第一行至第三行的，这个格子变为白色，并且它的正下方的一个格子变为黑色，最后，在第一行的随机位置上显示一个黑色的格子
代码：
functionmoveDown(){
for(vari=3;i>=0;i--){
for(varj=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;
}
}
}
}
varrandj=parseInt(Math.floor(Math.random()*3));
$('#block-0-'+randj).addClass('coBlock');
board[0][randj]=1;
}
isgameover()是显示游戏结束样式的函数，比较简单
代码：
functionisgameover(){
keyDown=false;
clearTimeout(timer);
$('#container').append('<divid="gameover"class="gameover"><p>本次用时</p><span>'+timerRan.toString().slice(0,5)+'</span><ahref="javascript:restartGame()"class="restartGame">重新开始</a></div>');
vargameover=$("#gameover");
gameover.css("width","300px");
gameover.css("height","400px");
gameover.css("background-color","rgba(0,0,0,0.5)");
}
functionrestartGame(){
$('#timer').text('0.000');
$('#gameover').remove();
$('.block').remove();
init();
}
总结
这个小游戏，如果学会了之前的jQuery编写网页版2048小游戏，就会觉得这个挺简单的，基本的思想和方法都大同小异，如果有任何的建议如果或者想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！