Creating a customer queue

We have created a way to make sushi. Now it's time to serve the customer. We create the customer queue in this task.

Prepare for lift off

The customer graphics is generated from Adobe Flash. It contains two frames: normal and angry. The following figure shows the two states of the customer:

The reason why we use a canvas for the customer view is because with it we can optionally add animation to both the frames. For example, an angry sprite can be an animated movie clip that animates an angry bubble.

The customer asset is generated in the assets.js file from Flash and can be found in the code bundle. The bundle also includes the source of the Flash document to easily modify the graphics.

Engage thrusters

Let's work on the following steps to add the customer and queue logic to our game:

1. In the view.js file, we define a function to set up the customer view:

   function initCustomerView() {
     // Canvas
     game.canvas = document.getElementById('canvas');
   
     game.stage = new cjs...