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)


This course covers the basic Phaser operations to make an interactive game out of GameObjects.

Learn Phaser Basics: Color a Pegasus

Now that we can change the color of our pegasus, let's get to work on making that palette selector functional. When we click on a color, we want that to become the selected color.

We need to use a third argument to our event handler method `.on()`, where we give extra context to be used within our event handler. We want each circle in our color palette, `paletteCircle`, to be aware of the color that it indicates so that it can update `gameState.selectedColor`. The syntax for our event context is this:

```js
// important number we want to use
const importantNumber = 10;

// pointer event handler where we want
// to use our important number
gameObject.on('pointerup', function() {
  this.gameObject.x = this.importantNumber
}, { importantNumber, gameObject });
```

Above we created `importantNumber` to be some important piece of data that we wanted to use inside our event handler. We call `gameObject.on('pointerup')` to create an event handler for the `gameObject` click event. 

Inside the event handler, `this` refers to our `gameObject` unless the third argument is present, which is the _context_. Since we provide a third argument, `this` now has the properties `.importantNumber` and `.gameObject` which are accessed using `this.importantNumber` and `this.gameObject`. 

In the code above we update the `x` value of `gameObject` to be whatever value is inside of `importantNumber`.But since `this` doesn't refer to the `gameObject` anymore, we need to pass that into the context given by that third argument as well.

As we continue to create games of greater complexity, knowing the value of `this` makes our game development easier. In this case, by explicitly providing a third argument in our event handler we know exactly what `this` is. Therefore, we've also improved the readability of our code because other developers would also know what `this` is within our handler. When we, and other developers on our team, understand our code it makes debugging or adding new features quicker and smoother. 

Updating Color

In this lesson we're going to provide functionality to make our first game, a coloring-book game called Color a Pegasus.

Introduction

Congratulations! You made your first game, **Color a Pegasus**! Over the course of this lesson you created the sequence of event handlers to:
 - Own and update the state of the game.
 - Update the color of specific parts of the pegasus in the game
 - Highlight GameObjects to indicate what will be clicked on

You've displayed a lot of control over the possible mouse cursor events and successfully used that control to build a coloring game! Good job!

Review

Our game is a lot more playable now that people know what they're clicking on, but how can we keep track of what color is currently active? By adding relevant hover events to our `paletteCircle`s!

Indicating Palette Selection

We've been given the basic layout of our Game &mdash; it's up to us, the game developer, to provide the part of our game that makes it playable. We need to create the _mechanics_ of the game, the part that makes it more than a picture of a pegasus.

Coloring

Coloring the pegasus is great, the "playing" aspect of our game is figured out, but we need to consider our presentation. If we want someone playing our game to know where to click and how to actually color in the pegasus, we're going to need to work on the interface. 

You may have noticed that clicking on some parts of the pegasus don't perfectly line up with the shapes. This has to do with how the shapes are stacked on top of each other. There's a lot of ways to fix that potentially, but a solution that will work well is giving the person playing the game some insight into what part of the Pegasus will be colored after they click.

We're going to use the [screen blend mode](https://en.wikipedia.org/wiki/Blend_modes#Screen) to indicate which part of the Pegasus is going to be selected. Blend modes dictate how a filled-in shape interacts with the other shapes visible, somewhat like changing the opacity and color of the shape. The result will be that our highlighted section will turn semi-transparent and white with a white outline.