滑动游戏技术咨询：动作触发GameOver及方向交互代码问题

嘿，我来帮你梳理并优化这个滑动游戏的逻辑——你需要在用户完成指定方向的滑动动作后触发GameOver状态，而且当前代码存在大量重复逻辑，咱们一步步来解决：

首先先把你没写完的左滑逻辑补全，同时加上GameOver的触发逻辑：

// 左滑方向的处理逻辑
if (left && frameCounterLeft <= maxFrames && isLeftNow) { 
    // 重置其他方向状态
    right = false; 
    up = false; 
    down = false; 
    tap = false; 
    // 首次触发执行初始动作
    if (frameCounterLeft == 0) {
        ThrowLeft(true); 
    } else {
        ThrowLeft(false); 
    }
    // 动画帧计数递增
    frameCounterLeft++; 
    // 动画结束判断：当帧计数超过最大值时，触发GameOver
    if (frameCounterLeft > maxFrames) {
        enterGameOverState(); // 进入GameOver状态的核心函数
        // 重置当前方向状态，避免重复触发
        isLeftNow = false;
        frameCounterLeft = 0;
    }
}

解决逻辑重复的痛点 #

你现在每个方向都要写几乎一样的判断和状态重置，不仅冗余还容易出错。咱们可以把通用逻辑抽成一个统一的处理函数，把方向相关的参数传进去即可：

第一步：定义方向常量（让代码更清晰） #

const SWIPE_DIRECTIONS = {
    LEFT: 'left',
    RIGHT: 'right',
    UP: 'up',
    DOWN: 'down'
};

第二步：封装通用滑动处理函数 #

function handleSwipeAction(direction, isCurrentDirection, frameCounter, maxFrames, throwAction) {
    // 重置其他方向的激活状态
    right = direction !== SWIPE_DIRECTIONS.RIGHT;
    up = direction !== SWIPE_DIRECTIONS.UP;
    down = direction !== SWIPE_DIRECTIONS.DOWN;
    left = direction !== SWIPE_DIRECTIONS.LEFT;
    tap = false;

    // 执行对应方向的滑动动作
    throwAction(frameCounter === 0);

    // 递增动画帧计数
    frameCounter++;

    // 动画完成，触发GameOver
    if (frameCounter > maxFrames) {
        enterGameOverState();
        // 重置当前方向的状态
        isCurrentDirection = false;
        frameCounter = 0;
    }

    // 返回更新后的计数器和状态（基本类型是值传递，需要返回更新后的值）
    return { updatedCounter: frameCounter, updatedIsActive: isCurrentDirection };
}

第三步：用通用函数简化各方向处理 #

现在每个方向的代码会变得非常简洁，再也不用重复写冗余逻辑：

// 左滑处理
if (left && frameCounterLeft <= maxFrames && isLeftNow) {
    const result = handleSwipeAction(SWIPE_DIRECTIONS.LEFT, isLeftNow, frameCounterLeft, maxFrames, ThrowLeft);
    frameCounterLeft = result.updatedCounter;
    isLeftNow = result.updatedIsActive;
}

// 右滑处理（同理）
if (right && frameCounterRight <= maxFrames && isRightNow) {
    const result = handleSwipeAction(SWIPE_DIRECTIONS.RIGHT, isRightNow, frameCounterRight, maxFrames, ThrowRight);
    frameCounterRight = result.updatedCounter;
    isRightNow = result.updatedIsActive;
}

// 上滑、下滑处理以此类推...

补充GameOver状态的实现示例 #

你可以根据自己的游戏需求来实现enterGameOverState函数，比如：

function enterGameOverState() {
    // 停止游戏主循环或动画
    isGameRunning = false;
    // 显示GameOver界面
    renderGameOverUI();
    // 重置所有滑动状态和计数器
    resetAllSwipeStates();
}

function resetAllSwipeStates() {
    left = right = up = down = tap = false;
    isLeftNow = isRightNow = isUpNow = isDownNow = false;
    frameCounterLeft = frameCounterRight = frameCounterUp = frameCounterDown = 0;
}

这样既实现了“指定动作完成后进入GameOver”的核心需求，又彻底解决了代码重复的问题，后续维护和扩展新方向也会轻松很多～

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