make element bounce back when it touches the screen limits like pong game without canvas

Question

I'm trying to implement the pong game feature in this code, but it doesn't work it's just bouncing back like basketball, I want it to bounce back like pong game with the change of direction:

 <svg id="m" width="40" height="40"> <circle cx="20" cy="20" r="20" fill="red" stroke="red" stroke-width="1"/> </svg> <script> let m = document.getElementById("m"); let posX = posY = 0; let update = function(e) { posX += e.movementX; posY += e.movementY; if(m.getBoundingClientRect().y<0){ posY = -posY } else if(m.getBoundingClientRect().x<0){ posX = -posX } m.style.transform = `translate(${posX}px, ${posY}px)`; }; document.addEventListener("mousedown", () => { document.addEventListener("mousemove", update); }); document.addEventListener("mouseup", () => { document.removeEventListener("mousemove", update); }); </script>

What I tried:

calculating the vector that is currently used in the ball when it collides with the screen and find another vector that is perpendicular to the first vector and move along it, but I didn't find how to continue with that idea.

EDIT: I think I need to add a direction variable like posX += e.movementX * direction; but how to do that? where can I get that direction and change it?

thanks a lot

Answer 1

Actually, you don't want a perpendicular vector: you want the ball to bounce at the same angle it hit the "wall", but symmetrical along an axis that is perpendicular to the wall.

You can model it this way: when the ball hits the wall, there is a reaction of the wall which applies a force perpendicular to the wall and pointing away from the wall. That's a vector you would need to add to the velocity vector of your ball in order to get the updated velocity vector.

In your case the walls are aligned with your coordinate system, so it's very simple: when you hit a horizontal wall, you can convince yourself that the x component of your velocity vector should not be affected by the reaction of the wall. As for the y component, you can also convince yourself that all you need to do in order to bounce is to flip it. No fancy vector maths required

---

However, it is never going to work right if you are not able to release the ball.

1. Record the mouse position at a given interval. Don't do it on every mousemove event as it fires too often, which would give you minuscule and sometimes null values.

2. When you release the ball, on mouseup , create a "vector" out of the difference of the current mouse position and the last mouse position. That's the ball initial velocity. You can save it as a pair of x and y components for now unless you want to apply forces to your ball such as wind or whatever.

3. add the components of this vector to the ball's position at every tick of your clock to make it progress on the screen without the aid of the mouse.

Now that the ball can move freely you can detect its collision with the walls and make it bounce.