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

**URL:** <https://forum.kirupa.com/t/how-do-i-move-the-ball-upwards-in-my-breakout-game/656252>\
**Category:** web dev\
**Created:** [January 12, 2023, 3:11am UTC](https://forum.kirupa.com/t/how-do-i-move-the-ball-upwards-in-my-breakout-game/656252 "2023-01-12T03:11:38Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [January 12, 2023, 3:11am UTC](https://forum.kirupa.com/t/how-do-i-move-the-ball-upwards-in-my-breakout-game/656252/1 "2023-01-12T03:11:39Z")

</div>

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

```auto
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.

 ![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/b/3/b3a50381d84d1df253ef6c20a38054b73daf6510.jpeg)

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 13, 2023, 12:39am UTC](https://forum.kirupa.com/t/how-do-i-move-the-ball-upwards-in-my-breakout-game/656252/2 "2023-01-13T00:39:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![polaryeti](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/polaryeti/32/19283_2.png) [@polaryeti](https://forum.kirupa.com/u/polaryeti)\
**Post date:** [January 13, 2023, 1:54am UTC](https://forum.kirupa.com/t/how-do-i-move-the-ball-upwards-in-my-breakout-game/656252/3 "2023-01-13T01:54:19Z")

</div>

i don’t know canvas yet.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 13, 2023, 2:15am UTC](https://forum.kirupa.com/t/how-do-i-move-the-ball-upwards-in-my-breakout-game/656252/4 "2023-01-13T02:15:35Z")

</div>

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 😀

> **[Working with the Canvas](https://www.kirupa.com/canvas/index.htm)**
>
> Learn all about this thing called the canvas and how it helps bring pixels to life using just JavaScript!