如何用JavaScript实现RTS游戏中的单个单位单选逻辑

问题描述 #

在大多数RTS游戏中，未使用选择框选中多个单位时，同一时间仅能激活一个单位——当选中第二个单位时，第一个单位会自动取消选中状态。如何通过JavaScript实现该功能？

原代码存在的问题 #

你提供的代码无法实现单选逻辑，核心问题包括：

• 没有全局跟踪当前选中的单位，选中新单位时旧单位的选中状态不会自动清除
• 每个单位的点击事件中重复绑定背景点击事件，会导致多次触发取消选中逻辑
• 未处理name变量未定义的错误

修正后的实现方案 #

下面是优化后的代码，通过全局维护选中状态，完美实现单选逻辑：

// 单位移动逻辑
function knightMove() {
    console.log("骑士移动");
}

function riderMove() {
    console.log("骑兵移动");
}

// 获取DOM元素
const knight = document.querySelector(".knight");
const rider = document.querySelector(".rider");
const bg = document.querySelector(".bg"); // 假设背景元素已定义

// 全局跟踪当前选中的单位和对应的移动处理函数
let currentSelectedUnit = null;
let currentMoveHandler = null;

// 取消当前选中单位的统一逻辑
function deselectCurrentUnit() {
    if (currentSelectedUnit && currentMoveHandler) {
        // 移除键盘事件监听
        window.removeEventListener("keydown", currentMoveHandler);
        // 重置单位选中样式
        currentSelectedUnit.style.boxShadow = "0 0 44px 22px white";
        console.log(currentSelectedUnit.classList[0], "已取消选中");
        // 清空全局状态
        currentSelectedUnit = null;
        currentMoveHandler = null;
    }
}

// 选中单位的逻辑封装
function selectUnit(unit, moveHandler) {
    unit.addEventListener("click", () => {
        // 先取消之前选中的单位
        deselectCurrentUnit();
        
        // 设置新的选中状态
        currentSelectedUnit = unit;
        currentMoveHandler = moveHandler;
        
        // 绑定键盘移动事件
        window.addEventListener("keydown", moveHandler);
        // 设置选中样式
        unit.style.boxShadow = "0 0 44px 22px red";
        console.log(unit.classList[0], "已选中");
    });
}

// 为单位绑定选中事件
selectUnit(knight, knightMove);
selectUnit(rider, riderMove);

// 背景点击取消选中（仅绑定一次）
bg.addEventListener("click", deselectCurrentUnit);

关键逻辑说明 #

• 全局状态跟踪：用currentSelectedUnit和currentMoveHandler记录当前选中的单位和对应的移动事件，确保每次选中新单位前能彻底清除旧状态
• 统一取消逻辑：封装deselectCurrentUnit函数，集中处理移除事件、重置样式、清空状态的操作，避免重复冗余代码
• 事件绑定优化：背景点击事件仅绑定一次，解决原代码中重复绑定导致的多次触发问题
• 状态同步：选中单位时同步绑定键盘事件并修改样式，取消选中时同步移除事件并重置样式，保证状态一致性

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