Add Event Listeners and Animation

Introduction

Now that we've created a function to load all the required images and rendered them on the canvas, let's attach an event listener so that whenever there is a mouse click, the event listener rotates the wheel. The rotation should be smooth, and should start at high speed, gradually slow down, and finally stop. This may sound complicated, but this is super easy in Phaser because of tweens. Tweens in Phaser help to add animations to objects/assets by specifying various properties to make the animation attractive.

Let's go ahead and attach an event listener, and then we'll add tween animations.

Attach the mouse click event listener

We'll attach the event listener for the pointerdown event, not the click event. This is because the pointerdown event listens for the right, the left, and the middle mouse button's clicks, whereas the click event only listens for the left click. We'll also add a text message on the canvas that will update according to whether the user wins something after spinning the wheel and what the user wins.

Now let's look at the code: