Handling pointer events with Phaser

After we filled the board with bubbles, we need to define user event handlers. We should detect when the user touches the bubble, moves it, and releases it. We should handle both types of events: generated by mouse and by fingers. We have to handle three different events. Let's define three different functions to handle these events:

• selectBubble

• slideBubble

• releaseBubble

First, let's look at the select and release event handlers. We should attach them to each bubble we have on the stage. We can do this when we spawn the board. Let's add the following lines of code to the spawning loop in the spawnBoard() function:

bubble.inputEnabled = true;
bubble.events.onInputDown.add(selectBubble, this);
bubble.events.onInputUp.add(releaseBubble, this);

We enabled bubble for input and attached our event handlers to the onInputDown and onInputUp events, which are explained here:

• onInputDown – This is dispatched when the down event from a pointer is received. The sprite...