▓▓▓▓▓▓ 大致介绍

  终于结束了考试,放假回家了。这次的别踩白块儿网页版要比之前做的 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>
View Code

相关文章: