用jquery写一个2048数字合并游戏

封面图 • 2025-10-16 • jQuery

下面是一个使用 **jQuery** 实现的简单 **2048 数字合并游戏** 的基本版本。这个版本包含以下功能：

- 4x4 的网格
- 使用方向键控制移动（上、下、左、右）
- 数字合并逻辑
- 随机生成新数字（2 或 4）
- 简单的胜利/失败判断

---

### ✅ HTML + jQuery 实现 2048 游戏代码

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2048 游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background: #faf8ef;
        }
        #game {
            display: grid;
            grid-template-columns: repeat(4, 100px);
            grid-gap: 10px;
            margin: 50px auto;
            width: 420px;
        }
        .cell {
            width: 100px;
            height: 100px;
            background: #ccc0b3;
            border-radius: 5px;
            line-height: 100px;
            font-size: 24px;
            color: #776e65;
            text-align: center;
        }
        .cell[data-value="2"] { background: #eee4da; color: #776e65; }
        .cell[data-value="4"] { background: #ede0c8; color: #776e65; }
        .cell[data-value="8"] { background: #f2b179; color: #f9f6f2; }
        .cell[data-value="16"] { background: #f59563; color: #f9f6f2; }
        .cell[data-value="32"] { background: #f67c5f; color: #f9f6f2; }
        .cell[data-value="64"] { background: #f65e3b; color: #f9f6f2; }
        .cell[data-value="128"] { background: #edcf72; color: #f9f6f2; }
        .cell[data-value="256"] { background: #edcc61; color: #f9f6f2; }
        .cell[data-value="512"] { background: #edc850; color: #f9f6f2; }
        .cell[data-value="1024"] { background: #edc53f; color: #f9f6f2; }
        .cell[data-value="2048"] { background: #edc22e; color: #f9f6f2; }
    </style>
</head>
<body>

function initBoard() {
        board = Array.from({ length: gridSize }, () => Array(gridSize).fill(0));
        addRandomTile();
        addRandomTile();
        renderBoard();
    }

function arraysEqual(a, b) {
        return a.length === b.length && a.every((val, index) => val === b[index]);
    }

$(document).keydown(function (e) {
        let moved = false;
        switch (e.key) {
            case 'ArrowLeft':
                moved = moveLeft();
                break;
            case 'ArrowRight':
                moved = moveRight();
                break;
            case 'ArrowUp':
                moved = moveUp();
                break;
            case 'ArrowDown':
                moved = moveDown();
                break;
        }
        if (moved) {
            addRandomTile();
            renderBoard();
            if (checkGameOver()) {
                alert("Game Over!");
            }
        }
    });

initBoard();
</script>

</body>
</html>
```

---

### 📌 功能说明

- **初始化**: 创建一个 4x4 的网格，随机放置两个 `2`。
- **移动逻辑**: 上下左右四个方向的移动，合并相同数字。
- **添加新数字**: 每次移动后，如果还有空位，就随机添加一个 `2` 或 `4`。
- **游戏结束**: 当没有可移动空间时，弹出“Game Over”提示。

---

### 🧠 可扩展性

你可以进一步扩展这个游戏：
- 添加分数系统
- 增加动画效果
- 加入“重新开始”按钮
- 使用本地存储保存最高分

---

如果你需要我帮你实现更高级的功能（如动画、得分统计等），欢迎继续提问！