2048小游戏html+css代码

最新推荐文章于 2024-06-05 15:19:23 发布

我叫郭文达达达

最新推荐文章于 2024-06-05 15:19:23 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/weixin_48299146/article/details/107488965

版权

废话不多说直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="2048.css">
</head>
<body>
    <p>
        SCORE:<span>0</span>
    </p>
    <div class="all">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="gameover">
        <p>
            GAME OVER!!!<br>
            SCORE:<span>0</span><br>
            <a href="">try again</a>
        </p>
    </div>
    <script src="2048.js"></script>
</body>
</html>

以下是css部分的代码

*{
    margin: 0;
    padding: 0;
}
p{
    font-size: 40px;
    font-weight: bold;
    width: 500px;
    margin: auto;
    padding: 40px 0;
}
.all{
    width: 500px;
    height: 500px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: auto;
    background: #bbada0;
    padding-top: 20px;
    border-radius: 10px;
}
.all div{
    width: 105px;
    height: 105px;
    font-size: 40px;
    font-weight: bold;
    
    border-radius: 5px;
    background: #ccc0b3;;
}
.gameover{
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0,.3);
    text-align: center;
    line-height: 100px;
    position: absolute;
    top: 0;
}
.gameover p{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -250px;
    background: #fff;
    border-radius: 20px;
}
.gameover a{
    text-decoration: none;
    background: #9f8d77;
    padding: 15px;
    color: #fff;
}
.n2{background-color:#eee3da!important;color:#776e65!important;}
.n4{background-color:#ede0c8!important;color:#776e65!important}
.n8{background-color:#f2b179!important}
.n16{background-color:#f59563!important}
.n32{background-color:#f67c5f!important}
.n64{background-color:#f65e3b!important}
.n128{background-color:#edcf72!important}
.n256{background-color:#edcc61!important}
.n512{background-color:#9c0!important}
.n1024{background-color:#33b5e5!important;font-size:40px!important}
.n2048{background-color:#09c!important;font-size:40px!important}
.n4096{background-color:#a6c!important;font-size:40px!important}
.n8192{background-color:#93c!important;font-size:40px!important}

我叫郭文达达达

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
2048小游戏html+css代码

废话不多说直接上代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" hr
复制链接

扫一扫