js编写推箱子游戏代码

推箱子（Sokoban）是一款经典的益智游戏，玩家需要通过移动箱子，将它们推到指定的目标位置。下面是一个简单的JavaScript实现推箱子游戏的示例代码。

基础概念

游戏地图：一个二维数组，表示游戏场景，包含墙壁、空地、玩家、箱子和目标位置。
玩家移动：玩家可以通过键盘方向键移动，推动箱子。
碰撞检测：检测玩家和箱子的碰撞，以及箱子是否被推到目标位置。

优势

简单易懂：游戏规则简单，适合各年龄段的玩家。
逻辑性强：需要玩家合理规划移动路径，锻炼逻辑思维能力。
可扩展性：可以设计多种关卡，增加游戏的趣味性和挑战性。

类型

经典推箱子：玩家推动一个或多个箱子到目标位置。
多玩家推箱子：多个玩家合作完成推箱子任务。
动态推箱子：地图中的元素会动态变化，增加难度。

应用场景

教育领域：用于培养学生的逻辑思维和问题解决能力。
休闲娱乐：作为小程序或网页游戏提供给用户消遣。
游戏开发：作为基础模块嵌入到更大的游戏项目中。

示例代码

以下是一个简单的推箱子游戏的JavaScript实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推箱子游戏</title>
    <style>
        .wall { background-color: #000; }
        .player { background-color: blue; }
        .box { background-color: red; }
        .target { background-color: green; }
        .empty { background-color: #fff; }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <script>
        const board = [
            [1, 1, 1, 1, 1],
            [1, 0, 0, 0, 1],
            [1, 0, 2, 3, 1],
            [1, 0, 0, 0, 1],
            [1, 1, 1, 1, 1]
        ];
        const playerPos = { x: 2, y: 2 };
        const boxPos = { x: 3, y: 2 };
        const targetPos = { x: 3, y: 3 };

        function renderBoard() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';
            board.forEach((row, y) => {
                row.forEach((cell, x) => {
                    const div = document.createElement('div');
                    div.style.width = '50px';
                    div.style.height = '50px';
                    div.style.display = 'inline-block';
                    div.style.border = '1px solid #ccc';

                    if (cell === 1) {
                        div.className = 'wall';
                    } else if (x === playerPos.x && y === playerPos.y) {
                        div.className = 'player';
                    } else if (x === boxPos.x && y === boxPos.y) {
                        div.className = 'box';
                    } else if (x === targetPos.x && y === targetPos.y) {
                        div.className = 'target';
                    } else {
                        div.className = 'empty';
                    }
                    gameBoard.appendChild(div);
                });
            });
        }

        document.addEventListener('keydown', (e) => {
            let newX = playerPos.x;
            let newY = playerPos.y;

            switch (e.key) {
                case 'ArrowUp': newY--; break;
                case 'ArrowDown': newY++; break;
                case 'ArrowLeft': newX--; break;
                case 'ArrowRight': newX++; break;
            }

            if (board[newY][newX] !== 1) {
                if (newX === boxPos.x && newY === boxPos.y) {
                    const newBoxX = newX + (newX - playerPos.x);
                    const newBoxY = newY + (newY - playerPos.y);
                    if (board[newBoxY][newBoxX] !== 1 && board[newBoxY][newBoxX] !== 3) {
                        boxPos.x = newBoxX;
                        boxPos.y = newBoxY;
                    }
                }
                playerPos.x = newX;
                playerPos.y = newY;
            }

            renderBoard();
        });

        renderBoard();
    </script>
</body>
</html>