CSS小游戏2048—简单小游戏编程有手就行~会玩？你会写吗？

最新推荐文章于 2022-11-24 11:57:51 发布

编程-老鸟

最新推荐文章于 2022-11-24 11:57:51 发布

阅读量397

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/pc_372/article/details/114393109

版权

本文详细介绍了如何使用HTML、CSS和JavaScript简单实现2048小游戏。通过三步走策略，首先构建HTML游戏框架，接着应用CSS赋予样式，最后编写JS实现游戏逻辑。完成后的2048游戏效果显著。

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

简单实现2048小游戏

想实现2048游戏书写代码时可以分为三个步骤

一、HTML部分

先书写HTML把游戏结构搭建出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<!--最外部的大框-->
<div class="outermost"> //包裹游戏全局的大盒子
    <!--title-->
    <span class="top"><b>SCORE:<span id="score01"></span></b></span>//顶部实时显示的游戏分数
    <!--游戏大框框-->
    <div class="big">//2048游戏为四行四列因此需要16个div盒子
        <div class="cell" id="c00"></div>
        <div class="cell" id="c01"></div>
        <div class="cell" id="c02"></div>
        <div class="cell" id="c03"></div>

        <div class="cell" id="c10"></div>
        <div class="cell" id="c11"></div>
        <div class="cell" id="c12"></div>
        <div class="cell" id="c13"></div>

        <div class="cell" id="c20"></div>
        <div class="cell" id="c21"></div>
        <div class="cell" id="c22"></div>
        <div class="cell" id="c23"></div>

        <div class="cell" id="c30"></div>
        <div class="cell" id="c31"></div>
        <div class="cell" id="c32"></div>
        <div class="cell" id="c33"></div>
    //游戏结束时会弹出的提示框
    </div>
    <!--提示框-->
    <div class="tips" id="gameover">
       <p>GAME OVER!!! <br>
           SCORE: <span id="score02">0</span><br>
           <button class="startbtn">重新开始</button>
       </p>
    </div>
    <!--重玩一遍-->
    <div class="foot">
        <button class="replay"><a>重玩一遍</a></button>
    </div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
复制代码