https://github.com/mtapirina/color_a_pegasus

COLOR A PEGASUS - Codecademy Phaser JS Lesson
https://github.com/mtapirina/color_a_pegasus

codecademy-courses codecademy-pro coloring-book game phaser3 phaserjs

Last synced: about 12 hours ago
JSON representation

COLOR A PEGASUS - Codecademy Phaser JS Lesson

• Host: GitHub
• URL: https://github.com/mtapirina/color_a_pegasus
• Owner: mtapirina
• Created: 2023-10-24T12:30:35.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-24T23:59:21.000Z (about 1 year ago)
• Last Synced: 2024-11-11T16:57:48.596Z (about 1 month ago)
• Topics: codecademy-courses, codecademy-pro, coloring-book, game, phaser3, phaserjs
• Language: HTML
• Homepage: https://mtapirina.github.io/color_a_pegasus/
• Size: 41 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# COLOR A PEGASUS 

## Codecademy Phaser JS Lesson

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

_In this lesson we’re going to build:_

* Click events for the pegasus body to color in each section with a new color.

* Click events for the palette to update the current color choice.

* Hover events for the pegasus body to indicate the part of the pegasus to be clicked.

* Hover events for the palette to show when a color is being selected (and to indicate which color is selected).

  

### Coloring

We’ve been given the basic layout of our Game — 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.

### Updating Color

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.

### Indicating Selections

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 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.

### Indicating Palette Selection

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 paletteCircles!

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!

### Extra:

* Add a new color to the palette.

* Color in the background as well as the pegasus.