# Please, help me to update the MDN 2D Breakout tutorial to Phaser 3.80.1

**URL:** <https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203>\
**Category:** Phaser 3\
**Created:** [April 12, 2024, 2:04pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203 "2024-04-12T14:04:43Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 12, 2024, 2:04pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/1 "2024-04-12T14:04:44Z")

</div>

Hello,

I want to port the next tutorial with Phaser 3.80.1: [2D breakout game using Phaser - Game development | MDN](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser) But I have some promblems.

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 12, 2024, 2:06pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/2 "2024-04-12T14:06:25Z")

</div>

[Lesson 01: Initialize the framework](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Initialize_the_framework)

Playground: [Plunker - Lesson 01. Initialize the framework | 2D Breakout Game from MDN tutorial in Phaser 3 and JavaScript](https://plnkr.co/edit/IzbP7B8SqYEVg7C7?preview)

It works as expected - without problems.

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 12, 2024, 2:11pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/3 "2024-04-12T14:11:29Z")

</div>

[Lesson 02: Scaling](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Scaling)

Playground: [Plunker - Lesson 02. Scaling | 2D Breakout Game from MDN tutorial in Phaser 3 and JavaScript](https://plnkr.co/edit/wf2Fz1gkwfa2RXqd?preview)

This example has the next problem. The canvas scaled in the wrong way and I don’t have any error messages in the browser console:

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/34a9e5f6dc649fea2c01fdb0c95c9e216d09b2e6.png)

Code from the lesson:

```js
function preload() {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
}

```

Translated code:

```js
import { CANVAS, Game, Scale } from "phaser3";

const config = {
    type: CANVAS,
    parent: "2d-breakout-game",
    width: 480,
    height: 320,
    scene: { preload, create, update }
};

const game = new Game(config);

function preload() {
    game.scale.scaleMode = Scale.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
}

function create() {
    console.log("create");
}

function update() {

}

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 12, 2024, 4:08pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/4 "2024-04-12T16:08:29Z")

</div>

For `parent` you need to add that element to the document:

```html
<div id="2d-breakout-game"></div>

```

Phaser 3 doesn’t have `SHOW_ALL` so maybe use `FIT` instead.

> **[Plunker - Lesson 02. Scaling | 2D Breakout Game from MDN tutorial in Phaser 3...](https://plnkr.co/edit/ycLOazWnjuFESKnW)**
>
> Created on https://plnkr.co: Helping you build the web.

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 13, 2024, 5:31pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/5 "2024-04-13T17:31:07Z")

</div>

@samme thank you very much!

I created a repository for the translated tutorial examples: [GitHub - 8Observer8/2d-breakout-game-from-mdn-phaser3-js: My port of the MDN "2D breakout game using Phaser" tutorial examples to Phaser 3](https://github.com/8Observer8/2d-breakout-game-from-mdn-phaser3-js)

Changes in the [Lesson 03: Load the assets and print them on screen](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Load_the_assets_and_print_them_on_screen)

#### Phaser 2:

```js
var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {preload: preload, create: create, update: update});

var ball;

function preload() {
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
    game.stage.backgroundColor = '#eee';
    game.load.image('ball', 'img/ball.png');
}
function create() {
    ball = game.add.sprite(50, 50, 'ball');
}
function update() {}

```

#### Phaser 3:

```js
import { AUTO, Game, Scale } from "phaser3";

let ball;

const config = {
    type: AUTO,

    parent: "2d-breakout-game",
    width: 480,
    height: 320,
    scaleMode: Scale.ScaleModes.FIT,
    autoCenter: Scale.Center.CENTER_BOTH,

    autoFocus: false,
    scene: { preload, create, update },
    backgroundColor: "#eee"
};

const game = new Game(config);

function preload() {
    this.load.image("ball", "assets/ball.png");
}

function create() {
    ball = this.add.sprite(50, 50, "ball");
}

function update() {}

