键码经典游戏：快速实现可运行的 2048

掘金安东尼

发布于 2023-10-27 15:33:54

2030

发布于 2023-10-27 15:33:54

文章被收录于专栏：掘金安东尼

序言

欢迎来到“2048”的魔法阵 🔢

本篇带来简易版-2048 数字游戏的编程实践~

废话少说，直接开冲！！

先看码上掘金效果：

设计思路

首先，玩过 2048 的都知道：基础版本是一个 4x4 的网格，作为游戏的主界面；

然后关键是生成数字和移动，即：

1、游戏在开始时和每次数字移动后要随机在空白格子生成数字2或4

2、玩家可以通过上、下、左、右箭头键移动数字。相同的数字在移动过程中会合并

接着就是，每一轮操作后，游戏界面格子的数字要实时更新；

按照这个思路，设想一下：会有哪些函数方法？

那么，一些基础的应该有比如：

initializeGame(): 初始化游戏界面，生成4x4的网格；
handleInput(event): 处理用户的键盘输入，控制数字的移动方向；
slide(direction): 根据用户的输入移动和合并数字；
getColumn(col): 获取指定列的数字，辅助处理上下移动的逻辑；
addNumber(): 在空白的格子中随机生成数字2或4；
render(): 更新并渲染游戏界面，显示当前的数字分布；

代码实现

有了基本思路，直接开撸~

HTML 和 CSS 部分比较简单，JS 部分按照上述思路逐步细化：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2048 Game</title>
    <style>
        #game-container {
            display: grid;
            grid-template-columns: repeat(4, 100px);
            grid-template-rows: repeat(4, 100px);
            gap: 10px;
            margin: 50px auto;
        }

        .cell {
            width: 100px;
            height: 100px;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 32px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div id="game-container"></div>

    <script>
        const size = 4;
        let grid = Array(size).fill().map(() => Array(size).fill(''));

        function createCell(row, col) {
            const cell = document.createElement('div');
            cell.id = `cell-${row}-${col}`;
            cell.className = 'cell';
            return cell;
        }
        
        // 初始化4x4的网格
        function initializeGame() {
            const gameContainer = document.getElementById('game-container');
            for (let row = 0; row < size; row++) {
                for (let col = 0; col < size; col++) {
                    gameContainer.appendChild(createCell(row, col));
                }
            }
        }

        document.addEventListener('keydown', handleInput);

        // 处理用户的键盘输入
        function handleInput(event) {
            let gridChanged = false;
            switch (event.key) {
                case 'ArrowUp':
                    gridChanged = slide('up');
                    break;
                case 'ArrowDown':
                    gridChanged = slide('down');
                    break;
                case 'ArrowLeft':
                    gridChanged = slide('left');
                    break;
                case 'ArrowRight':
                    gridChanged = slide('right');
                    break;
            }
            // 如果网格发生了改变，添加新的数字并重新渲染界面
            if (gridChanged) {
                addNumber();
                render();
            }
        }

        // 根据用户的输入移动和合并数字
        function slide(direction) {
            const originalGrid = JSON.stringify(grid);
            for (let i = 0; i < size; i++) {
                let row = (direction === 'up' || direction === 'down') ? getColumn(i) : grid[i].slice();
                row = row.filter(cell => cell !== ''); // Remove empty cells
                if (direction === 'down' || direction === 'right') {
                    row.reverse();
                }

                for (let j = 1; j < row.length; j++) {
                    if (row[j - 1] === row[j]) {
                        row[j - 1] *= 2;
                        row[j] = '';
                    }
                }

                row = row.filter(cell => cell !== ''); // Remove merged cells

                while (size - row.length) {
                    row.push(''); // Fill the row with empty cells
                }

                if (direction === 'down' || direction === 'right') {
                    row.reverse();
                }

                if (direction === 'up' || direction === 'down') {
                    for (let j = 0; j < size; j++) {
                        grid[j][i] = row[j];
                    }
                } else {
                    grid[i] = row;
                }
            }

            return JSON.stringify(grid) !== originalGrid;
        }

        // 获取指定列的数字
        function getColumn(col) {
            const column = [];
            for (let i = 0; i < size; i++) {
                column.push(grid[i][col]);
            }
            return column;
        }

        // 在空白的格子中随机生成数字2或4
        function addNumber() {
            const availableCells = [];
            for (let i = 0; i < size; i++) {
                for (let j = 0; j < size; j++) {
                    if (!grid[i][j]) {
                        availableCells.push({ row: i, col: j });
                    }
                }
            }

            if (availableCells.length) {
                const { row, col } = availableCells[Math.floor(Math.random() * availableCells.length)];
                grid[row][col] = Math.random() < 0.9 ? 2 : 4;
            }
        }

        // 更新并渲染游戏界面
        function render() {
            grid.forEach((row, i) => {
                row.forEach((number, j) => {
                    const cell = document.getElementById(`cell-${i}-${j}`);
                    cell.textContent = number || '';
                });
            });
        }

        initializeGame();
        addNumber();
        addNumber();
        render();
    </script>

</body>

</html>

打完收工，整个代码思路比较清晰的~ 我们将代码分割成多个函数，使每个函数都有明确的职责，也可以提高代码的可读性和可维护性。