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