这是学完javascript基础,编写的入门级web小游戏

游戏规则:在玩法规则也非常的简单,一开始方格内会出现2或者4等这两个小数字,玩家只需要上下左右其中一个方向来移动出现的数字,所有的数字就会想滑动的方向靠拢,而滑出的空白方块就会随机出现一个数字,相同的数字相撞时会叠加靠拢,然后一直这样,不断的叠加最终拼凑出2048这个数字就算成功。但是我们的程序没有终点。

一、HTML部分

 

 1 <body>
 2     <!-- 分数行 -->
 3   <p id="scorePanel">Score:<span id="score"></span></p>
 4   <div id="gridPanel">
 5     <!-- 背景格 -->
 6     <div id="g00" class="grid"></div>
 7     <div id="g01" class="grid"></div>
 8     <div id="g02" class="grid"></div>
 9     <div id="g03" class="grid"></div>
10     
11     <div id="g10" class="grid"></div>
12     <div id="g11" class="grid"></div>
13     <div id="g12" class="grid"></div>
14     <div id="g13" class="grid"></div>
15     
16     <div id="g20" class="grid"></div>
17     <div id="g21" class="grid"></div>
18     <div id="g22" class="grid"></div>
19     <div id="g23" class="grid"></div>
20     
21     <div id="g30" class="grid"></div>
22     <div id="g31" class="grid"></div>
23     <div id="g32" class="grid"></div>
24     <div id="g33" class="grid"></div>
25 
26     <!-- 前景格 -->
27     <div id="c00" class="cell"></div>
28     <div id="c01" class="cell"></div>
29     <div id="c02" class="cell"></div>
30     <div id="c03" class="cell"></div>
31     
32     <div id="c10" class="cell"></div>
33     <div id="c11" class="cell"></div>
34     <div id="c12" class="cell"></div>
35     <div id="c13" class="cell"></div>
36     
37     <div id="c20" class="cell"></div>
38     <div id="c21" class="cell"></div>
39     <div id="c22" class="cell"></div>
40     <div id="c23" class="cell"></div>
41     
42     <div id="c30" class="cell"></div>
43     <div id="c31" class="cell"></div>
44     <div id="c32" class="cell"></div>
45     <div id="c33" class="cell"></div>
46 
47   </div>
48   <!-- 结束容器 -->
49   <div id="gameOver">
50     <!-- 半透明灰色背景 -->
51     <div>
52     </div>
53     <!--居中小窗口-->
54     <p>Game Over!<br />Score:<span id="finalScore"></span><br/><a class="button" onclick="game.start()">Try again!</a></p>    
55   </div>
56  </body>
View Code

相关文章: