CYBER WEEK SALE: Get 50% off your Pro annual membership using code [CYBER23](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=CYBER23)


In this lesson, you'll build out an entire game that uses physics!

Learn Phaser: Physics

Great job using Phaser's Arcade physics plugin to make an entire game! 

In this exercise we covered:
* Creating sprites that are affected by physics.
* Creating groups of sprites affected by physics.
* Creating groups of sprites NOT affected by physics.
* Adding Colliders objects between sprites and groups of sprites.
* Creating a loop to continuously execute a function.
* Pausing physics.
* Restarting a Scene.  

See what else you can do! 


Review

Let's jump right in and make a sprite. We've made sprites before using the method `this.add.sprite()`, but this time around, we're going to use `this.physics.add.sprite()` and have our sprite affected by physics! In this case, our sprite will feel the effects of gravity.

The method `this.physics.add.sprite()` takes 3 arguments:
* The first argument sets the x-coordinate of the sprite's center.
* The second argument sets the y-coordinate of the sprite's center.
* The third argument is the key of the image loaded in the `preload()` function. 

Here's the actual syntax:
```js
function create() {
  this.physics.add.sprite(320, 300, 'player');
}
```

In the example above, we create a `'player'` sprite with its center at the coordinate (320, 300) that will follow the physics of our game. The sprite created from the example above will continue to fall indefinitely. Let's see this in action for ourselves! 


Adding a Sprite

Until we can telepathically instruct characters in games, we need physical controls to direct our player characters on how to move. 

One way we can implement controls is by using Phaser's `this.input.keyboard.createCursorKeys()` method to create a useful object for keyboard inputs. The created object has properties `up`, `down`, `left`, `right`, `space`, and `shift` that are directly related to the keyboard keys. We can also access the `.isDown` property to the key to see if it is pressed. If the key is pressed, we can change the horizontal velocity of a GameObject by using the `.setVelocityX()` method. For instance: 

```js
function create() {
  // Previous code ...
  gameState.cursors = this.input.keyboard.createCursorKeys();
}

function update() {
  if (gameState.cursors.left.isDown) {
    heroSprite.setVelocityX(-160);
  } else if (gameState.cursors.right.isDown) {
    heroSprite.setVelocityX(160);
  } else {
    heroSprite.setVelocityX(0);
  }
}
```

In our `create()` function, we created the `cursors` object using `this.input.keyboard.createCursorKeys()`. Then, in `update()`, we added conditionals to check if the left arrow key is being pressed (`cursors.left.isDown`) or if the right arrow key is being pressed (`cursors.right.isDown`). If the left arrow key is pressed we set the horizontal velocity using `setVelocityX()` with an argument of `-160` to move the sprite left. The opposite happens when the right arrow key is pressed, we call `.setVelocityX(160)` on `heroSprite` and it moves to the right. If neither keys are pressed, we set the velocity to zero and the sprite does not move.


Adding Controls and Velocity

It's great to see our score increase, but it doesn't mean much if there's no way to lose. One common losing condition is when a player sprite collides with an enemy sprite. This means we need to include another Collider object with a callback in `create()`: 

```js
this.physics.add.collider(player, enemies, () => {
  // Logic to end the game
});
```

For our game, it ends when the player sprite a bug collide. When this event happens we also want certain things to stop. For instance, we don't want our game to continue creating bugs. We could call `.destroy()` on the loop that creates our bugs. Another thing we would want to stop is the physics of our game. To put a pause on physics, we call `this.physics.pause()`. 

In the code example above, notice the use of an arrow function (`() => {}`) for a callback instead of anonymous function (`function() {}`). The reason for using an arrow function is that it implicitly binds `this`. We know that we want to call `this.physics.pause()` and we need `this` to reference the Scene object. Therefore, we use an arrow function to bind `this` as the Scene object. To read more about arrow functions and `this`, check out [MDN's arrow function documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)

Let's see how this works in our code! 


Losing Condition

We're gonna get that player sprite to land on some steady ground. But first, we need to create a ground platform! This ground platform will not be affected by gravity but we want it to interact with the player sprite. Therefore, we can't use `this.add.image()` like we do for our background image since images aren't affected by physics and don't interact with GameObjects. 

What we need is `this.physics.add.staticGroup()` to create a _Group object_ which keeps track of our platforms. Group objects are used to create and maintain sprites in a group. In this case, we can use this Group object to create additional platforms:

```js
function create() {
  const platforms = this.physics.add.staticGroup();
  platforms.create(320, 350, 'platform');
}
```

From the example above, we've created a static Group Object and saved it to the `platforms` variable. Our `platforms` won't be affected by the game's gravity. Then, we call `platforms.create()` with these 3 arguments: 
* The first argument is the x-coordinate of the sprite's center.
* The second argument is the y-coordinate of the sprite's center.
* The last argument is the `key` of the sprite's image.

Let's add this platform for Codey!


Adding Static Groups

At this point, we have a controllable player sprite, a platform, and a collider set up. Let's make some enemies! 

Unlike the player sprite, we probably want multiple enemies to triumph over. And unlike the platform, we should have physics affect them. Once again, Phaser has a handy method for us, `this.physics.add.group()` which returns a Group object that we can use to organize multiple enemy sprites. For instance:

```js
function create() {
  const enemies = this.physics.add.group();
  enemies.create(320, 10, 'enemy');  
} 
```

From the example above we called `this.physics.add.group()` and assigned it to a variable, `enemies`. Then we call `enemies.create(320, 10, 'enemy')` to create one sprite centered at the coordinates (320, 10) using the `'enemy'` key. 

But with our current code, we know that our enemy will always appear at the coordinates (320, 10). That's not much of challenge. Instead, we can randomize where this enemy's x-coordinate using `Math.random()` and multiply that value by the width of the screen. The logic being:
* `Math.random()` returns a value  from 0 to 1, e.g. `0.12418156798374347`. 
* When we multiply the value from `Math.random()` with the width of the screen (in pixels), we get a value that is between from 0 (left-hand side) to the width of the game(right-hand side). 
* The product is a random x-coordinate that is always on the screen.

Our updated code: 
```js
function create() {
  const enemies = this.physics.add.group();
  const xCoordinate = Math.random() * 450;
  enemies.create(xCoordinate, 10, 'enemy');  
} 
```

Since we want to create multiple enemy sprites, we can use a function to  house the logic for enemy creation: 

```js
function create() {
  const enemies = this.physics.add.group();
  function generateEnemy () {
    const xCoordinate = Math.random() * 450;
    enemies.create(xCoordinate, 10, 'enemy');  
  }
} 
```

With our updated code, we can create an enemy sprite every time we call `generateEnemy()`. Let's bring this logic into our game! 


Adding Enemies

"I wonder if my character will make that jump…" - Every gamer ever.

Figuring out the rules of a video game is a one of the joys of starting a new game. We wonder how fast our character can go, or how high it jumps, or what happens when it touches an enemy sprite. As a game developer, implementing these rules is about deciding the _physics_ of our game. The physics of a game determines how GameObjects interact with the game world.

In this lesson, we'll be using one of Phaser's built-in physics plugin to create a game with set rules and interactions! 


Building a Phaser game with Physics

One thing we're still missing from our game is a scoring system to motivate our players. We can store our score as property in the `gameState` object and increase it as the game progresses. To display the score we can call `this.add.text()`. We should also consider when we want to increase the score, e.g. increase the score every 10 seconds, or each time an enemy is generated, or how much the player sprite moves, etc...

For our game, we could increase the score each time the player sprite dodges a bug. When a player dodges a bug, it collides with the platform, so we can add our logic in that Collider object. Let's do that now!

When a game starts we should set a new property with a key of  `score` and value of `0` in the `gameState` object like so:

```js
const gameState = { score: 0 };
```

We'll also need `gameState` to display the score on screen. In `create()` we would add:

```js
gameState.scoreText = this.add.text(16, 16, 'Score: 0', { fontSize: '15px', fill: '#000000' })
```

Now we can access `gameState.scoreText` and change the text to display the increased score. Since we want to increment `gameState.score` when a bug collides with the ground platform, we need to add that logic to our ColliderObject:

```js
this.physics.add.collider(bugs, platforms, function (bug){
  bug.destroy();
		
  gameState.score += 10;
  gameState.scoreText.setText(`Score: ${gameState.score}`)
})
```

Let's incorporate this into our game! 


Adding a score

Once a game ends, we should allow players to restart and try again! Phaser has a convenient method to solve this issue: `this.scene.restart()`.

Like the method's name implies, `this.scene.restart()`, restarts the Scene.

We should also consider when we want to restart the scene, each game has different criteria. For our game, we want this option to be available after the player sprite has collided with a bug. We should also give our players an option to restart when they choose to. 

One way to implement this logic is to add on to the callback function of the player and bugs Collider object. We'll add an event listener for a mouse click, or `'pointerup'` event. When this event occurs, then we'll restart the Scene. Let's add this feature in.


Resetting A Scene

Currently, our game creates a few enemy sprites and stops. But we could create a loop to consistently create more enemies to make the game more challenging. To implement this loop we can call `this.time.addEvent()` and pass in an object with specifications for how we want this loop to run. For instance:

```js
function create() {
  function generateEnemy () { 
    // Code to create an enemy sprite
  }
  const enemyGenLoop = this.time.addEvent({
    callback: generateEnemy,
    delay: 100,
    callbackScope: this,
    loop: true,
  })
} 
``` 

In our example, we accessed the Scene's `time` property and called `.addEvent()` with an object representing the event we want called. That object has 4 keys that each provide different specifications:
* `callback` has a value of `generateEnemy` which means this event will call `generateEnemy()` function.
* `delay` has a value of `100`, which determines, in milliseconds, how long is the delay before executing the callback again.
* `callbackScope` has a value of `this`, which selects the Scene this event is used in. 
* `loop` has a value of `true`, which means that this event will continue to execute until we remove it. 

For more information about timed events, look over <a href="https://rexrainbow.github.io/phaser3-rex-notes/docs/site/timer/#start-timer">RexRainbow's comprehensive Phaser documentation</a>!


Timed Events

We have a platform sprite, we have a player sprite, but they're not interacting with each other! What's missing? Remember, our physics plugin determines how GameObjects interact. The way to decide these interactions is to create a _Collider_ object that checks if two GameObjects bump into each other. 

To set a Collider object we need to call `this.physics.add.collider()`. The `.collider()` method takes three arguments (the last one  argument is optional). The first two arguments are the GameObjects (or Group objects) that collide. Here's an example of a collider with two arguments: 

```js
function create() {
  const player = this.physics.add.sprite(100, 100, 'player');
  const platform = this.physics.add.sprite(100, 500, 'platform');
  this.physics.add.collider(player, platform);
}
```

In the example above, we created a Collider object by calling `this.physics.add.collider(player, platform)`. Now, the `player` and `platform` objects don't overlap when they bump into each other.

While we're on the topic of collisions, we can call the `.setCollideWorldBounds(true)` for GameObjects that we want to stay inside the screen of the game. For example, calling `player.setCollideWorldBounds(true)` will make it so the player sprite can't fall off the screen! 


Detecting Collisions

In the previous exercise, we saw our sprite carried away by our game's gravity. The reason we were able to implement gravity was through the use of a _physics plugin_ which decides how GameObjects interact with each other. The plugin we're going to use is Phaser's Arcade physics plugin &mdash; this plugin is great for adding gravity to our game and detecting collisions.

To add the Arcade physics plugin to our `config` object, we need to add a `physics` property and provide additional specifications in its value: 

```js
const config = {
  // ...
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300 },
      debug: true
    }
  }
};
```

Notice that in the value of our `physics` property, our object has two keys, `default` and `arcade`.
* `default` has a value of `'arcade'` which tells Phaser to use the Arcade physics plugin.
* `arcade` is another object that contains details about how we want the Arcade physics to work. The `arcade` object has two keys:
  * `gravity` which is set to `{ y: 300 }` to assign a downward gravity. (The value 300 is based on personal preference, the higher the number, the stronger the effect of gravity is)
  * `debug` with a value of `true` to see the outline of objects in our game and their velocity.

When we call `this.physics.add.sprite()`, we're actually telling Phaser's physics plugin to create our sprite for us and have this sprite follow the physics of the game. 


Implementing Physics

Our enemy sprites threaten to take over our game if we don't remove them! We're going to need to use Phaser's `.destroy()` method to remove enemy sprites from our game. 

Let's first take a second to consider when we want our enemies removed. For our game, bugs should disappear when they hit the ground. Therefore, we need a Collider for `enemies` and `platforms`. Unlike the one we previously created, this Collider takes a third argument of a callback function. 

```js
function create() {
  // … 
  this.physics.add.collider(enemies, platforms, function(singleEnemy) {
    singleEnemy.destroy();
  });
}
```

In our example, we called `this.physics.add.collider()` with three arguments:
* The first two arguments are Group objects, `enemies` and `platforms`.
* The third argument is a callback function that has a parameter, `singleEnemy`:
  * The ordering of the callback function's parameter corresponds to the ordering of `.collider()`'s first two arguments.
  * We call `singleEnemy.destroy()` which will remove the enemy's sprite when it collides with a platform. 

Let's use this logic to remove bug sprites as they hit the ground.
