Update Phaser in "2D breakout game using Phaser"

[igrep]

Description

I migrated all the examples and the descriptions in the "2D breakout game using Phaser" tutorial to Phaser 3. I also migrated the live samples from JSFiddle.

Motivation

Same as #35578

Additional details

Related issues and pull requests

Fixes #35578
Part of #40520

[github-actions]

Preview URLs (28 pages)

• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field
• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection
• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it
• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up
• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over
• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls
• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball
• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls
• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win
• /en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Bounce_off_the_walls
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Buttons
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Collision_detection
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Extra_lives
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Move_the_ball
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Physics
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Randomizing_gameplay
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Scaling
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/The_score
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Win_the_game
• /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser

External URLs (10)

URL: /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser
Title: 2D breakout game using Phaser

• https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/ (1 time) (Note! This may be a new URL 👀)
• https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/lesson16.html (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Animations_and_tweens
Title: Animations and tweens

• https://mdn.github.io/shared-assets/images/examples/2D_breakout_game_Phaser/wobble.png (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Build_the_brick_field
Title: Build the brick field

• https://mdn.github.io/shared-assets/images/examples/2D_breakout_game_Phaser/brick.png (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Buttons
Title: Buttons

• https://mdn.github.io/shared-assets/images/examples/2D_breakout_game_Phaser/button.png (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework
Title: Initialize the framework

• https://docs.phaser.io/phaser/getting-started/set-up-dev-environment (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen
Title: Load the assets and print them on screen

• https://mdn.github.io/shared-assets/images/examples/2D_breakout_game_Phaser/ball.png (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Physics
Title: Physics

• https://docs.phaser.io/phaser/concepts/physics/arcade (1 time) (Note! This may be a new URL 👀)
• https://phaser.io/examples/v3.85.0/physics (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls
Title: Player paddle and controls

• https://mdn.github.io/shared-assets/images/examples/2D_breakout_game_Phaser/paddle.png (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-08-02 17:41:42)

[hamishwillee]

Thanks @igrep I am removing my assignment as I am not familiar with this code or games in particular. There are a lot of reviewers on holiday at the moment, so this may not be picked up in a short timeframe.

[Josh-Cena]

Sorry I had a review but looks like I failed to commit it. I'm happy to take this on.

[Josh-Cena]

This kind of code doesn't parse correctly, so as you can see it's not correctly formatted and will make my linter choke. You would need to wrap it with any necessary context. What I usually do is

class Example extends Phaser.Scene {
  // ...
  preload() {
    // ...
    this.load.image("brick", "img/brick.png");
  }
  // ...
}

You would need to update all other cases like this as well

[igrep]

Thank you! Fixed it by a5e4b71

[hamishwillee]

Sorry I had a review but looks like I failed to commit it. I'm happy to take this on.

Thank you. @igrep You're in the safest of hands.

[igrep]

😕Weird. Why did the formatter suggest only 3 blocks to change even after fixing the syntax errors pointed out by #40581 (comment)? I tried npx prettier --write files/en-us/games/tutorials/2d_breakout_game_phaser/*/index.md on my end, but I got the same result.

[Josh-Cena]

@bsmth @igrep I think we should transfer the code repository to the mdn org. WDYT? (Brian is OOO so it may take a while to respond, but this isn't blocking)

[Josh-Cena]

I'm working on this locally and I think it's safe to remove all of the repo links, because the code is inside the live samples anyway. External repos, whether hosted somewhere else or in the mdn org, are hard to maintain because they need to be in sync with the tutorial's content (for example right now I'm doing refactors, and I don't want to manually make the same changes to another repo).

[Josh-Cena]

(In the line above) Should we consistently use the CDN version instead of a local version? (No strong opinions)

[Josh-Cena]

FYI here's how you allow alert():

{{EmbedLiveSample("compare your code", "", 480, , , , , "allow-modals")}}

I'm going to remove the alert() anyway because it's quite annoying.

[Josh-Cena]

I've verified that everything works as intended. Thank you so, so much! You really deserve a big medal for all this work.

[Josh-Cena]

@igrep I just realized we have another page using Phaser 2: https://developer.mozilla.org/en-US/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation wondering if you are interested in updating that one as well. No pressure though.

[igrep]

Thank you very much for modifying and merging!

External repos, whether hosted somewhere else or in the mdn org, are hard to maintain because they need to be in sync with the tutorial's content (for example right now I'm doing refactors, and I don't want to manually make the same changes to another repo).

I agree. However, we should consider the difference between the local version and the live sample: this.load.setBaseURL and the path to the image files.

I just realized we have another page using Phaser 2: https://developer.mozilla.org/en-US/docs/Games/Tutorials/HTML5_Gamedev_Phaser_Device_Orientation wondering if you are interested in updating that one as well. No pressure though.

If I remember, after Phaser 4 gets stabilized enough (currently it's in RC) 😅