Simon Game – 1 Hour Game – Phaser

The 1 Hour Game -Simon Game

Sometimes I want to challenge myself to write a game in just 1 hour. Obviously, this does limit what games I can make, but that doesn’t mean the game is just an experiment. My brothers and sisters and I would fight over the Simon Game when I was a kid. If you are too young to know what it is, it was a big plastic circle with 4 buttons that would light up, and you’d have to match the pattern of the song it played.

I will probably adapt this game to use for my work at Gaiaonline, or use it for a new Udemy course. There are plenty of times when I am asked to do quick games, on a low budget and not much time. If you are a game developer you will know this is commonplace.

I set the timer for one hour and made the core logic in 45 minutes. I did use the mega template to complete the game. That does highlight having a good code library at your disposal.

The Simon Game

The Code

var StateMain = {
    preload: function() {
    create: function() {
        //define an array to hold the random song
        this.songArray = [];
        //define the notes and sound effects
        var note1 ="note1");
        var note2 ="note2");
        var note3 ="note3");
        var note4 ="note4");
        this.bang ="bang");
        //play the notes on an array for easy indexing
        this.noteArray = [note1, note2, note3, note4];
        //lock the click for while the song is playing
        this.clickLock = true;
        //make the blocks
        var red = this.getBlock(0);
        var blue = this.getBlock(1);
        var yellow = this.getBlock(2);
        var green = this.getBlock(3);
        //put the blocks in a group
        //this will make it easy to center all the blocks
        this.blocks =;
        //position the blocks
        //all the postions were set at 0
        //so we just need to set some of the positions
        blue.x = 250;
        yellow.y = 250;
        green.y = 250;
        green.x = 250;
        //make the blocks 80% of the width of the screen
        this.blocks.width = game.width * .8;
        //scale the height to match the width
        this.blocks.scale.y = this.blocks.scale.x;
        //center the blocks on the screen
        this.blocks.x = game.width / 2 - this.blocks.width / 2;
        this.blocks.y = game.height / 2 - this.blocks.height / 2;
        //alpha the blocks
        //add a note to the song
        //play the song
     * [getBlock make a sprite, and add the click listener]
     * @param  {[type]} frame [this is the color of the block]
     * @return {[group]}   
    getBlock: function(frame) {
        var block = game.add.sprite(0, 0, "squares");
        block.frame = frame;
        block.inputEnabled = true;, this);
        return block;
     * [resetBlocks turn all the blocks to 20% alpha]
     * @return {[none]}
    resetBlocks: function() {
        this.blocks.forEach(function(block) {
            block.alpha = .2;
     * [addToSong push a random note on the songArray]
    addToSong: function() {
        var s = game.rnd.integerInRange(0, 3);
    playSong: function() {
        //set the playIndex to negative one
        this.playIndex = -1;
        //start the timer to play the notes
        this.songTimer =, this.nextNote, this);
    nextNote: function() {
        //alpha the blocks
        //advance the playIndex
        //we start at -1 so the first time the playIndex will be 0
        //if the play index is equal to the songArray length then
        //song is over
        if (this.playIndex == this.songArray.length) {
            this.clickLock = false;
            this.clickIndex = 0;
        //get the number of the note from the song
        var note = this.songArray[this.playIndex];
        //play the note
    playNote: function(note) {
        //get the sound object from the note array
        var sound = this.noteArray[note];;
        //get the block that goes with the sound
        var block = this.blocks.getChildAt(note);
        //light it up!
        block.alpha = 1;
        //turn off the lights after a 1/4 of a second delay / 4, this.resetBlocks, this);
    clickBlock: function(target) {
        //if the song is playing return
        if (this.clickLock == true) {
        //get the frame from the square clicked
        var index = target.frame;
        //if the index is equal to the number
        //in the songArray then the user
        //has pressed the right notes
        if (index == this.songArray[this.clickIndex]) {
            //get the note from the songArray
            var note = this.songArray[this.clickIndex];
            //play the note
            //if the clickIndex is equal to the songArray length we have
            //reached the end of the song
            if (this.clickIndex == this.songArray.length) {
                this.clickLock = true;
                this.playIndex = -1;
        } else {
            //wrong note!
            //Game Over
            this.clickLock = true;
    update: function() {}

Simon Game – Source Code


Leave a Comment