JavaScript/HTML5游戏Sprite按钮悬停状态粘滞问题求助

我最近在用JavaScript/HTML5开发游戏，用精灵图绘制交互按钮时遇到了一个棘手的问题：按钮能正常触发悬停状态，但鼠标离开后，悬停状态却没法取消，出现了明显的“粘滞”行为。

问题代码分析 #

一开始我写的checkButtonHover函数逻辑是这样的：

function checkButtonHover() { //Check for button hovers
  for(var b=0; b<buttons.length; b++) { 
    var button = buttons[b]; 
    var select = null; 
    //If point collision with button
    if(hitTestPoint(mouseX,mouseY,button)) { 
      //Assign select sprite art
      select = new Sprite("select",190,237,20,20,button.x,button.y,1,true,false,false); 
      //Add select to sprites so that it get drawn in render()
      sprites.push(select); 
    } else { 
      //If there isn't a collision but select has a value
      if(select !== null) { 
        select.visible = false; 
        removeObject(select,sprites); 
        //Reset select to null
        select = null; 
      } 
    } 
  } 
}

这段代码的问题现在回头看一眼就能发现：

• select是循环内的局部变量，每次遍历按钮时都会重新初始化为null。当鼠标离开按钮时，select依然是null，所以else块里的隐藏/移除逻辑根本不会执行。
• 每次鼠标悬停按钮时，都会创建一个新的select精灵并推入sprites数组，但这些实例没有被持久化保存，鼠标移开后完全找不到之前创建的select实例去处理，导致悬停状态的精灵一直留在画布上，看起来像是“粘住”了。

解决方法 #

经过多次尝试，我通过给每个按钮对象添加一个临时的select属性来解决了这个问题。核心思路是让每个按钮自己持有对应的悬停精灵实例，而不是每次循环都创建新的局部实例：

1. 初始化按钮时绑定悬停精灵：
   在创建按钮对象的阶段，就给每个按钮添加select属性，初始化对应的悬停精灵（默认设为不可见，或者先不加入sprites数组）：

   // 假设这是创建按钮的代码片段
   for(...) {
     var button = new Button(...);
     // 初始化悬停精灵，默认隐藏
     button.select = new Sprite("select",190,237,20,20,button.x,button.y,1,false,false,false);
     buttons.push(button);
   }
   

2. 修改checkButtonHover逻辑：
   直接通过按钮对象的select属性来控制悬停状态的显示和隐藏：

   function checkButtonHover() {
     for(var b=0; b<buttons.length; b++) {
       var button = buttons[b];
       if(hitTestPoint(mouseX,mouseY,button)) {
         // 鼠标悬停时显示悬停精灵，确保已加入渲染队列
         button.select.visible = true;
         if(!sprites.includes(button.select)) {
           sprites.push(button.select);
         }
       } else {
         // 鼠标离开时隐藏悬停精灵（或者从渲染队列移除，根据需求选择）
         button.select.visible = false;
         // 如果需要彻底移除，可以用下面的代码：
         // const spriteIndex = sprites.indexOf(button.select);
         // if(spriteIndex !== -1) {
         //   sprites.splice(spriteIndex, 1);
         // }
       }
     }
   }
   

这样修改后，每个按钮的悬停精灵实例被持久化绑定到按钮对象上，鼠标移入移出时可以精准控制其可见状态，再也不会出现悬停状态粘滞的问题了。

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