```

Playground: [Plunker - Lesson 03. Load and print assets | 2D Breakout Game from MDN tutorial in Phaser 3 and JavaScript](https://plnkr.co/edit/rRmo55k8ISJJ8iAh?preview)

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/70f25571935fe3e8ee317a62df17ec2cbd01d45e.png)

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 13, 2024, 7:33pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/6 "2024-04-13T19:33:26Z")

</div>

It is better to finish the next tutorial first and continue the current one: [Making your first Phaser 3 game - Phaser](https://phaser.io/tutorials/making-your-first-phaser-3-game)

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 14, 2024, 1:25pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/7 "2024-04-14T13:25:30Z")

</div>

I finished the official “Making your first Phaser 3 game” tutorial above but [I cannot control a character on the Plunker playground in preview](https://phaser.discourse.group/t/i-cannot-control-a-character-on-the-plunker-playground-in-preview/14213)

**Added**

The problem above was fixed - `autoFocus` should be set to `true`.

[GitHub repository with Rollup guide](https://github.com/8Observer8/making-your-first-game-rollup-phaser3-js)

Playground:

- [Part 01: Introduction](https://plnkr.co/edit/0bfan50fyy6nPbJh?preview)
- [Part 02. Loading assets](https://plnkr.co/edit/oVMw7XAGWCg5tNQU?preview)
- [Part 03. World Building](https://plnkr.co/edit/TX3O3csfPCPMBClE?preview)
- [Part 04. The Platforms (explanation)](https://plnkr.co/edit/cqcY5p7e5hY9ntcT?preview)
- [Part 05. Ready Player One](https://plnkr.co/edit/aqdvxQLnXdXE5SWl?preview)
- [Part 06. Body velocity](https://plnkr.co/edit/Bn4l8iQd45Kcp59U?preview)
- [Part 07. Controlling the player with the keyboard](https://plnkr.co/edit/l6vMdQK4nqhO6D8f?preview)
- [Part 08. Stardust](https://plnkr.co/edit/R56rIkhXcl03ZpN1?preview)
- [Part 09. A score to settle](https://plnkr.co/edit/9jqMKsTcA22y67Dc?preview)
- [Part 10. Bouncing Bombs](https://plnkr.co/edit/Xp05cENREbp91yuH?preview)

**Added 4/27/2024:**

I have replaced Arcade Physics with [box2d/core](https://lusito.github.io/box2d.ts/):

[GitHub repository with Rollup guide](https://github.com/8Observer8/port-to-box2dcore-of-making-your-first-game-rollup-phaser3-js)

Playground:

- [Part 01: Introduction](https://plnkr.co/edit/YaAaamdKkjXGfNZw?preview)
- [Part 02. Loading assets](https://plnkr.co/edit/24VDdeuBKyzOZccr?preview)
- [Part 03. World Building](https://plnkr.co/edit/Qv1LTe3Pa5xAEgAG?preview)
- [Part 04. The Platforms (explanation)](https://plnkr.co/edit/tjKCiQjVWxWdWKss?preview)
- [Part 05. Ready Player One](https://plnkr.co/edit/YDd8P7u225nsjsRR?preview)
- [Part 06. Body velocity](https://plnkr.co/edit/pWG2rAffFQGt7uVy?preview)
- [Part 07. Controlling the player with the keyboard](https://plnkr.co/edit/SrMlC1Q7q2dmo6wZ?preview)
- [Part 08. Stardust](https://plnkr.co/edit/FkkU8JU8qEsByZPO?preview)
- [Part 09. A score to settle](https://plnkr.co/edit/WaQjQwQNvvl7Eihu?preview)
- [Part 10. Bouncing Bombs](https://plnkr.co/edit/cQRkyfh5RoMr7OVW?preview)

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/bd2727557f80ac4cdb8208eb4bfe172aaa010a7b.png)

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 15, 2024, 10:42am UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/8 "2024-04-15T10:42:29Z")

</div>

I have a problem with the lesson 7: [Player paddle and controls](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Player_paddle_and_controls), with this code:

```js
function update() {
    paddle.x = game.input.x;
}

```

I tried to print `console.log(game.input);` but it doesn’t have the `x` property.

[Playground](https://plnkr.co/edit/RYmXuFWarqIMm02E?preview)

There is the `game.input.mouse` property but it doesn’t have the `x` property.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 15, 2024, 4:21pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/9 "2024-04-15T16:21:19Z")

</div>

```js
function update() {
    paddle.x = this.input.x;
}

```

[Phaser.Input.InputPlugin#x](https://newdocs.phaser.io/docs/3.80.0/focus/Phaser.Input.InputPlugin-x)

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 27, 2024, 8:54pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/10 "2024-04-27T20:54:30Z")

</div>

Playground: [Lesson 07. Player paddle and controls](https://plnkr.co/edit/RYmXuFWarqIMm02E?preview)

**Phaser 2:**

```js
var game = new Phaser.Game(480, 320, Phaser.AUTO, null, {preload: preload, create: create, update: update});

var ball;
var paddle;

function preload() {
    handleRemoteImagesOnJSFiddle();
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
    game.stage.backgroundColor = '#eee';
    game.load.image('ball', 'img/ball.png');
    game.load.image('paddle', 'img/paddle.png');
}
function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    ball = game.add.sprite(game.world.width*0.5, game.world.height-25, 'ball');
    ball.anchor.set(0.5);
    game.physics.enable(ball, Phaser.Physics.ARCADE);
    ball.body.velocity.set(150, -150);
    ball.body.collideWorldBounds = true;
    ball.body.bounce.set(1);

    paddle = game.add.sprite(game.world.width*0.5, game.world.height-5, 'paddle');
    paddle.anchor.set(0.5,1);
    game.physics.enable(paddle, Phaser.Physics.ARCADE);
    paddle.body.immovable = true;
}
function update() {
    game.physics.arcade.collide(ball, paddle);
    paddle.x = game.input.x || game.world.width*0.5;
}

// this function (needed only on JSFiddle) take care of loading the images from the remote server
function handleRemoteImagesOnJSFiddle() {
	game.load.baseURL = 'https://end3r.github.io/Gamedev-Phaser-Content-Kit/demos/';
	game.load.crossOrigin = 'anonymous';
}

```

**Phaser 3:**

```js
import { AUTO, Game, Scale } from 'phaser3';

let ball, paddle;

const config = {
    type: AUTO,

    parent: '2d-breakout-game',
    width: 400,
    height: 320,
    scaleMode: Scale.ScaleModes.FIT,
    autoCenter: Scale.Center.CENTER_BOTH,

    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },

    autoFocus: true,
    scene: { preload, create, update },
    backgroundColor: '#eee'
};

const game = new Game(config);

function preload() {
    this.load.image('ball', 'assets/ball.png');
    this.load.image('paddle', 'assets/paddle.png');
}

function create() {
    ball = this.physics.add.sprite(this.scale.width * 0.5, this.scale.height - 25, 'ball');
    ball.setVelocity(150, -150);
    ball.setCollideWorldBounds(true);
    ball.setBounce(1);

    paddle = this.physics.add.sprite(this.scale.width * 0.5, this.scale.height - 5, 'paddle');
    paddle.setOrigin(0.5, 1);

    this.physics.add.collider(ball, paddle);
    paddle.body.immovable = true;
}

function update() {
    paddle.x = this.input.x || this.scale.width * 0.5;
}

```

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 27, 2024, 9:35pm UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/11 "2024-04-27T21:35:16Z")

</div>

How to replace this code:

```js
ball.checkWorldBounds = true;
ball.events.onOutOfBounds.add(() => {
  alert("Game over!");
  location.reload();
}, this);

```

It is from the [Game over](https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser/Game_over) lesson. I have tried to use this solution: [Out of bounds checking - #5 by PavelMishin](https://phaser.discourse.group/t/out-of-bounds-checking/905/5)

```js
function update() {
    paddle.x = this.input.x || this.scale.width * 0.5;

    const inside = Geom.Rectangle.Overlaps(this.physics.world.bounds, ball.getBounds());
    if (!inside) {
        alert('Game over!');
        location.reload();
    }
}

```

But it cannot be reloaded: [Playground](https://plnkr.co/edit/YDm2eholZFLmoKiK?preview)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [April 28, 2024, 1:09am UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/12 "2024-04-28T01:09:18Z")

</div>

It’s slightly better to use `Overlaps(this.physics.world.bounds, ball.body)`.

Maybe `reload()` is blocked. You can do

```
this.scene.restart();

```

---

<div class="post-metadata">

**Author:** ![8Observer8](https://avatars.discourse-cdn.com/v4/letter/8/bbe5ce/32.png) [@8Observer8](https://phaser.discourse.group/u/8Observer8)\
**Post date:** [April 28, 2024, 9:00am UTC](https://phaser.discourse.group/t/please-help-me-to-update-the-mdn-2d-breakout-tutorial-to-phaser-3-80-1/14203/13 "2024-04-28T09:00:48Z")

</div>

It works! Thank you very much!

```js
function update() {
    paddle.x = this.input.x || this.scale.width * 0.5;

    const inside = Geom.Rectangle.Overlaps(this.physics.world.bounds, ball.body);
    if (!inside) {
        alert('Game over!');
        this.scene.restart();
    }
}

```

[Playground](https://plnkr.co/edit/YDm2eholZFLmoKiK?preview)