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联系我(免费)(找共同学习的伙伴)
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持毛票票!