基于jQuery的回合制JS游戏：禁止移动到accesOff类方块的问题

我来帮你搞定这个问题！你遇到的核心问题是目标位置的计算只在页面加载时执行了一次，加上判断逻辑没有随玩家位置动态更新，导致后续向上移动的判断完全失效。咱们一步步来修复：

问题根源分析 #

1. 你在main函数外部提前计算了posDessusNombreId和$posDessusId，这些值只会在页面初始化时获取一次玩家的初始位置上方ID。当玩家移动后，当前位置已经改变，但这些变量还是原来的初始值，所以每次向上移动都会错误地判断初始位置的上方方块，自然就出现了“之后再也无法向上移动”的情况。
2. 目前只处理了向上移动的判断，还需要把相同的权限判断逻辑扩展到所有方向（下、左、右），并且每次按键时都要重新计算目标位置。

修复后的完整代码 #

function main() {
    // 初始化获取玩家当前位置（假设页面加载时joueur1类已绑定在初始方块上）
    let $currentPos = $('.joueur1');
    let maDivId = $currentPos.attr('id');

    $(window).on('keydown', function (e) {
        e.preventDefault(); // 阻止方向键默认的页面滚动行为
        const touche = e.which;
        let currentIdNum = parseInt(maDivId.substr(6));
        let targetIdNum;
        let targetPos;

        // 根据按键计算目标位置ID，同时做边界判断
        switch (touche) {
            case 38: // 向上键
                targetIdNum = currentIdNum - 10;
                // 不能超出棋盘顶部（ID不能小于0）
                if (targetIdNum < 0) break;
                break;
            case 40: // 向下键
                targetIdNum = currentIdNum + 10;
                // 不能超出棋盘底部（最大ID是99）
                if (targetIdNum > 99) break;
                break;
            case 37: // 向左键
                // 不能在最左列（ID末尾为0的列，比如0、10、20...）
                if (currentIdNum % 10 === 0) break;
                targetIdNum = currentIdNum - 1;
                break;
            case 39: // 向右键
                // 不能在最右列（ID末尾为9的列，比如9、19、29...）
                if (currentIdNum % 10 === 9) break;
                targetIdNum = currentIdNum + 1;
                break;
            default:
                return; // 不是方向键，直接退出函数
        }

        // 获取目标位置的DOM元素
        targetPos = $('#board-' + targetIdNum);
        // 核心判断：只有目标方块带有accesOn类才允许移动
        if (targetPos.hasClass('accesOn')) {
            // 更新玩家视觉位置：清除旧位置样式，设置新位置
            $currentPos.css('background', "").removeClass('joueur1');
            targetPos.css('background', `${$player1} 0% 100%`).addClass('joueur1');
            // 更新当前位置变量，确保下一次按键能获取正确位置
            $currentPos = targetPos;
            maDivId = targetPos.attr('id');
        }
    });
}

$(document).ready(main);

关键改动说明 #

• 动态计算目标位置：每次按键时都从当前玩家的最新位置重新计算目标ID，彻底解决了之前固定初始值的问题。
• 棋盘边界防护：增加了四个方向的边界判断，避免玩家移动到棋盘外的无效ID（比如向上移动到负数ID，向左移动到最左列左边）。
• 统一权限判断：所有方向的移动都共享同一个accesOn类的判断逻辑，确保任何带有accesOff类的方块都无法被移动到。
• 实时更新当前位置：每次成功移动后，立刻更新$currentPos和maDivId变量，保证下一次按键操作能基于最新位置计算。
• 阻止默认行为：添加e.preventDefault()避免方向键触发页面滚动，让游戏操作更流畅。

额外注意事项 #

• 确保$player1变量是正确的玩家精灵背景图路径，比如'url("player-sprite.png")'，这样css('background', ...)才能正确显示精灵。
• 如果你的棋盘尺寸不是10x10（0-99），需要调整边界判断的数值（比如最大ID、列数判断的取模值）。

内容的提问来源于stack exchange，提问作者user9134157