html写一个2048小游戏

以下是一个基本的HTML代码，实现了一个简单的2048小游戏：
<!DOCTYPE html>
<html>
<head>
    <title>2048 Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        .container {
            display: inline-block;
            margin-top: 50px;
        }

        .cell {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            border: 1px solid #999;
            font-size: 30px;
            line-height: 100px;
            text-align: center;
            float: left;
            margin: 5px;
        }

        .clear {
            clear: both;
        }

        .score {
            font-size: 24px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>2048 Game</h1>

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

    <div class="score">Score: 0</div>

    <script>
        // 初始化游戏
        let cells = document.getElementsByClassName("cell");
        let scoreDisplay = document.getElementsByClassName("score")[0];
        let score = 0;
        let grid = [];

        for (let i = 0; i < 4; i++) {
            let row = [];
            for (let j = 0; j < 4; j++) {
                row.push(0);
            }
            grid.push(row);
        }

        // 随机生成一个方块
        function generateRandomBlock() {
            let emptyCells = [];
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    if (grid[i][j] === 0) {
                        emptyCells.push({ row: i, col: j });
                    }
                }
            }

            if (emptyCells.length > 0) {
                let randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
                let value = Math.random() < 0.9 ? 2 : 4;
                grid[randomCell.row][randomCell.col] = value;
                updateGrid();
            }
        }

        // 更新方格显示
        function updateGrid() {
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 4; j++) {
                    let cell = cells[i * 4 + j];
                    cell.innerHTML = grid[i][j] === 0 ? "" : grid[i][j];
                    cell.style.backgroundColor = getBackgroundColor(grid[i][j]);
                    cell.style.color = getTextColor(grid[i][j]);
                }
            }

            scoreDisplay.innerHTML = "Score: " + score;
        }

        // 根据方块值获取背景颜色
        function getBackgroundColor(value) {
            switch (value) {
                case 2: return "#eee4da";
                case 4: return "#ede0c8";
                case 8: return "#f2b179";
                case 16: return "#f59563";
                case 32: return "#f67c5f";
                case 64: return "#f65e3b";
                case 128: return "#edcf72";
                case 256: return "#edcc61";
                case 512: return "#9c0";
                case 1024: return "#33b5e5";
                case 2048: return "#09c";
                default: return "#ccc";
            }
        }

        // 根据方块值获取文字颜色
        function getTextColor(value) {
            if (value <= 4) {
                return "#776e65";
            }
            return "#f9f6f2";
        }

        // 启动游戏
        function startGame() {
            generateRandomBlock();
        }

        // 监听键盘事件
        document.addEventListener("keydown", function (event) {
            switch (event.keyCode) {
                case 37: // Left
                    moveLeft();
                    combineCells();
                    moveLeft();
                    break;
                case 38: // Up
                    moveUp();
                    combineCells();
                    moveUp();
                    break;
                case 39: // Right
                    moveRight();
                    combineCells();
                    moveRight();
                    break;
                case 40: // Down
                    moveDown();
                    combineCells();
                    moveDown();
                    break;
            }

            generateRandomBlock();
        });

        // 移动方块向左
        function moveLeft() {
            for (let i = 0; i < 4; i++) {
                for (let j = 1; j < 4; j++) {
                    if (grid[i][j] !== 0) {
                        let k = j;
                        while (k > 0 && grid[i][k - 1] === 0) {
                            grid[i][k - 1] = grid[i][k];
                            grid[i][k] = 0;
                            k--;
                        }
                    }
                }
            }
        }

        // 移动方块向上
        function moveUp() {
            for (let j = 0; j < 4; j++) {
                for (let i = 1; i < 4; i++) {
                    if (grid[i][j] !== 0) {
                        let k = i;
                        while (k > 0 && grid[k - 1][j] === 0) {
                            grid[k - 1][j] = grid[k][j];
                            grid[k][j] = 0;
                            k--;
                        }
                    }
                }
            }
        }

        // 移动方块向右
        function moveRight() {
            for (let i = 0; i < 4; i++) {
                for (let j = 2; j >= 0; j--) {
                    if (grid[i][j] !== 0) {
                        let k = j;
                        while (k < 3 && grid[i][k + 1] === 0) {
                            grid[i][k + 1] = grid[i][k];
                            grid[i][k] = 0;
                            k++;
                        }
                    }
                }
            }
        }

        // 移动方块向下
        function moveDown() {
            for (let j = 0; j < 4; j++) {
                for (let i = 2; i >= 0; i--) {
                    if (grid[i][j] !== 0) {
                        let k = i;
                        while (k < 3 && grid[k + 1][j] === 0) {
                            grid[k + 1][j] = grid[k][j];
                            grid[k][j] = 0;
                            k++;
                        }
                    }
                }
            }
        }

        // 合并相同值的方块
        function combineCells() {
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 3; j++) {
                    if (grid[i][j] !== 0 && grid[i][j] === grid[i][j + 1]) {
                        grid[i][j] *= 2;
                        grid[i][j + 1] = 0;
                        score += grid[i][j];
                    }
                }
            }
        }

        // 启动游戏
        startGame();
    </script>
</body>
</html>
在浏览器中打开以上代码即可开始玩2048小游戏。