Newest Articles

Photo Reel
Image Color Tinting using Actionscript
3d Rotating Image Cube
Image Slider with Easing
Catapult Game
Mp3 Player with XML Playlist


Popular Articles

True Fullscreen Flash Mode
FLV Player
Image Slider
Mp3 Player with XML Playlist
Album Slide
Page Flipper


Random Articles

Infinitely Zooming Image
Image Slider with Easing
Disappearing Button
Custom Mouse Cursor
Show the Current Frames Per Second
Music Player


Links

Foundation-Flash
Tutorial4Me
MickM
TutorialQuest
Tutorialsphere.com - Free Online Tutorials
Photochopz
Newgrounds
TWiT
Link to SwfSpot
Swf Spot



rss feed

Catapult Game

Catapult Game
AddThis Social Bookmark Button
Description: Create a Catapult Game with a launching arm, trampolines, and fans
Author: John Bezanis
Added: December 17th 2007
Version: Flash 8
Total Views: 14801
Views in the Past 7 Days: 329


This tutorial explains step-by-step how to create a catapult game. The assumed knowledge is how to create movie clips, how to draw, and basic actionscript. I'll try to explain the rest.
Catapult Parts
We'll start out by creating the catapult. Draw a catapult to your liking. Don't draw the wheels or launch arm at this point. Select the catapult and right click -> convert to symbol. Name it catapult, make its type movie clip, and click the export for actionscript check box. Make sure the linkage identifier is also named catapult. Open up the movie clip catapult and create a new layer on top. Draw the catapult arm. Convert it to a symbol, naming it catapultarm and setting the linkage identifier to catapultarm.
Catapult Arm Instance
Single click the catapult arm and in the properties menu, set the instance name to arm. Move the catapult arm to its location. In the movieclip catapult, position the arm and base so that the top of the arm is at the 0,0 position. You'll see a black cross at the position.
Next draw a wheel. You'll only need to draw one. The second one is just a copy of the first one. Convert it to a movieclip named catapultwheel. Copy that wheel and paste a copy of it. Position the wheels so one is in the front and the other is in the back. Select the back wheel and in the properties tab, set the instance name to backwheel. Set the instance name of the front wheel to frontwheel. The catapult is now done. Go back to the main stage and delete it off of the stage. It will still exist in the library.
Repeating Grass
Now it's time to create the grass. Draw the grass so that its width is the width of the stage, and the height at the top is the same on the left and right sides. Select the entire grass and copy paste it. Move it to the right end of the first piece. Select the entire grass and right click Convert to Symbol. Name it floor. Set the instance name to floor as well.
High or Long Slider
The launcher button is next. Draw a launch graphic. Right click it and convert it to a movieclip named launchbutton. Set the linkage identifier to launchbutton as well. Delete it from the stage, and open it back up by double clicking launchbutton in the library. Now we'll draw the high or long slider. Draw a black box with a width of 30 and height of 100. Convert it to a movieclip named highorlong with linkage identifier highorlong. Set the instance name to highorlong as well. Open up highorlong. Around frame 43, right click and select insert frame. Create a new layer on top of the other layer. Create a white box with a height of 5 and width of 30. Convert it to a symbol named highorlongslider with linkage identifier highorlongslider and instance name highorlongslider. Right click frame 23 on this new layer and insert keyframe. Move the _y of the white box to 97.5. Right click frame 43 and insert keyframe. Move the _y of the white box to 0. Right click frame 1, 23, and 43 and create motion tween. That's it for the launch button.
Fan and Trampoline
The fan increases the _x velocity and the trampoline increases the _y velocity. Draw a fan and convert it to a movieclip named fan with linkage identifier fan. Do the same from trampoline. Remove them from the stage. Draw a rock that will be the projectile. Convert it to a movieclip named projectile with linkage identifier projectile. Open projectile and move it so the 0,0 position is in the center of the projectile. Remove it from the stage on the main level. The only movieclip that should be on the stage now is the floor.
Lose Screen
Draw a static text box with the text You Lose. Draw another static text box with the text score:. Draw another text box, set its type to Dynamic text, and the instance name to score. This will display the score once the player loses. Draw a static text box with text Replay, convert it to a button, and set the instance name to replay. Select all of these and convert them to a movieclip named losescreen with linkage identifier losescreen.
High Score and Current Score
At the top left of the stage, create a static text field and make the text "best". To the right of that text, Create a dynamic text box, and set the var to bestdist. At the right of the stage, create a dynamic text box and set the var to dist. To the left of that, create a static text box with text "distance:".
That's it for the objects. Finally the code. Place the code on the main stage in the actions tab.
  1. //Catapult by John Bezanis for swfspot.com
  2.  
  3. //This is an array to store the names of all of the objects created (trampolines, fans)
  4. var objectArray:Array = new Array();
  5. //Initialize the object count to 0.
  6. var objectcount = 0;
  7. //This is the distance the projectile has travelled. Initialize it to 0
  8. var distance:Number = 0;
  9. //Function to create a new game
  10. function newGame() {
  11.   //remove any objects from a previous game
  12.   for (var i = 0; i<objectArray.length; i++) {
  13.     removeMovieClip(objectArray[i].toString());
  14.   }
  15.   //Clear the array of objects
  16.   objectArray = [];
  17.   //If the projectile has been shot before, remove it.
  18.   if (projectile) {
  19.     removeMovieClip("projectile");
  20.   }
  21.   //Create a catapult
  22.   createCatapult();
  23. }
  24. //Call the function and start a new game
  25. newGame();
  26. //Create the catapult and have it move on screen
  27. function createCatapult() {
  28.   //If there is already a catapult on the screen, remove it
  29.   if (catapult) {
  30.     removeMovieClip("catapult");
  31.   }
  32.   //Create a new catapult to the left of the screen
  33.   this.attachMovie("catapult", "catapult", this.getNextHighestDepth(), {_x:-60, _y:250});
  34.   //Add the catapult to the list of objects
  35.   objectArray.push("catapult");
  36.   //This onEnterFrame function moves the catapult until it has moved into the correct position
  37.   catapult.onEnterFrame = function() {
  38.     //Move the catapult 2 pixels to the right
  39.     catapult._x += 2;
  40.     //spin the front wheel
  41.     catapult.frontwheel._rotation += 5;
  42.     //spin the back wheel
  43.     catapult.backwheel._rotation += 5;
  44.     //If the catapult  has reached its destination, start rotating the catapult arm
  45.     if (catapult._x>130) {
  46.       //run the load catapult function
  47.       loadCatapult();
  48.     }
  49.   };
  50. }
  51. //This function prepares the catapult for launch, rotating the arm back
  52. function loadCatapult() {
  53.   //remove the previous onEnterFrame that moved the catapult's _x position
  54.   delete catapult.onEnterFrame;
  55.   //Create a new onEnterFrame function that rotates the arm
  56.   catapult.onEnterFrame = function() {
  57.     //Bring the arm back
  58.     catapult.arm._rotation -= 2;
  59.     //If the arm has rotated all of the way back, stop the rotation and display the launch button
  60.     if (catapult.arm._rotation<=-90) {
  61.       //Show the launch display
  62.       displayLaunchButton();
  63.       //stop rotating the arm backwards
  64.       delete catapult.onEnterFrame;
  65.     }
  66.   };
  67. }
  68. //This function brings up thelaunch display
  69. function displayLaunchButton() {
  70.   //Attach the movieclip for the launch button
  71.   this.attachMovie("launchbutton", "launchbutton", this.getNextHighestDepth(), {_x:80, _y:240});
  72.   //When the launch button is pressed, start bringing the arm forward
  73.   launchbutton.onPress = function() {
  74.     //swing the arm forward
  75.     releaseCatapult();
  76.   };
  77. }
  78. //Function to swing the arm forward
  79. function releaseCatapult() {
  80.   //reset the distance to 0
  81.   distance = 0;
  82.   //Remove the previous onenterframe if there was one
  83.   delete catapult.onEnterFrame;
  84.   //Create a new onenterframe to start swinging the arm forward
  85.   catapult.onEnterFrame = function() {
  86.     //Rotate the arm 15 degrees forward
  87.     catapult.arm._rotation += 15;
  88.     //If the arm is completely vertical, launch the projectile
  89.     if (catapult.arm._rotation>=0) {
  90.       //Stop rotating the arm
  91.       delete catapult.onEnterFrame;
  92.       //Shoot the rock
  93.       fireProjectile();
  94.     }
  95.   };
  96. }
  97. //Function to launch the projectile
  98. function fireProjectile() {
  99.   //Create a new projectile at the tip of the catapult arm
  100.   this.attachMovie("projectile", "projectile", this.getNextHighestDepth(), {_x:catapult._x, _y:catapult._y});
  101.   //This is the starting x speed of the projectile. Its speed is determined by the y position of the white slider
  102.   projectile.dx = launchbutton.highorlong.highorlongslider._y/5;
  103.   //This is the starting y speed of the projectile. Its speed is determined by the y position of the white slider
  104.   projectile.dy = 20-launchbutton.highorlong.highorlongslider._y/5;
  105.   //Remove the launch button
  106.   launchbutton.removeMovieClip();
  107.   //This onEnterFrame runs on the main level and moves the projectile, as well as the objects
  108.   onEnterFrame = function () {
  109.     //Update the distance the projectile has moved
  110.     distance += projectile.dx;
  111.     //Update the display showing the new distance, rounded down
  112.     dist = Math.floor(distance);
  113.     //If the current distance launched is greater than the high score, update it
  114.     if (dist>bestdist) {
  115.       bestdist = dist;
  116.     }
  117.     //Rotate the rock 2 degrees
  118.     projectile._rotation += 2;
  119.     //Move the projectile to the right
  120.     projectile._x += projectile.dx;
  121.     //Simulate gravity. Increase the downward speed
  122.     projectile.dy -= .2;
  123.     //Move the _Y position according to the dy force
  124.     projectile._y -= projectile.dy;
  125.     //If the rock is past the halfway point of the stage, move it back and adjust the objects on the screen
  126.     if (projectile._x>=Stage.width/2) {
  127.       //Shift all of the objects according to how far past the centerpoint the projectile travelled
  128.       shiftObjects(Stage.width/2-projectile._x);
  129.       //Move the _x position to the center of the screen
  130.       projectile._x = Stage.width/2;
  131.     }
  132.     //If the projectile hits the ground, move it to the ground and set it to bounce back up
  133.     if (projectile._y>Stage.height-20) {
  134.       //move the y position to the ground
  135.       projectile._y = (Stage.height-20);
  136.       //slow down the y speed and reverse it, so it will bounce back up
  137.       projectile.dy *= -.7;
  138.       //slow down the x speed
  139.       projectile.dx *= .7;
  140.     }
  141.     //Create a random number between 0 and 99
  142.     switch (Math.floor(Math.random()*100)) {
  143.     //if the random number is 0, create a trampoline
  144.     case 0 :
  145.       //a loop to track how many trampolines are currently on the stage
  146.       trampcount = 0;
  147.       for (var i = 0; i<objectArray.length; i++) {
  148.         //if the current object in the list is a trampoline, increment the trampoline count
  149.         if (objectArray[i].indexOf("trampoline") != -1) {
  150.           trampcount++;
  151.         }
  152.       }
  153.       //create a trampoline if there are less than 3
  154.       if (trampcount<3) {
  155.         addObject("trampoline");
  156.       }
  157.       break;
  158.     //if the random number is 1, create a fan
  159.     case 1 :
  160.       //a loop to track how many fans are currently on the stage
  161.       fancount = 0;
  162.       for (var i = 0; i<objectArray.length; i++) {
  163.         //if the current object in the list is a fan, increment the fan count
  164.         if (objectArray[i].indexOf("fan") != -1) {
  165.           fancount++;
  166.         }
  167.       }
  168.       //create a fan if there are less than 3
  169.       if (fancount<3) {
  170.         addObject("fan");
  171.       }
  172.       break;
  173.     }
  174.     //Loop through the object array, moving each object and removing objects that have passed the screen
  175.     for (var i = 0; i<objectArray.length; i++) {
  176.       //If the current object has passed the screen, remove it
  177.       if (eval(objectArray[i].toString())._x+eval(objectArray[i].toString())._width<0) {
  178.         //physically remove the object
  179.         removeMovieClip(objectArray[i].toString());
  180.         //remove the object from the list of objects
  181.         objectArray.splice(i, 1);
  182.       } else if (objectArray[i].indexOf("trampoline") != -1) {
  183.         //if the object is a trampoline and hits it, increase the y velocity
  184.         if (projectile.hitTest(eval(objectArray[i].toString()))) {
  185.           projectile.dy = Math.abs(projectile.dy*1.1);
  186.         }
  187.       } else if (objectArray[i].indexOf("fan") != -1) {
  188.         //if the object is a fan and hits it, increase the x velocity
  189.         if (projectile.hitTest(eval(objectArray[i].toString()))) {
  190.           projectile.dx *= 1.1;
  191.         }
  192.       }
  193.     }
  194.     //If the projectile moves less than one tenth of a pixel on the x and y axis, the player has lost
  195.     if (Math.abs(projectile.dy)<.1 && projectile.dx<.1) {
  196.       //stop the on enter frame and display the lose game screen
  197.       delete onEnterFrame;
  198.       loseGame();
  199.     }
  200.   };
  201. }
  202. //Adds objects to the screen
  203. function addObject(inputObject) {
  204.   //Add the new object to the current list of objects
  205.   objectArray.push((inputObject)+(++objectcount));
  206.   //Attach the object specified by inputobject
  207.   this.attachMovie(inputObject, (inputObject)+objectcount, this.getNextHighestDepth(), {_x:Stage.width+15, _y:Stage.height});
  208.   //Move the new object to the top of the stage
  209.   projectile.swapDepths(this.getNextHighestDepth());
  210. }
  211. //Move the x position of the objects in the objectArray
  212. function shiftObjects(shiftdistance) {
  213.   //Move each object in the array
  214.   for (var i = 0; i<objectArray.length; i++) {
  215.     eval(objectArray[i])._x += shiftdistance;
  216.   }
  217.   //Move the floor according to the projectile's speed. Loop it if it passes the center point
  218.   floor._x = (floor._x+shiftdistance)%(floor._width/2);
  219. }
  220. //The player has lost the game
  221. function loseGame() {
  222.   //Show the lost game screen
  223.   this.attachMovie("losescreen", "losescreen", this.getNextHighestDepth(), {_x:Stage.width/2, _y:Stage.height/2});
  224.   //Update the score text to the current score
  225.   losescreen.score.text = Math.floor(distance);
  226.   //When the replay button has been pressed, start a new game
  227.   losescreen.replay.onPress = function() {
  228.     newGame();
  229.     //remove the lose screen
  230.     removeMovieClip(losescreen);
  231.   };
  232. }
  233.  

The source code of the example is available below:

Download the Source File
Questions and Suggestions
by the way. do you know how to make that slider to be user controlled of the user wants to select a specific range instead of having the slider to move up and down randomly?
January 6th 2008 23:01PM   -   Johnny Lee
Hi, can you tell me what program are you using to make this??
January 12th 2008 16:01PM   -   Rhodri
rhodri: it's a flash tutorial, what other program than flash could you use?
January 12th 2008 16:01PM   -   answer to rhodri
what AS is used to create this?
January 13th 2008 06:01AM   -   David
Dabiv: I think is AS2 ... Not sure...
January 14th 2008 05:01AM   -   Gabriel
how do u create dis on Flash
January 15th 2008 14:01PM   -   Loco
@LOCO Kijk boven je domme eikel het staat er gewoon hoor moeilijk lezen he ;)
January 16th 2008 03:01AM   -   Stupid People
hey this is really cool thanks, i learnt a lot from it
January 16th 2008 03:01AM   -   dridgett
cool
January 18th 2008 15:01PM   -   you
Hi, very nice game. I have just 1 problem. I canīt get the best score number when I am done playing. The code is exactly how you wrote it but I still canīt get it right. I would love if any1 could help me with this. ;)
January 18th 2008 16:01PM   -   Grater
Yep, this is AS2. A common problem with score display if you havn't changed the code would probably be instance names, make sure the var: of your dynamic text box is the same as it specifies in the code. :)
January 19th 2008 15:01PM   -   FrozenHaddock
where do you insert the code, and where would this be located?
January 30th 2008 15:01PM   -   Juan Medina
If you don't know what Flash is or how you would create this in Flash, then you need a very very basic tutorial and there aren't any on this site. One that I found very useful when starting Flash was http://www.newgrounds.com/portal/view/218367 although the actionscript part is out of date, it still works great for basic animation. After you learn basics there, come back here and learn actionscript. Thanks for the catapult game tutorial!
February 23rd 2008 09:02AM   -   Jonathan
Whats wrong? I don't understand it? :/ Help please! **Warning** Scene=Scene 1, layer=trawa, frame=1:Line 292: statements that appear before the first 'case' in a 'switch' statement are ignored 143.; Total ActionScript Errors: 1 Reported Errors: 1
March 18th 2008 19:03PM   -   pedro
ahh i cant get it to work right i have one random catapult that stays there!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! >:(
March 19th 2008 10:03AM   -   devrage
its in AS2 i wish it was in AS3 because AS2 is gonna become outdated fast
March 29th 2008 20:03PM   -   bob
Pretty Neat tutorial
April 6th 2008 14:04PM   -   marcus
it doesnt work it wont even play
June 15th 2008 06:06AM   -   Steven
Add a Question or Suggestion
name:
website (optional):
captcha type the characters into the box
message (5000 characters or less):