▓▓▓▓▓▓ 大致介绍
终于结束了考试，放假回家了。这次的别踩白块儿网页版要比之前做的 jQuery实践-网页版2048小游戏 要简单一点，基本的思路都差不多。
预览：别踩白块网页版
这篇博客并不是详细的讲解，只是大致介绍函数的作用，其中实现的细节注释中有解释，网上的这个源码有点乱，如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)
▓▓▓▓▓▓ 思路
这个小游戏可以抽象化分为3层
◆最底下的一层是基本的样式（可见的）
◆中间的层是最主要的，是一个4x3的二维数组，游戏中我们都是对这个二维数组进行操作（不可见的）
◆最上面的一层也是一个4x3的二维数组，是用户能最终看见的
我们通过最底下的一层显示最基本的12个小方格，不同的颜色，每个格子对应的中间的层有不同的值，最上面的一层负责显示样式
▓▓▓▓▓▓ 基本结构与样式
基本的结构和样式都挺简单，直接看代码
结构：
1 <body> 2 <div id="header"> 3 <h1>别踩白块儿</h1> 4 <div id="timer" >0.0000</div> 5 </div> 6 <div id="container"> 7 <div class="grid" id="grid-0-0"></div> 8 <div class="grid" id="grid-0-1"></div> 9 <div class="grid" id="grid-0-2"></div> 10 <div class="grid" id="grid-1-0"></div> 11 <div class="grid" id="grid-1-1"></div> 12 <div class="grid" id="grid-1-2"></div> 13 <div class="grid" id="grid-2-0"></div> 14 <div class="grid" id="grid-2-1"></div> 15 <div class="grid" id="grid-2-2"></div> 16 <div class="grid" id="grid-3-0"></div> 17 <div class="grid" id="grid-3-1"></div> 18 <div class="grid" id="grid-3-2"></div> 19 </div> 20 </body>
样式：
1 body{ 2 background-color: #008694; 3 font: 12px/20px "黑体" ,arial; 4 } 5 #header { 6 display: block; 7 margin: 0 auto; 8 width: 500px; 9 text-align: center; 10 } 11 12 #header h1 { 13 font-family: Arial; 14 font-size: 40px; 15 font-weight: bold; 16 } 17 #timer { 18 z-index: 4; 19 font-size: 24px; 20 color: #fa3c3c; 21 font-weight: 700; 22 text-shadow: 2px 2px 3px rgba(0, 0, 0, .3) 23 } 24 #container{ 25 width: 302px; 26 height: 402px; 27 28 margin: 50px auto; 29 background-color: #55d769; 30 31 border: 5px solid #000; 32 position: relative; 33 } 34 .grid { 35 width: 100px; 36 height: 100px; 37 background-color: #fff; 38 39 border: 1px solid #000; 40 position: absolute; 41 } 42 .block { 43 width: 100px; 44 height: 100px; 45 border: 1px solid #000; 46 font-family: Arial; 47 font-weight: bold; 48 font-size: 20px; 49 color: #fff; 50 text-align: center; 51 position: absolute; 52 } 53 .coBlock{ 54 55 background-color: #000; 56 } 57 .gameover { 58 display: block; 59 margin: 0 auto; 60 width: 300px; 61 text-align: center; 62 vertical-align: middle; 63 64 position: absolute; 65 } 66 67 .gameover p { 68 font-family: Arial; 69 font-size: 50px; 70 color: white; 71 margin: 50px auto; 72 73 margin-top: 150px; 74 } 75 76 .gameover span { 77 font-family: Arial; 78 font-size: 50px; 79 color: white; 80 margin: 50px auto; 81 } 82 83 .restartGame { 84 display: block; 85 margin: 20px auto; 86 87 width: 180px; 88 padding: 10px 10px; 89 background-color: #8f7a66; 90 91 font-family: Arial; 92 font-size: 30px; 93 color: white; 94 95 border-radius: 10px; 96 97 text-decoration: none; 98 } 99 100 .restartGame:hover { 101 background-color: #9f8b77; 102 }
这里并没有设置每个格子的位置，位置由js代码来设置，以及第二层的二维数组、第三层的显示层都由js来设置，这里和 jQuery实践-网页版2048小游戏 并没有什么大的区别
代码：
1 function init(){ 2 timerRan = 0.000; 3 4 keyDown = true; 5 6 for(var i=0;i<4;i++){ 7 board[i] = []; 8 for(var j=0;j<3;j++){ 9 10 board[i][j] = []; 11 12 var grid = $('#grid-'+ i +'-'+ j); 13 grid.css({ 14 'top':getPosTop(i,j), 15 'left':getPosLeft(i,j) 16 }); 17 18 $('#container').append('<div class="block" id="block-'+ i +'-'+ j +'"></div>'); 19 var block = $('#block-'+ i +'-'+ j); 20 block.css({ 21 'top':getPosTop(i,j), 22 'left':getPosLeft(i,j) 23 }); 24 25 board[i][j] = 0; 26 } 27 }
1 function getPosTop(i,j){ 2 return i*100; 3 } 4 5 function getPosLeft(i,j){ 6 return j*100; 7 }
▓▓▓▓▓▓ 初始化
游戏开始时，要在每一行随机的位置显示一个黑色的方块，并且在最下面的那一行的黑色方块上要有提示信息
代码：
1 for(var i=0;i<4;i++){ 2 3 var randj = parseInt(Math.floor(Math.random() * 3)); 4 5 if(i >0 && board[i-1][randj] == 1){ 6 randj = parseInt(Math.floor(Math.random() * 3)); 7 } 8 9 $('#block-'+ i +'-'+ randj).addClass('coBlock'); 10 11 board[i][randj] = 1; 12 } 13 14 $('#block-3-0').text('按J开始游戏'); 15 $('#block-3-1').text('按K开始游戏'); 16 $('#block-3-2').text('按L开始游戏');
▓▓▓▓▓▓ 基本操作
我们通过switch循环，来根据用户不同的输入进行不同的操作
代码：
1 $(document).keydown(function(event) { 2 switch(event.keyCode){ 3 case 74: 4 if(board[3][0] == 1 && keyDown){ 5 timeRan(); 6 clearText(); 7 moveDown(); 8 }else{ 9 isgameover(); 10 } 11 break; 12 case 75: 13 if(board[3][1] == 1 && keyDown){ 14 timeRan(); 15 clearText(); 16 moveDown(); 17 }else{ 18 isgameover(); 19 } 20 break; 21 case 76: 22 if(board[3][2] == 1 && keyDown){ 23 timeRan(); 24 clearText(); 25 moveDown(); 26 }else{ 27 isgameover(); 28 } 29 break; 30 31 } 32 });
在这里设置 keyDown 这个全局变量的目的是为了防止用户在游戏结束时，继续按键。
timeRan()这个函数是显示游戏时间的
代码：
1 function timeRan(){ 2 clearTimeout(timer); 3 timerRan += 0.001; 4 $('#timer').text(timerRan.toString().slice(0,5)); 5 timer = setTimeout(function(){ 6 timeRan(); 7 },1); 8 }
clearText()这个函数是在游戏开始后，将最下面一行的提示信息去掉
代码：
1 function clearText(){ 2 $("#block-3-0").text(""); 3 $("#block-3-1").text(""); 4 $("#block-3-2").text(""); 5 }
moveDown()这个函数是方块移动的最主要函数，因为方块要向下移动，所以我们要从最下面开始遍历二维数组，如果该格子是黑色的并且是最下面一行的，就只是简单的把该格子的颜色变回白色，如果该格子是黑色的并且是第一行至第三行的，这个格子变为白色，并且它的正下方的一个格子变为黑色，最后，在第一行的随机位置上显示一个黑色的格子
代码：
1 function moveDown(){ 2 for(var i=3;i>=0;i--){ 3 for(var j=2;j>=0;j--){ 4 if(board[i][j] == 1){ 5 if(i == 3){ 6 $('#block-'+ i +'-'+ j).removeClass('coBlock'); 7 board[i][j] = 0; 8 }else{ 9 $('#block-'+ i +'-'+ j).removeClass('coBlock'); 10 board[i][j] = 0; 11 12 $('#block-'+ (i+1) +'-'+ j).addClass('coBlock'); 13 board[i+1][j] = 1; 14 15 } 16 } 17 } 18 } 19 20 var randj = parseInt(Math.floor(Math.random() * 3)); 21 $('#block-0-'+ randj).addClass('coBlock'); 22 board[0][randj] = 1; 23 }
isgameover()是显示游戏结束样式的函数，比较简单
代码：
1 function isgameover(){ 2 keyDown = false; 3 clearTimeout(timer); 4 $('#container').append('<div id="gameover" class="gameover"><p>本次用时</p><span>'+ timerRan.toString().slice(0,5) +'</span><a href="javascript:restartGame()" class="restartGame">重新开始</a></div>'); 5 var gameover = $("#gameover"); 6 gameover.css("width", "300px"); 7 gameover.css("height", "400px"); 8 gameover.css("background-color", "rgba(0, 0, 0, 0.5)"); 9 }
1 function restartGame(){ 2 $('#timer').text('0.000'); 3 $('#gameover').remove(); 4 $('.block').remove(); 5 init(); 6 7 }
▓▓▓▓▓▓ 总结
这个小游戏，如果学会了之前的 jQuery实践-网页版2048小游戏 ，就会觉得这个挺简单的，基本的思想和方法都大同小异，如果有任何的建议如果或者想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)