<!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>
</
jQuery实现2048小游戏
最新推荐文章于 2023-06-06 18:29:33 发布