Fix syntax errors in the example code and several parts I forgot to fix

Author: igrep

files/en-us/games/tutorials/2d_breakout_game_phaser/animations_and_tweens/index.md

@@ -59,18 +59,26 @@ To add an animation to the object we use the `anims.create` method, which receiv
 In the `physics.collide` method call that handles the collision between the ball and the paddle (the first line inside `update`, see below), we can add an extra parameter that specifies a function to be executed every time the collision happens, in the same fashion as the `hitBrick` method. Update the first line inside `update()` as shown below:
 
 ```js
-update () {
-  this.physics.collide(this.ball, this.paddle, this.hitPaddle.bind(this));
-  this.physics.collide(this.ball, this.bricks, this.hitBrick.bind(this));
-  this.paddle.x = this.input.x || this.scale.width * 0.5;
+class Example extends Phaser.Scene {
+  // ...
+  update() {
+    this.physics.collide(this.ball, this.paddle, this.hitPaddle.bind(this));
+    this.physics.collide(this.ball, this.bricks, this.hitBrick.bind(this));
+    this.paddle.x = this.input.x || this.scale.width * 0.5;
+  }
+  // ...
 }
 ```
 
 Then, we can create the `hitPaddle` method (having `ball` and `paddle` as default parameters), playing the wobble animation when it is called. Add the following method just before your closing brace `}` of the `Example` class:
 
 ```js
-hitPaddle (ball, paddle) {
-  this.ball.anims.play('wobble');
+class Example extends Phaser.Scene {
+  // ...
+  hitPaddle(ball, paddle) {
+    this.ball.anims.play("wobble");
+  }
+  // ...
 }
 ```
 

files/en-us/games/tutorials/2d_breakout_game_phaser/build_the_brick_field/index.md

@@ -30,9 +30,13 @@ The `bricks` property will be used to create a group of bricks, which will make
 Next, let's load the image of the brick — add the following `load.image()` call just below the others:
 
 ```js
-preload () {
+class Example extends Phaser.Scene {
+  // ...
+  preload() {
+    // ...
+    this.load.image("brick", "img/brick.png");
+  }
   // ...
-  this.load.image('brick', 'img/brick.png');
 }
 ```
 
