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() {
        game.load.spritesheet("squares","images/squares.png",250,250);
        game.load.audio("note1","audio/1.mp3");
        game.load.audio("note2","audio/2.mp3");
        game.load.audio("note3","audio/3.mp3");
        game.load.audio("note4","audio/4.mp3");
        game.load.audio("bang","audio/bang.mp3");
    },
    create: function() {
        //define an array to hold the random song
        this.songArray = [];
        //define the notes and sound effects
        var note1 = game.add.audio("note1");
        var note2 = game.add.audio("note2");
        var note3 = game.add.audio("note3");
        var note4 = game.add.audio("note4");
        this.bang = game.add.audio("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 = game.add.group();
        this.blocks.add(red);
        this.blocks.add(blue);
        this.blocks.add(yellow);
        this.blocks.add(green);
        //
        //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
        this.resetBlocks();
        //add a note to the song
        this.addToSong();
        //play the song
        this.playSong();
    },
    /**
     * [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;
        block.events.onInputDown.add(this.clickBlock, 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);
        this.songArray.push(s);
    },
    playSong: function() {
        //set the playIndex to negative one
        this.playIndex = -1;
        //start the timer to play the notes
        this.songTimer = game.time.events.loop(Phaser.Timer.SECOND, this.nextNote, this);
    },
    nextNote: function() {
        //alpha the blocks
        this.resetBlocks();
        //advance the playIndex
        //we start at -1 so the first time the playIndex will be 0
        this.playIndex++;
        //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;
            game.time.events.remove(this.songTimer);
            return;
        }
        //get the number of the note from the song
        var note = this.songArray[this.playIndex];
        //play the note
        this.playNote(note);
    },
    playNote: function(note) {
        //get the sound object from the note array
        var sound = this.noteArray[note];
        sound.play();
        //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
        game.time.events.add(Phaser.Timer.SECOND / 4, this.resetBlocks, this);
    },
    clickBlock: function(target) {
        //if the song is playing return
        if (this.clickLock == true) {
            return;
        }
        //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
            this.playNote(note);
            this.clickIndex++;
            //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;
                this.addToSong();
                this.playSong();
                return;
            }
        } else {
            //wrong note!
            //Game Over
            this.bang.play();
            this.clickLock = true;
            game.state.start("StateOver");
        }
    },
    update: function() {}
}

simon game source code

Leave a Reply

Your email address will not be published. Required fields are marked *