I’m making a basic Soccer style game where the player moves the ball left and right using the arrow keys and shoots the ball into the goal.
So far I’ve managed to make the arrow keys move the ball the way I want using this code:
Now I’m trying to make it so the ball div can’t move left or right outside the parent div, or the “field”.
element.getBoundingClientRect to define a variable that contains the x and y values of the ball divs position, but I want those values to update as the user moves the ball left and right.
My problem is I can’t figure out how to update the DOMRect values as the user moves the ball left and right so that it can tell when the ball is moving out of the field. If anyone can help I would be very appraciative.