Gamedev Phaser Content Kit

Article 04: Move the ball

We have our blue ball printed on screen, but it's doing nothing. It would be cool to make it move somehow. Remember the update function and its definition? The code inside it is executed on every frame, so it's a perfect place to put the code that will update the ball's position on screen:

function update() {
    ball.x += 1;
    ball.y += 1;
}

The code above will add 1 to x and y representing the position of the ball on screen, on each frame. That's it, the ball is rolling!

Compare your code

You can check the finished code for this lesson for yourself in the live demo below, and play with it to understand better how it works:

Next steps

Now the next step would be to add some basic collision detection, so our ball can bounce off the walls. We could write down the JavaScript code that check all the walls against our ball and change its direction accordingly. It would take some lines of code and complicate it, even more if we want to add paddle and bricks collisions in the next steps, but we can take the advantage of using the Phaser framework and do it nice and easy. To do that though we need to introduce physics first.