@@ -43,29 +47,37 @@ You also need to [grab the brick image from GitHub](https://github.com/igrep/2D_
 We will place all the code for drawing the bricks inside an `initBricks` method to keep it separated from the rest of the code. Add a call to `initBricks` at the end of the `create` method:
 
 ```js
-create () {
+class Example extends Phaser.Scene {
+  // ...
+  create() {
+    // ...
+    this.initBricks();
+  }
   // ...
-  this.initBricks();
 }
 ```
 
 Now onto the method itself. Add the `initBricks` method at the end of the `Example` class, just before the closing brace `}`, as shown below. To begin with, we add the `bricksLayout` object, as this will come in handy very soon:
 
 ```js
-initBricks () {
-  const bricksLayout = {
-    width: 50,
-    height: 20,
-    count: {
-      row: 3,
-      col: 7,
-    },
-    offset: {
-      top: 50,
-      left: 60,
-    },
-    padding: 10,
-  };
+class Example extends Phaser.Scene {
+  // ...
+  initBricks() {
+    const bricksLayout = {
+      width: 50,
+      height: 20,
+      count: {
+        row: 3,
+        col: 7,
+      },
+      offset: {
+        top: 50,
+        left: 60,
+      },
+      padding: 10,
+    };
+  }
+  // ...
 }
 ```
 
@@ -121,35 +133,41 @@ Each `brickX` position is worked out as `bricksLayout.width` plus `bricksLayout.
 Here is the complete code for the `initBricks()` function:
 
 ```js
-initBricks () {
-  const bricksLayout = {
-    width: 50,
-    height: 20,
-    count: {
-      row: 3,
-      col: 7,
-    },
-    offset: {
-      top: 50,
-      left: 60,
-    },
-    padding: 10,
-  };
-
-  this.bricks = this.add.group();
-  for (let c = 0; c < bricksLayout.count.col; c++) {
-    for (let r = 0; r < bricksLayout.count.row; r++) {
-      const brickX =
-        c * (bricksLayout.width + bricksLayout.padding) + bricksLayout.offset.left;
-      const brickY =
-        r * (bricksLayout.height + bricksLayout.padding) + bricksLayout.offset.top;
-
-      const newBrick = this.add.sprite(brickX, brickY, "brick");
-      this.physics.add.existing(newBrick);
-      newBrick.body.setImmovable(true);
-      this.bricks.add(newBrick);
+class Example extends Phaser.Scene {
+  // ...
+  initBricks() {
+    const bricksLayout = {
+      width: 50,
+      height: 20,
+      count: {
+        row: 3,
+        col: 7,
+      },
+      offset: {
+        top: 50,
+        left: 60,
+      },
+      padding: 10,
+    };
+
+    this.bricks = this.add.group();
+    for (let c = 0; c < bricksLayout.count.col; c++) {
+      for (let r = 0; r < bricksLayout.count.row; r++) {
+        const brickX =
+          c * (bricksLayout.width + bricksLayout.padding) +
+          bricksLayout.offset.left;
+        const brickY =
+          r * (bricksLayout.height + bricksLayout.padding) +
+          bricksLayout.offset.top;
+
+        const newBrick = this.add.sprite(brickX, brickY, "brick");
+        this.physics.add.existing(newBrick);
+        newBrick.body.setImmovable(true);
+        this.bricks.add(newBrick);
+      }
     }
   }
+  // ...
 }
 ```
 

files/en-us/games/tutorials/2d_breakout_game_phaser/buttons/index.md

@@ -101,10 +101,14 @@ First, we call `setInteractive` on the button to make it respond to pointer even
 Now, we need to define the `startGame` method referenced in the code above:
 
 ```js
-startGame () {
-  this.startButton.destroy();
-  this.ball.body.setVelocity(150, -150);
-  this.playing = true;
+class Example extends Phaser.Scene {
+  // ...
+  startGame() {
+    this.startButton.destroy();
+    this.ball.body.setVelocity(150, -150);
+    this.playing = true;
+  }
+  // ...
 }
 ```
 
@@ -117,10 +121,14 @@ Finally for this section, go back into your `create` method, find the `this.ball
 It works as expected, but we can still move the paddle when the game hasn't started yet, which looks a bit silly. To stop this, we can take advantage of the `playing` variable and make the paddle movable only when the game has started. To do that, adjust the `update` function like so:
 
 ```js
-update () {
+class Example extends Phaser.Scene {
   // ...
-  if (this.playing) {
-    this.paddle.x = this.input.x || this.scale.width * 0.5;
+  update() {
+    // ...
+    if (this.playing) {
+      this.paddle.x = this.input.x || this.scale.width * 0.5;
+    }
+    // ...
   }
   // ...
 }

files/en-us/games/tutorials/2d_breakout_game_phaser/collision_detection/index.md

@@ -16,18 +16,26 @@ Now onto the next challenge — the collision detection between the ball and the
 The physics engine makes everything a lot easier — we just need to add two simple pieces of code. First, add a new line inside your `update` method that detects a collision between the ball and bricks, as shown below:
 
 ```js
-function update() {
-  this.physics.collide(this.ball, this.paddle);
-  this.physics.collide(this.ball, this.bricks, this.hitBrick);
-  paddle.x = game.input.x || game.world.width * 0.5;
+class Example extends Phaser.Scene {
+  // ...
+  update() {
+    this.physics.collide(this.ball, this.paddle);
+    this.physics.collide(this.ball, this.bricks, this.hitBrick);
+    paddle.x = game.input.x || game.world.width * 0.5;
+  }
+  // ...
 }
 ```
 
 The ball's position is calculated against the positions of all the bricks in the group. The third, optional parameter is the function executed when a collision occurs — `hitBrick`. Create this new function as the last method of the `Example` class, just before the closing brace `}`, as follows:
 
 ```js
-hitBrick (ball, brick) {
-  brick.destroy();
+class Example extends Phaser.Scene {
+  // ...
+  hitBrick(ball, brick) {
+    brick.destroy();
+  }
+  // ...
 }
 ```
 

files/en-us/games/tutorials/2d_breakout_game_phaser/extra_lives/index.md

@@ -115,20 +115,28 @@ if (ballIsOutOfBounds) {
 We want to decrease the number of lives every time the ball leaves the canvas. Add the `ballLeaveScreen()` method definition at the end of the `Example` class:
 
 ```js
-ballLeaveScreen () {
-  this.lives--;
-  if (this.lives > 0) {
-    this.livesText.setText(`Lives: ${this.lives}`);
-    this.lifeLostText.visible = true;
-    this.ball.body.reset(this.scale.width * 0.5, this.scale.height - 25);
-    this.input.once("pointerdown", () => {
-      this.lifeLostText.visible = false;
-      this.ball.body.setVelocity(150, -150);
-    }, this);
-  } else {
-    alert("Game over!");
-    location.reload();
+class Example extends Phaser.Scene {
+  // ...
+  ballLeaveScreen() {
+    this.lives--;
+    if (this.lives > 0) {
+      this.livesText.setText(`Lives: ${this.lives}`);
+      this.lifeLostText.visible = true;
+      this.ball.body.reset(this.scale.width * 0.5, this.scale.height - 25);
+      this.input.once(
+        "pointerdown",
+        () => {
+          this.lifeLostText.visible = false;
+          this.ball.body.setVelocity(150, -150);
+        },
+        this,
+      );
+    } else {
+      alert("Game over!");
+      location.reload();
+    }
   }
+  // ...
 }
 ```
 

files/en-us/games/tutorials/2d_breakout_game_phaser/load_the_assets_and_print_them_on_screen/index.md

@@ -24,8 +24,12 @@ ball;
 Loading images and printing them on our canvas is a lot easier using Phaser than using pure JavaScript. To load the asset, we will use the `Phaser.Scene`'s `load.image` method, available as `this.load.image`. Add the following new line just the `preload()` method:
 
 ```js
-preload () {
-  this.load.image('ball', 'img/ball.png');
+class Example extends Phaser.Scene {
+  // ...
+  preload() {
+    this.load.image("ball", "img/ball.png");
+  }
+  // ...
 }
 ```
 
@@ -36,8 +40,12 @@ Of course, to load the image, it must be available in our code directory. [Grab
 Now, to show it on the screen we will use another `Phaser.Scene`'s method called `add.sprite`; add the following new line inside the `create()` method:
 
 ```js
-create () {
-  this.ball = this.add.sprite(50, 50, 'ball');
+class Example extends Phaser.Scene {
+  // ...
+  create() {
+    this.ball = this.add.sprite(50, 50, "ball");
+  }
+  // ...
 }
 ```
 

files/en-us/games/tutorials/2d_breakout_game_phaser/physics/index.md

@@ -43,9 +43,13 @@ this.ball.body.setVelocity(150, 150);
 Remember to remove our old method of adding values to `x` and `y` from the `update` method:
 
 ```js
-update () {
-  ball.x += 1;
-  ball.y += 1;
+class Example extends Phaser.Scene {
+  // ...
+  update() {
+    ball.x += 1;
+    ball.y += 1;
+  }
+  // ...
 }
 ```
 

files/en-us/games/tutorials/2d_breakout_game_phaser/player_paddle_and_controls/index.md

@@ -20,16 +20,23 @@ From the framework point of view the paddle is very similar to the ball — we n
 First, add the `paddle` property we will be using in our game, right after the `ball` property:
 
 ```js
-paddle;
+class Example extends Phaser.Scene {
+  ball;
+  paddle;
+  // ...
+}
 ```
 
-Then, in the `preload` function, load the `paddle` image by adding the following new `load.image()` call:
+Then, in the `preload` method, load the `paddle` image by adding the following new `load.image()` call:
 
 ```js
-function preload() {
-  // …
-  this.load.image("ball", "img/ball.png");
-  this.load.image("paddle", "img/paddle.png");
+class Example extends Phaser.Scene {
+  // ...
+  preload() {
+    this.load.image("ball", "img/ball.png");
+    this.load.image("paddle", "img/paddle.png");
+  }
+  // ...
 }
 ```
 

files/en-us/games/tutorials/2d_breakout_game_phaser/randomizing_gameplay/index.md

@@ -16,9 +16,13 @@ Our game appears to be completed, but if you look close enough you'll notice tha
 We can change the ball's velocity depending on the exact spot it hits the paddle, by modifying the `x` velocity each time the `hitPaddle` method is run using a line along the lines of the below. Add this new line to your code now, and try it out.
 
 ```js
-hitPaddle (ball, paddle) {
-  this.ball.anims.play('wobble');
-  ball.body.velocity.x = -5 * (paddle.x - ball.x);
+class Example extends Phaser.Scene {
+  // ...
+  hitPaddle (ball, paddle) {
+    this.ball.anims.play('wobble');
+    ball.body.velocity.x = -5 * (paddle.x - ball.x);
+  }
+  // ...
 }
 ```
 

files/en-us/games/tutorials/2d_breakout_game_phaser/the_score/index.md

@@ -50,10 +50,14 @@ The last parameter looks very similar to CSS styling. In our case the score text
 We will increase the number of points every time the ball hits a brick and update the `scoreText` to display the current score. This can be done using the `setText` method — add the two new lines seen below to the `hitBrick` method:
 
 ```js
-hitBrick (ball, brick) {
-  brick.destroy();
-  this.score += 10;
-  this.scoreText.setText(`Points: ${this.score}`);
+class Example extends Phaser.Scene {
+  // ...
+  hitBrick (ball, brick) {
+    brick.destroy();
+    this.score += 10;
+    this.scoreText.setText(`Points: ${this.score}`);
+  }
+  // ...
 }
 ```