游戏初始化阶段快速点击异常问题排查求助

问题描述 #

开发的游戏交互代码中，首次连续快速点击会出现行为异常，但后续快速点击可正常处理。已排查代码逻辑、事件处理流程、初始化步骤，尝试过AI工具分析，仍未定位根因。曾考虑将游戏启动改为第二次点击，但希望解决根本问题。

相关代码片段 #

var gameStatus= "game";
var isGameStillRunning= false;
var isGameBusy= false;

$(".cube").on("click", function() {

    if (isGameBusy) {
        console.log("game is busy")
        return;
    }
    console.log("isGameBusy "+isGameBusy)
    if (gameStatus == "game" && !isGameBusy) {
        isGameBusy= true;
        
        console.log("isGameBusy "+isGameBusy)

        setTimeout(() => {
            gameSequence_filler();
            console.log(gameSequence);
            $("#game_text").html("Level " + level);
            gameSequence_Executer ();
        }, 1000);

        setTimeout (function () {
            isGameBusy= false;
          }, gameSequence_Executer_Delay*gameSequence.length*1000+100);
    }
    else if (gameStatus== "player") {
            playerSequence_filler(this);
    }
});

问题细节 #

• 快速点击异常：仅首次交互时连续快速点击触发异常，后续操作恢复正常
• 排查情况：已检查代码逻辑、事件处理与初始化流程，尝试过ChatGPT分析，未找到根因
• 临时方案考虑：曾考虑将游戏启动从首次点击改为第二次，但希望解决根本问题

排查思路 #

1. 首次点击的变量初始化缺失：首次点击时gameSequence、level、gameSequence_Executer_Delay等变量可能未完成初始化，导致延迟计算错误，提前将isGameBusy重置为false，让后续点击绕过限制。
2. 异步时序不匹配：首次点击时，gameSequence_Executer的执行时长可能超出预设的延迟时间，导致isGameBusy被提前重置，多个点击回调同时触发逻辑。
3. DOM就绪状态问题：如果页面DOM未完全加载完成就绑定了点击事件，首次点击可能触发未初始化的逻辑分支。

解决方案 #

1. 确保变量初始化完成 #

给依赖变量设置明确的初始值，避免首次点击时出现undefined导致计算错误：

var gameStatus= "game";
var isGameStillRunning= false;
var isGameBusy= false;
var gameSequence = []; // 初始化为空数组
var level = 1; // 初始关卡设为1
var gameSequence_Executer_Delay = 1; // 默认延迟时长，根据实际调整

2. 修正isGameBusy的重置时机 #

不要依赖固定时长的setTimeout，而是在gameSequence_Executer执行完成后再解锁状态。如果gameSequence_Executer包含异步操作（如动画、定时器），在其回调内重置状态：

// 修改gameSequence_Executer函数，添加完成回调
function gameSequence_Executer() {
    // 原执行逻辑...
    
    // 执行完成后解锁状态（示例为动画结束后）
    setTimeout(() => {
        isGameBusy = false;
    }, 100); // 留100ms缓冲时间，确保视觉反馈完成
}

// 移除原代码中第二个setTimeout，不再用固定延迟重置状态

3. 提前锁定状态，避免首次重复触发 #

调整点击事件内的状态设置顺序，符合条件后立即锁定isGameBusy，减少时序漏洞：

$(".cube").on("click", function() {
    if (isGameBusy) {
        console.log("game is busy")
        return;
    }
    console.log("isGameBusy "+isGameBusy)
    
    if (gameStatus == "game") {
        isGameBusy = true; // 立即锁定状态
        console.log("isGameBusy "+isGameBusy)

        setTimeout(() => {
            gameSequence_filler();
            console.log(gameSequence);
            $("#game_text").html("Level " + level);
            gameSequence_Executer();
        }, 1000);
    }
    else if (gameStatus== "player") {
        playerSequence_filler(this);
    }
});

4. 确保DOM就绪后绑定事件 #

将事件绑定放在document.ready回调内，避免DOM未加载完成时绑定失效：

$(document).ready(function() {
    // 游戏初始化逻辑...
    // 初始化完成后再绑定点击事件
    $(".cube").on("click", function() {
        // 原点击事件逻辑...
    });
});

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