How do I move the ball upwards in my breakout game.

programming web dev
1

This is the function for it. which isn’t working.

let ballDirection = { x: 0, y: -1 }

function moveBall() {

const ball = document.getElementById("ball");

const ballRect = ball.getBoundingClientRect();

ballRect.x = ballRect.x + ballDirection.x;

ballRect.y = ballRect.y + ballDirection.y;

ball.style.transform = ball.style.transform + `translate(${ballRect.x},${ballRect.y})`

}

I want the ball to be moving forever, shoot towards up at first, when collide come below.

719×1600 237 KB

What will be the logic behind it? Can you provide pseudocode at least?

2

One broader question. Is there a reason why you are using the DOM as opposed to the using the canvas for something like this?

You can certainly do all of this using the DOM, but the Canvas is designed for arbitrary pixels moving and related interactivity parts. The DOM is more for HTML elements and how to ensure we can present them well.

3

i don’t know canvas yet.

4

A lot of what you are doing may be easier since you are dealing with fixed coordinates. Given all that you know about JS already, you may find canvas to be an easy pickup :grinning: