拖拽式足球计分器JS逻辑问题：进球后分数不增加

问题根源梳理 #

• 计分函数仅定义未调用：你写了scoreIncrement函数，但从未在合适的时机触发执行，所以分数不会更新。
• 函数定义位置错误：把scoreIncrement放在了onMouseMove的逻辑内部，每次鼠标移动都会重复定义函数，造成作用域混乱。
• 计分触发逻辑错误：当前代码试图在鼠标划过球门时计分，这不符合“拖入球门后加分”的需求，应该在松开鼠标、确认足球停在球门内时才计分。
• 分数更新目标错误：你的HTML结构是<h3>Score:<span id="score">0</span></h3>，但原代码给span设置"Score: " + score，会导致显示变成Score:Score: 1的重复文本，只需更新span内的数值即可。

修复步骤 #

1. 将scoreIncrement函数移到全局作用域，修正分数更新逻辑：

function scoreIncrement() {
  score++;
  document.getElementById("score").innerText = score;
}

2. 在鼠标松开（onmouseup）的回调中，判断足球是否停在球门内，是则调用计分函数：

ball.onmouseup = function() {
  if (currentDroppable) {
    scoreIncrement();
  }
  document.removeEventListener('mousemove', onMouseMove);
  ball.onmouseup = null;
};

3. 删除onMouseMove内部错误定义的scoreIncrement函数，避免作用域冲突。

完整修复代码 #

<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <h3>Score:<span id="score">0</span></h3>
  <button id="start-button">Start/Pause</button>

  <p>Drag the ball.</p>

  <img src="https://en.js.cx/clipart/soccer-gate.svg" id="gate" class="droppable">
  <img src="https://picsum.photos/150/150" id="ball">

  <script>
   
    const scoreDisplay = document.querySelector('#score')
    let score = 0
    let currentDroppable = null;

    // 全局作用域定义计分函数
    function scoreIncrement() {
      score++;
      document.getElementById("score").innerText = score;
    }

    ball.onmousedown = function(event) {

      let shiftX = event.clientX - ball.getBoundingClientRect().left;
      let shiftY = event.clientY - ball.getBoundingClientRect().top;

      ball.style.position = 'absolute';
      ball.style.zIndex = 1000;
      document.body.append(ball);

      moveAt(event.pageX, event.pageY);

      function moveAt(pageX, pageY) {
        ball.style.left = pageX - shiftX + 'px';
        ball.style.top = pageY - shiftY + 'px';
      }

      function onMouseMove(event) {
        moveAt(event.pageX, event.pageY);

        ball.hidden = true;
        let elemBelow = document.elementFromPoint(event.clientX, event.clientY);
        ball.hidden = false;

        if (!elemBelow) return;

        let droppableBelow = elemBelow.closest('.droppable');
        if (currentDroppable != droppableBelow) {
          if (currentDroppable) {
            leaveDroppable(currentDroppable);
          }
          currentDroppable = droppableBelow;
          if (currentDroppable) {
            enterDroppable(currentDroppable);
          }
        }
      }
    

      document.addEventListener('mousemove', onMouseMove);

      ball.onmouseup = function() {
        // 松开鼠标时检查是否停在球门内，触发计分
        if (currentDroppable) {
          scoreIncrement();
        }
        document.removeEventListener('mousemove', onMouseMove);
        ball.onmouseup = null;
      };

    };

    function enterDroppable(elem) {
      elem.style.background = 'pink';
    }

    function leaveDroppable(elem) {
      elem.style.background = '';
    }

    ball.ondragstart = function() {
      return false;
    };

  </script>


</body>
</html>

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