jQuery实现2048小游戏

最新推荐文章于 2023-05-23 11:59:05 发布

layroy

最新推荐文章于 2023-05-23 11:59:05 发布

阅读量330

点赞数 1

分类专栏： jQuery 文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_57202083/article/details/119878062

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页版2048游戏</title>
    <style>
      /* 游戏棋盘格 */
      body{font-family:Arial;text-align:center;}
      .game{margin:0 auto;/*margin-top:40px;*/text-align:center;display:inline-block;}
      .game-score{font-size:20px;margin:20px auto;}
      .game-container{background-color:#bbada0;border-radius:10px;position:relative;}
      .game-cell{border-radius:6px;background-color:#ccc0b3;position:absolute;}
      .game-num{width:0px;height:0px;border-radius:6px;font-weight:bold;font-size:40px;color:#fff;text-align:center;position:absolute;}
      .game-num-2{background:#eee4da;color:#776e65;}
      .game-num-4{background:#ede0c8;color:#776e65;}
      .game-num-8{background:#f2b179;}
      .game-num-16{background:#f59563;}
      .game-num-32{background:#f67c5f;}
      .game-num-64{background:#f65e3b;}
      .game-num-128{background:#edcf72;font-size:35px;}
      .game-num-256{background:#edcc61;font-size:35px;}
      .game-num-512{background:#9c0;font-size:35px;}
      .game-num-1024{background:#33b5e5;font-size:30px;}
      .game-num-2048{background:#09c;font-size:30px;}
      /*游戏结束*/
      .game-over{width:100%;height:100%;position:absolute;border-radius:10px;box-sizing:border-box;z-index:1;display:table;background:rgba(123,102,85,0.5)}
      .game-over-info{display:table-cell;vertical-align:middle}
      .game-over p{font-size:45px;color:#fff;margin:20px auto;}
      .game-over span{cursor:pointer;background-color:rgba(103,82,65,0.6);display:block;margin:20px auto;width:180px;padding:10px 10px;font-size:25px;color:#f7f2e5;border-radius:10px;border:1px solid #978271;transition:all .2s}
      .game-over span:hover{background-color:rgba(103,82,65,0.7);color:#fff}
      .game-hide{display:none;}
    </style>
  </head>
  <body>
    <div id="game" class="game">
      <div class="game-score">分数：<span id="game_score">0</span></div>
      <div id="game_container" class="game-container">
        <div id="game_over" class="game-over game-hide">
          <div class="game-over-info">
            <div id="game_over_info"></div>
            <span id="game_restart">重新开始</span>
          </div>
        </div>
      </div>
    </div>
    <!--引入jquery：轻量级的JS库-->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/Game2048.js"></script>
    <script>
      Game2048({prefix: 'game', len: 4, size: 100, margin: 20});
    </script>
  </body>
</html>

最低0.47元/天解锁文章

layroy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery实现2048小游戏

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>网页版2048游戏</title> <style> /* 游戏棋盘格 */ body{font-family:Arial;text-align:center;} .game{margin:0 auto;/*margin-top:40px;*/.
复制链接

扫一扫