Newest Articles

MegaCombs
Flash Media Player
XML Driven Pie Chart
Base Defender
Hangman Game
8 Ball Pool


Popular Articles

True Fullscreen Flash Mode
3d Rotating Image Cube
Catapult Game
Show the Current Frames Per Second
Base Defender
Hangman Game


Random Articles

Photo Reel
Growing Tree using Recursion
Image Rotator with blur and fadeout
XHTML Image Mapper
Custom Right Click Menu
3d Rotating Image Cube


Links

Shapes the Game
Reddit
Newgrounds
TWiT
Link to SwfSpot
Swf Spot

Contact me on Google+



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


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
Comments Currently Disabled