jQuery实践-别踩白块儿网页版

▓▓▓▓▓▓ 大致介绍

　　终于结束了考试，放假回家了。这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏要简单一点，基本的思路都差不多。

　　预览：别踩白块网页版

　　这篇博客并不是详细的讲解，只是大致介绍函数的作用，其中实现的细节注释中有解释，网上的这个源码有点乱，如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)

▓▓▓▓▓▓ 思路

　　这个小游戏可以抽象化分为3层

　　　　◆最底下的一层是基本的样式（可见的）

　　　　◆中间的层是最主要的，是一个4x3的二维数组，游戏中我们都是对这个二维数组进行操作（不可见的）

　　　　◆最上面的一层也是一个4x3的二维数组，是用户能最终看见的

　　我们通过最底下的一层显示最基本的12个小方格，不同的颜色，每个格子对应的中间的层有不同的值，最上面的一层负责显示样式

▓▓▓▓▓▓ 基本结构与样式

　　基本的结构和样式都挺简单，直接看代码

　　结构：

 <body>

     <div id="header">

         <h1>别踩白块儿</h1>

         <div id="timer" >0.0000</div>

     </div>

     <div id="container">

         <div class="grid" id="grid-0-0"></div>

         <div class="grid" id="grid-0-1"></div>

         <div class="grid" id="grid-0-2"></div>

         <div class="grid" id="grid-1-0"></div>

         <div class="grid" id="grid-1-1"></div>

         <div class="grid" id="grid-1-2"></div>

         <div class="grid" id="grid-2-0"></div>

         <div class="grid" id="grid-2-1"></div>

         <div class="grid" id="grid-2-2"></div>

         <div class="grid" id="grid-3-0"></div>

         <div class="grid" id="grid-3-1"></div>

         <div class="grid" id="grid-3-2"></div>

     </div>

 </body>

　　样式：

 body{

     background-color: #008694;

     font: 12px/20px "黑体" ,arial;

 }

 #header {

     display: block;

     margin: 0 auto;

     width: 500px;

     text-align: center;

 }

 #header h1 {

     font-family: Arial;

     font-size: 40px;

     font-weight: bold;

 }

 #timer {

     z-index:;

     font-size: 24px;

     color: #fa3c3c;

     font-weight:;

     text-shadow: 2px 2px 3px rgba(0, 0, 0, .3)

 }

 #container{

     width: 302px;

     height: 402px;

     margin: 50px auto;

     background-color: #55d769;

     border: 5px solid #000;

     position: relative;

 }

 .grid {

     width: 100px;

     height: 100px;

     background-color: #fff;

     border: 1px solid #000;

     position: absolute;

 }

 .block {

     width: 100px;

     height: 100px;

     border: 1px solid #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: 0 auto;

     width: 300px;

     text-align: center;

     vertical-align: middle;

     position: absolute;

 }

 .gameover p {

      font-family: Arial;

      font-size: 50px;

      color: white;

      margin: 50px auto;

      margin-top: 150px;

  }

  .gameover span {

      font-family: Arial;

      font-size: 50px;

      color: white;

      margin: 50px auto;

  }

   .restartGame {

       display: block;

       margin: 20px auto;

       width: 180px;

       padding: 10px 10px;

       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小游戏并没有什么大的区别

　　代码：

 function init(){

     timerRan = 0.000;

     keyDown = true;

     for(var i=0;i<4;i++){

         board[i] = [];

         for(var j=0;j<3;j++){

             board[i][j] = [];

             var grid = $('#grid-'+ i +'-'+ j);

             grid.css({

                 'top':getPosTop(i,j),

                 'left':getPosLeft(i,j)

             });

             $('#container').append('<div class="block" id="block-'+ i +'-'+ j +'"></div>');

             var block = $('#block-'+ i +'-'+ j);

             block.css({

                 'top':getPosTop(i,j),

                 'left':getPosLeft(i,j)

             });

             board[i][j] = 0;

         }

     }

 function getPosTop(i,j){

     return i*100;

 }

 function getPosLeft(i,j){

     return j*100;

 }

▓▓▓▓▓▓ 初始化

　　游戏开始时，要在每一行随机的位置显示一个黑色的方块，并且在最下面的那一行的黑色方块上要有提示信息

　　代码：

     for(var i=0;i<4;i++){

         var randj = 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){

         case 74:

             if(board[3][0] == 1 && keyDown){

                 timeRan();

                 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(){

     $('#timer').text('0.000');

     $('#gameover').remove();

     $('.block').remove();

     init();

 }

▓▓▓▓▓▓ 总结

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