利用JavaScript实现网页版2048小游戏

时间:2022-11-19 海拥人气:0

项目基本结构

目录结构如下：

本节教程我会带大家使用 HTML 、CSS和 JS 来制作一个 2048网页版小游戏

本节示例将会实现如下所示的效果：

HTML源码

使用<header></header>添加头部2048标题

<header>
    <div class="container">
        <h1><span>2</span><span>0</span><span>4</span><span>8</span></h1>
        <p class="inspired">by <a href="https://blog.csdn.net/qq_44273429" rel="external nofollow"  target="_blank">海拥✘</a></p>
    </div>
</header>

效果：

添加一个 container 容器

<div class="container">
</div>

添加游戏的主体部分

<div class="directions">
        <p id="haiyong" class="haiyong"><strong>如何玩：</strong> 使用键盘方向键键移动数字方块。相邻的两个方块数字相同，它们可合并成一个！</p>
    </div>
    <div class="scores">
        <div class="score-container best-score">
            历史最佳:
            <div class="score">
                <div id="bestScore">0</div>
            </div>
        </div>
        <div class="score-container">
            分数:
            <div class="score">
                <div id="score">0</div>
                <div class="add" id="add"></div>
            </div>
        </div>
    </div>
    <div class="game">
        <div id="tile-container" class="tile-container"></div>
        <div class="end" id="end">游戏结束<div class="monkey">

加载全部内容