Thursday, 18 October 2012

Simons Says game in Actionscript 3

In this tutorial I will show you how to create a Simon Says game in Actionscript 3. Simon Says is a memory game where you have to select a random sequence of coloured buttons. To begin, you select one coloured button in sequence. As the game progresses more coloured buttons are added to the sequence to increases the difficulty of the game. The game ends when you select the wrong button in the sequence. I will be using the TweenMax class, so ensure you have downloaded this class from: greensock.com.


Step 1 – Set up file

Open a new AS3 file with the stage dimensions 300 x 250 pixels and save the file with name ‘SimonSays’. Then open a new AS3 class file and save it with the name: ‘SimonSays’. Set the Document class to: ‘SimonSays’ class file.


Step 2 – Create buttons

Create four shapes for the buttons. I have a red, green, yellow, and blue coloured buttons. The hex colour values are: #FF0000, #00FF00, #FFFF00 and #0000FF.

Convert the buttons into movie clips (F8) and give them the instance names accordingly: redColour, greenColour, yellowColour and blueColour.


Step 3 – Add text fields

The text field will hold the correct number of guesses for our game. Select the text tool with dynamic text and create a dynamic text field on the stage. The numerical character glyphs will need to be embedded for the numbers to appear in the text fields, so select the ‘Embed’ button from the Characters panel and choose the numerical character glyphs. Then give your dynamic text field the instance name: guessTxt.


Step 4 – Play button

The play button will prompt the user to start the game. Select the text tool with static text and type the message: ‘Click to play’. Convert the text field into a button symbol (F8) with the instance name: playBtn.


Step 5 – Actionscript code

In the SimonSays class file add the following below. This code imports the necessary class files, variables and constructor code. In the constructor the coloured button movie clips are added to the coloursArray, click events are added to the buttons and the guess text field is hidden and a click event is added to the play button.

package  
{
 import flash.utils.Timer;
 import flash.events.TimerEvent;
 import flash.events.MouseEvent;
 import flash.display.MovieClip;
 import com.greensock.TweenMax;
 
 public class SimonSays extends MovieClip 
 {
  private var coloursArray:Array;
  private var userArray:Array;
  private var computerArray:Array;
  private var sequenceEnd:Boolean;
  private var timer:Timer;
  private var count:uint;
  private var score:uint;
  
  public function SimonSays() 
  {
   coloursArray = new Array(redColour, greenColour, yellowColour, blueColour);
   
   for(var i:uint = 0; i < coloursArray.length; i++){
    coloursArray[i].index = i;
    coloursArray[i].buttonMode = true;
    coloursArray[i].addEventListener(MouseEvent.CLICK, buttonHandler);
   }
   
   guessTxt.text = '';
   guessTxt.visible = false;
   
   playBtn.addEventListener(MouseEvent.CLICK, playHandler);
  }
  
 }
 
}

Next add the following two functions below. The playHandler function hides the play button and calls the init() function. The init() function declares the class variables and calls the newRound() function.

private function playHandler(e:MouseEvent):void
{
 e.target.visible = false;
 init();
}


private function init():void
{
 userArray = [];
 computerArray = [];
 guessTxt.text = '0';
 guessTxt.visible = true;
 count = 0;
 score = 0;
 sequenceEnd = false;
 newRound();
}

The newRound() function adds a random number to the userArray, and the timer calls the timerHandler() function with a delay of one second a repeat count of the userArray length plus one. The timerHandler() function uses TweenMax to toggle the alpha property of the coloured button and increments the count variable if the count is less than the length of the userArray. Otherwise the userArray elements gets added to the computerArray and sequenceEnd boolean is set to true.

private function newRound():void
{
 var r:int = int(Math.random() * coloursArray.length);
 userArray.push(r);

 timer = new Timer(1000,  userArray.length + 1);
 timer.addEventListener(TimerEvent.TIMER, timerHandler);
 timer.start();
}


private function timerHandler(e:TimerEvent):void
{ 
 if(count < userArray.length){
  var value:uint = userArray[count];
  TweenMax.to(coloursArray[value], 0.3, {alpha:0.5, yoyo:true, repeat:1});
  count++;
 }else{
  computerArray = userArray.concat();
  sequenceEnd = true;
 }
}

The buttonHandler function checks if the button selected by the user matches the button in the sequence. If it matches then the next colour in the sequence is called and the score variable is increment and shown in the guess text field. Otherwise, the game ends and the guess text field is hidden and the play button is shown.

private function buttonHandler(e:MouseEvent):void
{
 if(sequenceEnd){
  
    var computerChoice:uint = computerArray.shift();
    var userChoice:uint = e.target.index;
   
    if(userChoice == computerChoice){
  
     TweenMax.to(coloursArray[userChoice], 0.3, {alpha:0.5, yoyo:true, repeat:1});
 
     if(computerArray.length == 0){
    newRound();
    count = 0;
    sequenceEnd = false;   
    score++;
    guessTxt.text = String(score);
     }
    }else{
    guessTxt.text = '';
    guessTxt.visible = false;
    playBtn.visible = true;
    }
   
  }
}

Optional

This is an optional step for adding sound effects when the button is clicked and shown in sequence. You will need four mp3 sound files. I have used farm animal sound effects.

Add the following import statements and class variable at the top of the class file. The array holds the names of the mp3 files.

import flash.media.Sound; import flash.net.URLRequest;

private var sfxArray:Array = new Array('chicken_sfx.mp3', 'cow_sfx.mp3', 'sheep_sfx.mp3', 'oink_sfx.mp3' );

Then add the playSound() function after the buttonHandler() function. This function uses the Sound class to load external sound effects, so they don’t need to be embedded into the Flash file.

private function playSound(sfx:String):void {  
var sound:Sound = new Sound();  
sound.load(new URLRequest(sfx));  
sound.play(); 
}

In the timerHandler function add the following line of code after the TweenMax code.

playSound(sfxArray[value]);

Again in the buttonHandler function add the following line of code after the TweenMax code.

playSound(sfxArray[userChoice]);


  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP