js推箱子游戏

基础概念：推箱子（Sokoban）是一款经典的益智类游戏，玩家需要将所有的箱子推到指定的目标位置。游戏中，玩家只能推动箱子而不能拉动，并且一次只能推动一个箱子。如果箱子被推到一个角落或者墙壁，它就不能再被移动了。

优势：

简单直观：游戏规则简单，易于上手。
锻炼思维：需要玩家规划路径和策略，有助于提高逻辑思维能力。
多样关卡：提供了丰富的关卡设计，适合不同水平的玩家挑战。

类型：

经典模式：按照传统规则进行游戏。
时间挑战模式：在规定时间内完成关卡。
无限模式：自定义地图和难度，创造属于自己的挑战。

应用场景：

休闲娱乐：适合在闲暇时放松心情。
教育工具：用于培养儿童的空间想象力和解决问题的能力。
算法研究：作为AI研究的测试平台，探索路径规划和搜索算法。

常见问题及解决方法：

箱子卡住无法移动：
- 原因：可能是由于箱子被推到了角落或墙壁，或者有其他箱子阻挡。
- 解决方法：检查箱子的周围环境，确保没有障碍物，并尝试从不同的方向推动箱子。

无法到达目标位置：
- 原因：可能是因为没有找到正确的路径或者策略。
- 解决方法：重新规划移动路线，尝试从不同的起点开始，或者使用回溯法逐步撤销之前的错误操作。

示例代码（JavaScript实现推箱子游戏的基本逻辑）：

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

const tileSize = 32;
const map = [
    [1, 1, 1, 1, 1],
    [1, 0, 0, 0, 1],
    [1, 0, 2, 1, 1],
    [1, 0, 1, 0, 1],
    [1, 1, 1, 1, 1]
];

let playerX = 2;
let playerY = 2;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (let y = 0; y < map.length; y++) {
        for (let x = 0; x < map[y].length; x++) {
            if (map[y][x] === 1) {
                ctx.fillStyle = 'black';
                ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
            } else if (map[y][x] === 2) {
                ctx.fillStyle = 'blue';
                ctx.fillRect(x * tileSize, y * tileSize, tileSize, tileSize);
            }
        }
    }
    ctx.fillStyle = 'red';
    ctx.fillRect(playerX * tileSize, playerY * tileSize, tileSize, tileSize);
}

document.addEventListener('keydown', (e) => {
    let newX = playerX;
    let newY = playerY;
    switch (e.key) {
        case 'ArrowUp': newY--; break;
        case 'ArrowDown': newY++; break;
        case 'ArrowLeft': newX--; break;
        case 'ArrowRight': newX++; break;
    }
    if (map[newY][newX] === 0) {
        playerX = newX;
        playerY = newY;
    } else if (map[newY][newX] === 2) {
        const nextX = newX + (newX - playerX);
        const nextY = newY + (newY - playerY);
        if (map[nextY][nextX] === 0) {
            map[newY][newX] = 0;
            map[nextY][nextX] = 2;
            playerX = newX;
            playerY = newY;
        }
    }
    draw();
});

draw();

这段代码创建了一个简单的推箱子游戏界面，并实现了基本的移动逻辑。玩家可以使用方向键来控制角色移动和推动箱子。