Skip to content
Merged
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
bb6e329
Update lesson 1 "Initialize the framework" to Phaser 3.90 (except for…
igrep Jul 13, 2025
ccb6b7f
Forgot to update the URL to the example
igrep Jul 13, 2025
d3ae4c6
Update lesson 2 "Scaling" to Phaser 3.90 (except for the live sample)
igrep Jul 13, 2025
4064490
Update lesson 3 "Load the assets and print them on screen" to Phaser …
igrep Jul 15, 2025
d3e834a
Update lesson 4 "Move the ball" to Phaser 3.90 (except for the live s…
igrep Jul 16, 2025
6c4d861
Update lesson 5 "Physics" to Phaser 3.90 (except for the live sample)
igrep Jul 17, 2025
cda4007
Update lesson 6 "Bounce off the walls" to Phaser 3.90 (except for the…
igrep Jul 19, 2025
3a1c01e
(WIP) Update lesson 7 "Player paddle and controls" to Phaser 3.90
igrep Jul 20, 2025
3deac1b
Update lesson 7 "Player paddle and controls" to Phaser 3.90 except fo…
igrep Jul 21, 2025
19a5a93
Update the live sample in lesson 7 "Player paddle and controls" to Ph…
igrep Jul 21, 2025
5eadc1e
Correct the path to the assets in the live sample
igrep Jul 23, 2025
753cf50
Update lesson 8 "Game over" to Phaser 3.90
igrep Jul 23, 2025
0ce3ffd
Update lesson 9 "Build the brick field" to Phaser 3.90
igrep Jul 26, 2025
083a83a
Update lesson 10 "Collision detection" to Phaser 3.90
igrep Jul 26, 2025
a557f4b
Update lesson 11 "The score" to Phaser 3.90
igrep Jul 26, 2025
3014535
Modify lesson 11 "The score" to Phaser 3.90
igrep Jul 26, 2025
32d2919
Modify lesson 11 "The score" to Phaser 3.90
igrep Jul 26, 2025
6429f21
Modify lesson 12 "Win the game" to Phaser 3.90
igrep Jul 26, 2025
14b3dcd
(WIP) Modify lesson 13 "Extra lives" to Phaser 3.90
igrep Jul 27, 2025
5b37cab
Modify lesson 13 "Extra lives" to Phaser 3.90
igrep Jul 28, 2025
e40e328
Modify lesson 14 "Extra lives" to Phaser 3.90
igrep Jul 28, 2025
b3e64ab
(WIP) Modify lesson 15 "Buttons" to Phaser 3.90
igrep Jul 29, 2025
59be5d9
Modify lesson 15 "Buttons" to Phaser 3.90
igrep Jul 31, 2025
26ec9c4
Modify lesson 16 "Randomizing gameplay" to Phaser 3.90
igrep Jul 31, 2025
4ef696f
Migrate all the lessons to live sample from JSFiddle
igrep Jul 31, 2025
a5e4b71
Fix syntax errors in the example code and several parts I forgot to fix
igrep Aug 1, 2025
854560b
Apply formatter
igrep Aug 2, 2025
a186193
Updates
Josh-Cena Aug 2, 2025
16fdcc0
Fix grammar
Josh-Cena Aug 2, 2025
3287b45
Final tweaks
Josh-Cena Aug 2, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update lesson 4 "Move the ball" to Phaser 3.90 (except for the live s…
…ample)
  • Loading branch information
igrep committed Jul 31, 2025
commit d3e834aa2cb8c4586d2b0816281a5d52772180fb
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,22 @@ sidebar: games

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Load_the_assets_and_print_them_on_screen", "Games/Workflows/2D_Breakout_game_Phaser/Physics")}}

This is the **4th step** out of 16 of the [Gamedev Phaser tutorial](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser). You can find the source code as it should look after completing this lesson at [Gamedev-Phaser-Content-Kit/demos/lesson04.html](https://github.com/end3r/Gamedev-Phaser-Content-Kit/blob/gh-pages/demos/lesson04.html).
This is the **4th step** out of 16 of the [Gamedev Phaser tutorial](/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser). You can find the source code as it should look after completing this lesson at [2D_Breakout_game_Phaser/lesson04.html](https://github.com/igrep/2D_Breakout_game_Phaser/blob/main/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:
Remember the `update()` method 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:

```js
function update() {
ball.x += 1;
ball.y += 1;
class Example extends Phaser.Scene {
// ...

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

Expand Down