Move the ball

This is the 4th step out of 16 of the Gamedev Phaser tutorial. You can find the source code as it should look after completing this lesson at Gamedev-Phaser-Content-Kit/demos/lesson04.html.

We have our blue ball printed on screen, but it's doing nothing — It would be cool to make it move somehow. This article covers how to do just that.

Updating the ball's position on each frame

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. Add the following new lines of the code inside update(), as shown:

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

The code above adds 1 to the x and y properties representing the ball coordinates on the canvas, on each frame. Reload index.html and you should see the ball rolling across the screen.

Compare your code

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

Next steps

The next step is to add some basic collision detection, so our ball can bounce off the walls. This would take several lines of code — a significantly more complex step than we have seen so far, especially if we want to add paddle and brick collisions too — but fortunately Phaser allows us to do this much more easily than if we wanted to use pure JavaScript.

In any case, before we do all that we will first introduce Phaser's physics engines, and do some setup work.