Saturday, 19 March 2011

Simple shooting game in AS3

In this tutorial you will learn how to create a simple shooting game in Actionscript 3. The objective of the game is to shoot the moving target on the screen. You have three tries to shoot the targets. If you manage to shot three targets without missing them, you win the game. Otherwise you lose the game. I have a used a free stock image of a bottle for the moving targets, but an image will work.


Simple shooting game in AS3


Step 1

Open a new AS3 file with the stage dimensions 500 x 120 and import an image on the stage by pressing File > Import > Import to stage. I have used an image of a beer bottle, but you can use any image. Convert the image into a movie clip (F8) and check the ‘Export for Actionscript’ button and give the identifier: Bottle. Once you have created the movie clip delete it from the stage.


Step 2

On the menu bar select Insert > New symbol select the type movie clip and give the name: shots and check the Export for Actionscript and give the identifier: Shots then click ok. In this movie clip you will create the bullets for the game, so in the first frame create three bullets. You can either create the bullets using the shape tools or import an image of a bullet. Then in the second frame remove one of the bullets. Again in the third frame remove another bullet. And finally in the fourth frame remove the last bullet. Insert a new layer on timeline call Actions and then open the Actions panel and add a stop() method. Now return to the main timeline.



Step 3

Again on the menu bar select Insert > New symbol select the type movie clip and give the name: endBox and check the Export for Actionscript and give the identifier: EndBox. This movie clip will display a message if you have won or lost the game. In the first frame create a rectangle shape with the text ‘You win’. And in the second frame create a rectangle shape with text ‘You lose’. Insert a new layer call Actions and then open the Actions panel and add a stop() method. Now return to the main timeline.


Step 4

Open a new Actionscript 3 class file and save it with the name: Shoot. Then add the following code below. Make sure you add ‘Shoot’ to the document class.
package{
 
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;

public class Shoot extends MovieClip {

private var bottleArray:Array = new Array();
private var numOfBottle:uint = 9;
private var bottleHit:uint = 0;
private var hits:uint = 6;
private var bottle:Bottle;
private var shots:Shots;
private var endBox:EndBox;
private var bg:Sprite;

 
public function Shoot() {
   
   stage.addEventListener(Event.ENTER_FRAME, enterHandler);
   
   //Adds the bottles onto the stage.
   for (var i:int = 0; i < numOfBottle; i++) {
    bottle = new Bottle();
    bottle.x = 0 + (i * 60);
    bottle.y = 14.35;
    bottle.addEventListener(MouseEvent.CLICK, clickHandler);
    addChild(bottle);
    bottleArray.push(bottle);
   }
   
   //Adds a invisibe background to detect when the targets have been missed.
   bg = new Sprite();
   bg.graphics.beginFill(0x000000,0);
   bg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
   bg.graphics.endFill();
   addChildAt(bg,0);
   bg.addEventListener(MouseEvent.CLICK, checkShots);
   
   //Adds the number shot left to stage. 
   shots = new Shots();
   shots.x = 434.85;
   shots.y = 95.75;
   addChild(shots);
   
   endBox = new EndBox();
   addChild(endBox);
   endBox.x = 148;
   endBox.y = 32;
   endBox.visible = false;
   
  }
  
  
  //This function moves the all the bottles in the array four pixels to the 
  //right at the current frame rate. If a bottle goes passed the stage 
  //width, it will get re-added a bottle width before the start of the stage.
  private function enterHandler(e:Event):void{
   for (var j:uint = 0; j <  bottleArray.length; j++) {
    bottleArray[j].x +=  1;

    if (bottleArray[j].x > stage.stageWidth + bottleArray[j].width) {
     bottleArray[j].x = 0 - bottleArray[j].width;
    }
   }
  }
  
  
  //This removes the bottle from the stage, the event listener and 
  //removes it from the array if it has been clicked. 
  private function clickHandler(e:MouseEvent):void {
   var index:uint = bottleArray.indexOf(e.currentTarget);
   var target:MovieClip = e.currentTarget as MovieClip;

   target.removeEventListener(MouseEvent.CLICK, clickHandler);
   removeChild(target);
   bottleArray.splice(index, 1);

   checkShots();
  }
  
  
  private function checkShots(e:MouseEvent = null):void{
   //This increments the bottleHit counter by one and goes to 
   //the next frame in shots movie clip.
   bottleHit++;
   shots.gotoAndStop(shots.currentFrame + 1);

  
   //If there are no more shot available and array length is six then you win. 
   if (shots.currentFrame == shots.totalFrames && bottleArray.length == hits) {
    removeObject();
    endBox.visible = true;
    endBox.gotoAndStop(1);
   }
   //If there are no more shot available you lose.
   else if (shots.currentFrame == shots.totalFrames) {
    removeObject();
    endBox.visible = true;
    endBox.gotoAndStop(2);
   }
  }
  
  //This removes the event listeners
  private function removeObject():void{
   stage.removeEventListener(Event.ENTER_FRAME, enterHandler);
   bg.removeEventListener(MouseEvent.CLICK, checkShots);

   for (var i:int = 0; i < bottleArray.length; i++){
    bottleArray[i].removeEventListener(MouseEvent.CLICK, clickHandler);
   }
  }
 }
}



Step 5

Test your movie Ctrl + Enter



You can download the source files here.

6 comments:

Jake Stephens 5 January 2014 at 11:23  

i tried using some of this code to allow for multiple enemy spawns in a side scrolling shooting game im making, but im getting an error. any tips?

code:

for(var i:int=0; i < numofbad;){
Badguy = new Enemy()
badguyarray[i].addChild(Badguy)
badguyarray[i].Badguy.y = int(Math.random()*500)
badguyarray[i].Badguy.x = 900
i=i+1
}

error:

TypeError: Error #1010: A term is undefined and has no properties.
at shootergame_fla::MainTimeline/frame1()

iliketo 6 January 2014 at 13:45  

@Jake

A few things to check with your code so far:
*Is there a Badguy variable?
*Is there a movie clip with the Class Enemy?
*Is there an instance of the array - badguyarray?

Jake Stephens 7 January 2014 at 01:40  

@iliketo
yeah, they were all properly declared, i reopened the file in the morning made some minor edits that i dont remember and now it works... still no idea what was wrong though.

but i was wondering would i be able to make a colision detection script for two objects generated this way, i cant quite figure out how to find a path for the both of them...

iliketo 11 January 2014 at 00:16  

@Jake,

Can you please explain? I'm not sure what you mean.

Jake Stephens 11 January 2014 at 08:21  

@iliketo
basically i have two movie clips, one called aseed and one called badguy. aseed is moving right and badguy is moving left. both are generated through code into an array so i can have multiple on screen. i am trying to detect colisions between the two but your code uses parents instead of a path like stage.aseed so i dont know how to check for collisions as i cant find a path for the movie clips. do you have any idea how i could detect coliosions between the two? thanks in advance.

iliketo 13 January 2014 at 12:26  

@Jake,

Take a look at this post

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP