web版2048实现

最新推荐文章于 2024-04-03 11:30:25 发布

Mrlonely思考笔记

最新推荐文章于 2024-04-03 11:30:25 发布

阅读量2.8k

点赞数 4

分类专栏：小游戏案例文章标签： js jQuery

本文链接：https://blog.csdn.net/zjhzjh893/article/details/82055815

版权

今天写一写2048小游戏的实现思路.先看效果图

2048效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2048</title>
</head>
<link rel="stylesheet" href="./css/2048.css">
<script src="./js/jquery-1.12.4.js"></script>
<script src="./js/main.js"></script>
<script src="./js/support.js"></script>
<script src="./js/animation2048.js"></script>
<body>
<div class="header">
    <h1>2048</h1>
    <a href="javascript:newGame()" id="newGameButton">新游戏</a>
    <p>score:<span id="score">0</span></p>
</div>


<div id="grid-container">
    <div class="grid-cell" id="grid-cell-0-0"></div>
    <div class="grid-cell" id="grid-cell-0-1"></div>
    <div class="grid-cell" id="grid-cell-0-2"></div>
    <div class="grid-cell" id="grid-cell-0-3"></div>


    <div class="grid-cell" id="grid-cell-1-0"></div>
    <div class="grid-cell" id="grid-cell-1-1"></div>
    <div class="grid-cell" id="grid-cell-1-2"></div>
    <div class="grid-cell" id="grid-cell-1-3"></div>


    <div class="grid-cell" id="grid-cell-2-0"></div>
    <div class="grid-cell" id="grid-cell-2-1"></div>
    <div class="grid-cell" id="grid-cell-2-2"></div>
    <div class="grid-cell" id="grid-cell-2-3"></div>


    <div class="grid-cell" id="grid-cell-3-0"></div>
    <div class="grid-cell" id="grid-cell-3-1"></div>
    <div class="grid-cell" id="grid-cell-3-2"></div>
    <div class="grid-cell" id="grid-cell-3-3"></div>
</div>
</body>
</html>

静态布局,我们先创建4*4个div,后面再用js控制他的位置.

/*2048.css部分*/
/*
    @aunthor: zengjiahao
    @date: 2018/08/18
*/

    /*{
        margin: 0;
        padding: 0;
    }*/
.header{
    margin: 0 auto;
    display: block;
    text-align: center;
    width: 500px;
    /*border: 1px solid black;*/
}


.header h1{
    font-family: Arial;
    font-weight: bold;
    font-size: 50px;
    margin:

最低0.47元/天解锁文章

Mrlonely思考笔记

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
web版2048实现

今天写一写2048小游戏的实现思路.先看效果图&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;2048&lt;/title&gt;&lt;/head&gt;&lt;lin
复制链接

扫一扫