终于结束了考试，放假回家了。这次的别踩白块儿网页版要比之前做的 jQuery编写网页版2048小游戏 要简单一点，基本的思路都差不多。
这篇博客并不是详细的讲解，只是大致介绍函数的作用，其中实现的细节注释中有解释，网上的这个源码有点乱，如果想看比较整齐的源码或者视频的可以QQ联系我(免费)(找共同学习的伙伴)
思路
这个小游戏可以抽象化分为3层
◆最底下的一层是基本的样式（可见的）
◆中间的层是最主要的，是一个4x3的二维数组，游戏中我们都是对这个二维数组进行操作（不可见的）
◆最上面的一层也是一个4x3的二维数组，是用户能最终看见的
我们通过最底下的一层显示最基本的12个小方格，不同的颜色，每个格子对应的中间的层有不同的值，最上面的一层负责显示样式
基本结构与样式
基本的结构和样式都挺简单，直接看代码
结构：
<body> <div> <h1>别踩白块儿</h1> <div >0.0000</div> </div> <div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></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: 4; font-size: 24px; color: #fa3c3c; font-weight: 700; 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></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(""); }