html5之小游戏2048的实现

最新推荐文章于 2024-08-18 09:56:07 发布

Hcy-

最新推荐文章于 2024-08-18 09:56:07 发布

阅读量2.9k

点赞数 11

分类专栏： html5 文章标签： html5 游戏技术前端

本文链接：https://blog.csdn.net/Gr0Ve/article/details/51283149

版权

本文分享了如何使用HTML5实现经典小游戏2048，通过2048.css和2048.js的代码实现过程，适合前端初学者学习，一起探讨游戏开发的技术细节。

摘要由CSDN通过智能技术生成

一直以来对h5游戏这一块很感兴趣，但苦于现在技术渣渣，也没有合适的项目可以给我练练手，机缘巧合之下看到了2048这款游戏，作为风靡一时的小游戏，当初也是觉得这个很有意思。今天就分享一下如何实现2048这个游戏。

话不多说，直接上代码：

<!DOCTYPE html>
<html>
 <head>
  <title>2048</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="2048.css"/>
  <script src="2048.js"></script>
 </head>
 <body>
  <p>Score:<span id="score"></span></p>
  <div id="gridPanel">
  </div>
  <!--GameOver界面-->
  <div id="gameover">
    <div><!--灰色半透明背景--></div>
    <p><!--前景提示框-->
        Game Over!<br>
        Score:<span id="finalScore"></span><br>
        <a class="btn" id="restart" onclick="game.start()">Try again!</a>
    </p>
  </div>
 </body>
</html>

2048.css

#gridPanel{
    width:480px; height:480px;
    margin:0 auto;
    background-color:#bbada0;
    border-radius:10px;
    position:relative;
}
.grid,.cell{
    width:100px; height:100px;
    border-radius:6px;
}
.grid{
    background-color:#ccc0b3;
    float:left;
    margin: 16px 0 0 16px;
}
.cell{
    position:absolute;
    text-align:center;
    line-height:100px;
    font-size:60px;
    color:#fff;
}
/*同一行拥有统一的top*/
#c00,#c01,#c02,#c03,#c04,#c05{
   top:16px}
#c10,#c11,#c12,#c13,#c14,#c15{
   top:132px}
#c20,#c21,#c22,#c23,#c24,#c25{
   top:248px}
#c30,#c31,#c32,#c33,#c34,#c35{
   top:364px}
#c40,#c41,#c42,#c43,#c44,#c45{
   top:480px}
#c50,#c51,#c52,#c53,#c54,#c55{
   top:596px}
/*同一列拥有统一的left*/
#c00,#c10,#c20,#c30,#c40,#c50{
   left:16px}
#c01,#c11,#c21,#c31,#c41,#c51{
   left:132px}
#c02,#c12,#c22,#c32,#c42,#c52{
   left:248px}
#c03,#c13,#c23,#c33,