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.
Instructions
In game.js find the create() function. Near line 10 there is a for loop where we iterate over each shape in pegasusShapes. Inside that for loop some commands have been written to describe the presentation of the pegasus itself. This is where we set the strokeColor and the lineWidth of the shape, among other things. We want to follow this up by defining the shape’s interactability.
Make each shape in this loop interactive by calling .setInteractive() on it.
When one of the shapes is clicked on we should update its fillColor to be the active color that we keep track of in our gameState. We’ll work on updating that active color later, but for now we start with a default in gameState.selectedColor.
Start by creating a handler for each shape on 'pointerup'.
Inside our 'pointerup' callback handler, update this.fillColor (the fill color of the shape that’s been clicked) to be gameState.selectedColor.