Slot Machine Demo (Made with Cocos Creator)

Using Cocos Creator to make a simple slot machine demo for job interview purpose.

Generate reels and symbols 

There are 5 reels. For each reel, there are 32 stops. 

Initially, generate 32 stops growing upwards.

Use the mask component on the board node to create a rectangular rendered mask to hide the stops outside the board. 

Note that all child nodes will only appear inside the mask's boundary.

Move symbols in cycle

For every stop, move downwards every frame, 

Once it moves below the bottom border of the board, rest its position to the tail of the 32 stops, 

which is the current tail stop’s position plus (padding + stopHeight), then set this stop as the new tail stop.

This way, the 32 stops on each reel will spin in cycle.

Stop spinning at the winning symbol

This is a slot machine demo with a single pay line placed at the center of the reel's container.

When the reel is rolling its last round, when the winning symbol position just passed the pay line, the spinning will be stopped.

In order to place the center of the winning symbol exactly on the winning line, each stop’s Y position will be readjusted by subtracting an amount equal to:

deltaY=winningSymbol.y-payLineY

Each reel’s winning symbol’s index from 0 to 31 will be generated by Random Number Generator (RNG)     

Listening for all reels finishing spinning

in game.js, set up listeners for “spin-completed” events dispatched from each reel.

        this.node.on(spin-completed', function (event) {

            // counts all the reels that completed the spin

            that.spinCompletedCount++;

        })

This is something like the Observer pattern where we set up event registers on game object nodes.

The benefit of this design pattern is that the class who dispatched the event doesn’t need to manage which classes need to do certain reactions to this event,

and these classes who registered listener to this event will manage their own triggering logic.