Home > Advanced ActionScript 3 > Creating a small shooting game in AS3

Creating a small shooting game in AS3




In this tutorial you will learn how to create a small “shooting stars” game using Flash and ActionScript 3. Let’s get started!

1. Open a new Flash document and save it under “ShootingGame.fla”. Set its size to 500 x 300 pixels.

2. First of all we need to draw the sight of our weapon. So rename the first layer to “sight”. Take the Oval Tool and from the properties panel set its properties to Solid, Disabled Fill, Stroke height should be set to 3.
Then take the Selection tool, select a part of the circle and cut it like this:

The final step is to take the Line tool and to draw a cross. Just change the Stroke height value to 1.5. Select the whole sight and convert it to Movie Clip with instance name “sight” and registration point center.

3. Now our sight is ready and we need to draw a star. Take the PolyStar Tool and set it properties like this:

If your star is ready, select it and convert it to Movie Clip with registration point center. Linkage the star to class Star by going to the Library panel (Ctrl + L), right-clicking the Star movie clip and then setting the class name. Remove the star from the stage.

4. Take the text tool and first create a Static text field and type “Score:”. Then create a dynamic text field with instance name “points_txt” and position it next to the static text field. Embed the Numeral values for the font and for color choose #FF0000. Align the text fields to the bottom right part of the stage.

5. Create a new layer called “actions”, open Actions Panel and type this:


//importing tween classes
import fl.transitions.easing.*;
import fl.transitions.Tween;

//hiding the cursor 
Mouse.hide();

//creating a new Star instance
var star:Star = new Star();
//creating the timer
var timer:Timer = new Timer(1000);
//we create variables for random X and Y positions
var randomX:Number;
var randomY:Number;
//variable for the alpha tween effect
var tween:Tween;
//we check if a star instance is already added to the stage
var starAdded:Boolean = false;
//we count the points
var points:int = 0;

//adding event handler on mouse move
stage.addEventListener(MouseEvent.MOUSE_MOVE, cursorMoveHandler);
//adding event handler to the timer
timer.addEventListener(TimerEvent.TIMER, timerHandler);
//starting the timer
timer.start();

function cursorMoveHandler(e:Event):void{
	//sight position matches the mouse position
	sight.x = mouseX;
	sight.y = mouseY;
}

function timerHandler(e:TimerEvent):void{
	//first we need to remove the star from the stage if already added
	if(starAdded){
		removeChild(star);
	}
	
	//positioning the star on a random position 
	randomX = Math.random()*500;
	randomY = Math.random()*300;
	star.x = randomX;
	star.y = randomY;
	//adding the star to the stage
	addChild(star);
	//changing our boolean value to true
	starAdded = true;
	//adding a mouse click handler to the star
	star.addEventListener(MouseEvent.CLICK, clickHandler);
	//animating the star's appearance
	tween = new Tween(star, "alpha", Strong.easeOut, 0, 1, 3, true);
}

function clickHandler(e:Event):void{
	//when we click/shoot a star we increment the points
	points ++;
	//showing the result in the text field
	points_txt.text = points.toString();
}

Here is the final result:

Liked this tutorial? Share and Enjoy:

  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Reddit
  • blogmarks
  • StumbleUpon
  • Technorati
  • TwitThis
  • Yahoo! Buzz
  • NewsVine
  • Slashdot
  1. Anomalie
    November 10th, 2012 at 22:58 | #1

    Awesome…. Everything “works” so no error or something but the only thing i can do is moving my sight. :D my star is a photo of a clam so shes not moving at all and when i shoot also nothing happens in my text field… weird :/ help? (If someone reads this even if the last respond was 2 years ago :D)

  2. nabehan
    April 25th, 2013 at 23:08 | #2

    can someone told me how to create next level?

  3. May 14th, 2013 at 13:28 | #3

    Hi! I”m trying to make this game end after certain time, but the stars keep adding to the stage. You suggested Ros to connect the objects in scene 2.

    If that code is helping him, then is it possible to remove the addition of the stars to the movie in scene 2, instead of continuing the game as Ros wanted?
    I’ve asked similar question linking this very tutorial on stackoverflow…. link to the question is at the website linked with my name provided by me on here…

    Thanks for any help…

  4. Rajith
    August 9th, 2013 at 14:44 | #4

    how to add a timer,, there is no game without time attack

  5. January 19th, 2014 at 01:07 | #5

    Hey, I think your site might be having browser compatibility issues.
    When I look at your blog site in Safari, it looks fine but when
    opening in Internet Explorer, it has some overlapping.

    I just wanted to give you a quick heads up! Other then that, wonderful blog!

Comment pages
1 3 4 5 371
  1. November 17th, 2009 at 00:31 | #1
  2. April 23rd, 2012 at 17:46 | #2