drag and drop soccer score incrementor Javascript-CodePudding

I haven't been able to correctly build logic. After dropping soccer ball into the goal, the score does not increment. As stated in my JS script code, I attempted to add score to scoreDisplay function (in bold). Thank you for looking at this issue.

<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" >
  <img src="https://picsum.photos/150/150" id="ball">

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

    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 onm ouseMove(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) { // null when we were not over a droppable before this event
            leaveDroppable(currentDroppable);
          }
          currentDroppable = droppableBelow;
          if (currentDroppable) { // null if we're not coming over a droppable now
            // (maybe just left the droppable)
            enterDroppable(currentDroppable);
            
            }

            //add score
            **function scoreIncrement() {
            score  ;
            document.getElementById("score").innerText="Score: "   score;**
}
          
         
      }
    }
    

      document.addEventListener('mousemove', onm ouseMove);

      ball.onmouseup = function() {
        document.removeEventListener('mousemove', onm ouseMove);
        ball.onmouseup = null;
      };

    };

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

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

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

      
  
     
  </script>


</body>
</html>

Thanks again for for taking the time to look this over

CodePudding user response：

you were almost there!. You were missing what is called a "flag". That is a variable (usually true/false) that holds some information that allows you to make decisions in the right event (which you had).

In this case a flag could tell me if I am over or not the goal, so that when I drop the ball I can add a point to the score.

As you can see in the code below, when you enterDroppable the flag is set to true and when you leaveDroppable its set back to false; then when the event mouseUp is triggered, the flag is checked. If the flag was true, then the score is incremented (and its value is updated on the screen)

Note that I changed the style of the ball so it looks more like a ball. Also note that its not a good practice to subscribe and remove events inside other events. Its better to have the events subscribed once and have more flags: for example, set a flag in the mouseDown to know that the ball was "grabed", then the mouseMove event would check that flag to see if it had to move the ball or not. I leave it as is, so not to change your code much but keep it in mind.

See the working code below (scroll all the way down and click on "Run the snipped code" to see it in action). Also if this solved your question dont forget to mark it as such using the green check left to the answer.

const scoreDisplay = document.querySelector('#score')
let score = 0
let currentDroppable = null;
let ballIsOverDroppable = false;

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 onm ouseMove(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) { // null when we were not over a droppable before this event
        leaveDroppable(currentDroppable);
      }
      currentDroppable = droppableBelow;
      if (currentDroppable) { // null if we're not coming over a droppable now
        // (maybe just left the droppable)
        enterDroppable(currentDroppable);
      }
    }
  }


  document.addEventListener('mousemove', onm ouseMove);

  ball.onmouseup = function() {
    document.removeEventListener('mousemove', onm ouseMove);
    ball.onmouseup = null;
    if (ballIsOverDroppable) {
      score  ;
      scoreDisplay.textContent = `${score}`;

    }
  };

};

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

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

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

<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" >
<img src="https://picsum.photos/20/20" id="ball" style="border-radius: 20px; border: 2px solid black;">