当前位置：首页 > news >正文

《可爱风格 2048 游戏项目：HTML 实现全解析》

news 来源：原创 2025/5/25 5:26:55

一、引言

在如今的数字化时代，小游戏以其简单易上手、趣味性强的特点深受大家喜爱。2048 游戏作为一款经典的数字合并游戏，拥有庞大的玩家群体。本文将详细介绍一个用单文件 HTML 实现的可爱风格 2048 游戏项目，它不仅具备传统 2048 游戏的基本功能，还在界面设计和视觉效果上进行了优化，让玩家在游戏过程中感受到可爱与乐趣。

二、项目概述

这个 2048 游戏项目采用单文件 HTML 编写，融合了 HTML、CSS 和 JavaScript 三种技术。界面设计采用响应式布局，确保在不同设备上都能完美展示。游戏中使用了一系列可爱的图片替代传统的数字，为游戏增添了更多的趣味性。主要模块包括标题、最高分 / 得分显示、游戏卡片区域以及游戏规则说明。

三、功能实现

3.1 界面设计

3.1.1 整体布局

使用 HTML 和 CSS 构建了游戏的整体布局。通过 flexbox 和 grid 布局实现了响应式设计，使得游戏界面在不同尺寸的屏幕上都能自适应。页面背景颜色设置为 #faf8ef，营造出温馨可爱的氛围。

html

<body>
    <div id="header">
        <h1>可爱 2048 游戏</h1>
        <div id="score-board">
            <div id="score">得分: 0</div>
            <div id="high-score">最高分: 0</div>
        </div>
    </div>
    <div id="game-board"></div>
    <div id="game-rules">
        <p>游戏规则：使用键盘方向键（上、下、左、右）控制卡片移动，相同的卡片会合并成一个数值更大的卡片，目标是合并出数值为 2048 的卡片。</p>
    </div>
    <div id="win-modal">
        <div id="win-modal-content">
            <p>恭喜你已经合并了一只宇宙无敌最可爱的猫咪</p>
            <button onclick="closeWinModal()">确认</button>
        </div>
    </div>
</body>

3.1.2 样式设计

标题文字颜色和游戏规则的颜色都设置为 #776e65，游戏规则的字号为 14px，使界面看起来更加协调。标题与最高分、得分排在一行，标题左对齐，高分、得分右对齐，增强了界面的美观性。

css

body {
    background-color: #faf8ef;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 500px;
    color: #776e65;
}

h1 {
    margin: 0;
}

#score-board {
    display: flex;
    gap: 10px;
}

#score,
#high-score {
    background-color: #bbada0;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
}

#game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 10px;
    background-color: #bbada0;
    padding: 10px;
    border-radius: 5px;
    width: 90%;
    max-width: 500px;
    margin: 20px 0;
}

.cell {
    background-color: rgba(238, 228, 218, 0.35);
    border-radius: 5px;
    aspect-ratio: 1/1;
}

.tile {
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 5px;
}

#game-rules {
    text-align: left;
    color: #776e65;
    width: 90%;
    max-width: 500px;
    font-size: 14px;
}

#win-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
}

#win-modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

3.2 游戏逻辑

3.2.1 图片映射

使用 JavaScript 定义了图片与数字的映射关系，将图片链接存储在 images 对象中，以便在游戏中根据数字显示相应的图片。

javascript

const images = {
    2: 'https://p9-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_generation/df099f209335f8b25e1d4ab9ce2867ff_1741677321668230149.png~tplv-a9rns2rl98-image.png?rk3s=25bff839&x-expires=1773213321&x-signature=reNM%2F907NNX7Rc%2BE4FflYbWaRKo%3D',
    4: 'https://p9-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_generation/322b9826909d14458d22e0931fd06aac_1741677330491084517.png~tplv-a9rns2rl98-image.png?rk3s=25bff839&x-expires=1773213330&x-signature=a1ptVuhTOwjrpRZSdnL%2FUKYV9MY%3D',
    8: 'https://p3-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_generation/1a563d103b7496a5b9eb365ff9ea58bd_1741677409407029394.png~tplv-a9rns2rl98-image.png?rk3s=25bff839&x-expires=1773213409&x-signature=L0drmZ0N1Z2%2BjUD9g9gcP0Nn7TM%3D',
    // 其他数字对应的图片链接...
};

3.2.2 棋盘初始化

初始化棋盘数组 board，并调用 addRandomTile() 函数在棋盘上随机生成两个初始卡片。

javascript

let board = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
];

addRandomTile();
addRandomTile();
createBoard();

3.2.3 卡片移动和合并

实现了 moveLeft()、moveRight()、moveUp() 和 moveDown() 四个函数，用于处理键盘方向键事件，控制卡片的移动和合并。在移动过程中，调用 mergeTiles() 函数合并相邻且数值相同的卡片。

javascript

function moveLeft() {
    let moved = false;
    for (let i = 0; i < 4; i++) {
        const oldRow = [...board[i]];
        board[i] = mergeTiles(board[i]);
        if (oldRow.join(',')!== board[i].join(',')) {
            moved = true;
        }
    }
    if (moved) {
        addRandomTile();
    }
    updateScore();
    createBoard();
}

function mergeTiles(row) {
    let newRow = row.filter(tile => tile!== 0);
    for (let i = 0; i < newRow.length - 1; i++) {
        if (newRow[i] === newRow[i + 1]) {
            newRow[i] *= 2;
            score += newRow[i];
            if (newRow[i] === 2048) {
                showWinModal();
            }
            newRow[i + 1] = 0;
        }
    }
    newRow = newRow.filter(tile => tile!== 0);
    while (newRow.length < 4) {
        newRow.push(0);
    }
    return newRow;
}

3.2.4 得分和胜利提示

使用 score 变量记录当前得分，highScore 变量记录最高分，并将最高分存储在浏览器的本地存储中。当合并出 2048 时，调用 showWinModal() 函数显示胜利提示模态框。

javascript

function showWinModal() {
    winModal.style.display = 'flex';
}

function closeWinModal() {
    winModal.style.display = 'none';
}

function updateScore() {
    if (score > highScore) {
        highScore = score;
        highScoreElement.textContent = `最高分: ${highScore}`;
        localStorage.setItem('highScore', highScore);
    }
    scoreElement.textContent = `得分: ${score}`;
}

四、项目运行

将上述代码保存为一个 HTML 文件，然后在浏览器中打开该文件，即可开始玩这个可爱风格的 2048 游戏。使用键盘方向键（上、下、左、右）控制卡片移动，尝试合并出 2048，挑战自己的最高分。

五、总结

通过这个项目，我们学习了如何使用 HTML、CSS 和 JavaScript 实现一个简单而有趣的 2048 游戏。从界面设计到游戏逻辑的实现，每个步骤都展示了前端开发的基本技巧和方法。同时，项目中使用的响应式布局和图片替代数字的设计，也为游戏增添了更多的趣味性和吸引力。希望这个项目能为你带来启发，让你在前端开发的道路上不断探索和进步。

以上就是关于这个可爱风格 2048 游戏项目的详细介绍，你可以根据自己的需求对代码进行修改和扩展，开发出更加个性化的游戏。