这是学完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>