Create a flash artillery game – step 2

May 25, 2007 by Emanuele Feronato
Filed Under Flash • 32 Comments 

Welcome to the 2nd part of this tutorial. I recommend you to read the 1st part if you haven't done it yet and we are ready to start.

Fixing bullets amount

In the last example, when you shot a bullet, it "lives" forever. I mean, once the bullet movieclip is on the stage, there isn't any routine to check if the bullet should exist or not.

Try to imagine thousands of bullets that continue falling down at increasing speed. Obviously, if you fire a large amount of bullets, the movieclip starts lagging.

We need to remove bullets when they are off the stage.

PLAIN TEXT
ACTIONSCRIPT:
  1. Mouse.hide();
  2. gravity = 2;
  3. attachMovie("crosshair", "crosshair", 1);
  4. attachMovie("tank", "tank", 2, {_x:230, _y:350});
  5. crosshair.onEnterFrame = function() {
  6.     this._x = _xmouse;
  7.     this._y = _ymouse;
  8. };
  9. tank.onEnterFrame = function() {
  10.     mousex = _xmouse-this._x;
  11.     mousey = (_ymouse-this._y)*-1;
  12.     angle = Math.atan(mousey/mousex)/(Math.PI/180);
  13.     if (mousex<0) {
  14.         angle += 180;
  15.     }
  16.     if (mousex>=0 && mousey<0) {
  17.         angle += 360;
  18.     }
  19.     if (angle>160) {
  20.         angle = 160;
  21.     }
  22.     if (angle<20) {
  23.         angle = 20;
  24.     }
  25.     firepower = Math.sqrt(mousex*mousex+mousey*mousey);
  26.     if (firepower>200) {
  27.         firepower = 200;
  28.     }
  29.     this.cannon._rotation = angle*-1;
  30. };
  31. function onMouseDown() {
  32.     angle = tank.cannon._rotation-1;
  33.     start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
  34.     start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
  35.     cannonball_fired = attachMovie("cannonball", "cannonball_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:start_ball_x, _y:start_ball_y});
  36.     cannonball_fired.dirx = Math.cos(angle*Math.PI/180)*firepower;
  37.     cannonball_fired.diry = Math.sin(angle*Math.PI/180)*firepower;
  38.     cannonball_fired.onEnterFrame = function() {
  39.         this.diry += gravity;
  40.         this._x += this.dirx/30;
  41.         this._y += this.diry/30;
  42.         if ((this._x<0) or (this._x>500) or (this._y>350)) {
  43.             this.removeMovieClip();
  44.         }
  45.     };
  46. }

Lines 42-44: Check if the bullet if out of visible left, right and bottom area (I did not include the top because a bullet is supposed to fall down...) and if true, removes the bullet movieclip.

In this case, the only movieclips active are those visible on stage plus the ones falling from the upper edge of the stage.

Maximum bullets at the same time

Now we need to put a limit to the maximum bullets fired at the same time. It would be too easy if we let the player fire a large amount of bullets. So we are going to put a limit.

PLAIN TEXT
ACTIONSCRIPT:
  1. Mouse.hide();
  2. gravity = 2;
  3. fired = 0;
  4. max_firepower = 3;
  5. attachMovie("crosshair", "crosshair", 1);
  6. attachMovie("tank", "tank", 2, {_x:230, _y:350});
  7. crosshair.onEnterFrame = function() {
  8.     this._x = _xmouse;
  9.     this._y = _ymouse;
  10. };
  11. tank.onEnterFrame = function() {
  12.     mousex = _xmouse-this._x;
  13.     mousey = (_ymouse-this._y)*-1;
  14.     angle = Math.atan(mousey/mousex)/(Math.PI/180);
  15.     if (mousex<0) {
  16.         angle += 180;
  17.     }
  18.     if (mousex>=0 && mousey<0) {
  19.         angle += 360;
  20.     }
  21.     if (angle>160) {
  22.         angle = 160;
  23.     }
  24.     if (angle<20) {
  25.         angle = 20;
  26.     }
  27.     firepower = Math.sqrt(mousex*mousex+mousey*mousey);
  28.     if (firepower>200) {
  29.         firepower = 200;
  30.     }
  31.     this.cannon._rotation = angle*-1;
  32. };
  33. function onMouseDown() {
  34.     if (fired<max_firepower) {
  35.         fired++;
  36.         angle = tank.cannon._rotation-1;
  37.         start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
  38.         start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
  39.         cannonball_fired = attachMovie("cannonball", "cannonball_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:start_ball_x, _y:start_ball_y});
  40.         cannonball_fired.dirx = Math.cos(angle*Math.PI/180)*firepower;
  41.         cannonball_fired.diry = Math.sin(angle*Math.PI/180)*firepower;
  42.         cannonball_fired.onEnterFrame = function() {
  43.             this.diry += gravity;
  44.             this._x += this.dirx/30;
  45.             this._y += this.diry/30;
  46.             if (this._y>350) {
  47.                 this.removeMovieClip();
  48.                 fired--;
  49.             }
  50.         };
  51.     }
  52. }

Line 3: Variable designed to count the bullets currently on stage

Line 4: Maximum firepower allowed. Changing this value you will change the maximum bullets allowed to be shot at the same time. Changing this value will affect gameplay.

Line 34: When the player wants to fire, I check if the bullets on stage are minor than the maximum bullets allowrd

Line 35: if true, increases the fired variable

Line 48: decreases the fired variable when a bullet is removed. If you look at line 46, you will see the control is performed only on bullets leaving the stage to the bottom. This will always happen even for bullets thare are leaving to left or right, since when they fall, sooner or later they will leave to the bottom. This will make the game a little bit harder, because if you fire a bullet out to the right, you will have to wait for it to leave the stage to the bottom to have the bullet reloaded.

Now it's time to introduce the other great star in an artillery game

The ground

I created a new movieclip linkaged as ground that represents... well... the ground.

PLAIN TEXT
ACTIONSCRIPT:
  1. Mouse.hide();
  2. gravity = 2;
  3. fired = 0;
  4. max_firepower = 3;
  5. attachMovie("crosshair", "crosshair", 1);
  6. attachMovie("tank", "tank", 2, {_x:295, _y:255});
  7. attachMovie("ground", "ground", 3, {_x:0, _y:200});
  8. crosshair.onEnterFrame = function() {
  9.     this._x = _xmouse;
  10.     this._y = _ymouse;
  11. };
  12. tank.onEnterFrame = function() {
  13.     mousex = _xmouse-this._x;
  14.     mousey = (_ymouse-this._y)*-1;
  15.     angle = Math.atan(mousey/mousex)/(Math.PI/180);
  16.     if (mousex<0) {
  17.         angle += 180;
  18.     }
  19.     if (mousex>=0 && mousey<0) {
  20.         angle += 360;
  21.     }
  22.     if (angle>160) {
  23.         angle = 160;
  24.     }
  25.     if (angle<20) {
  26.         angle = 20;
  27.     }
  28.     firepower = Math.sqrt(mousex*mousex+mousey*mousey);
  29.     if (firepower>200) {
  30.         firepower = 200;
  31.     }
  32.     this.cannon._rotation = angle*-1;
  33. };
  34. function onMouseDown() {
  35.     if (fired<max_firepower) {
  36.         fired++;
  37.         angle = tank.cannon._rotation-1;
  38.         start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
  39.         start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
  40.         cannonball_fired = attachMovie("cannonball", "cannonball_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:start_ball_x, _y:start_ball_y});
  41.         cannonball_fired.dirx = Math.cos(angle*Math.PI/180)*firepower;
  42.         cannonball_fired.diry = Math.sin(angle*Math.PI/180)*firepower;
  43.         cannonball_fired.onEnterFrame = function() {
  44.             this.diry += gravity;
  45.             this._x += this.dirx/30;
  46.             this._y += this.diry/30;
  47.             if ((this._y>350) or (ground.hitTest(this._x, this._y, true))) {
  48.                 this.removeMovieClip();
  49.                 fired--;
  50.             }
  51.         };
  52.     }
  53. }

Lines 6-7: Tank and ground are placed on the stage as if the tank were on the ground (of course...)

Line 47: the test to remove the bullet is extended to its collision with the ground. At the moment, I do not care about explosions or accurate hit test

The enemy

In an artillery game, you are supposed to shot to an enemy... so I linkaged another movieclip as enemy... it should be that red square (you know, red squares are evil).

PLAIN TEXT
ACTIONSCRIPT:
  1. Mouse.hide();
  2. gravity = 2;
  3. fired = 0;
  4. max_firepower = 3;
  5. place_enemy();
  6. attachMovie("crosshair", "crosshair", 1);
  7. attachMovie("tank", "tank", 2, {_x:295, _y:255});
  8. attachMovie("ground", "ground", 3, {_x:0, _y:200});
  9. crosshair.onEnterFrame = function() {
  10.     this._x = _xmouse;
  11.     this._y = _ymouse;
  12. };
  13. tank.onEnterFrame = function() {
  14.     mousex = _xmouse-this._x;
  15.     mousey = (_ymouse-this._y)*-1;
  16.     angle = Math.atan(mousey/mousex)/(Math.PI/180);
  17.     if (mousex<0) {
  18.         angle += 180;
  19.     }
  20.     if (mousex>=0 && mousey<0) {
  21.         angle += 360;
  22.     }
  23.     if (angle>160) {
  24.         angle = 160;
  25.     }
  26.     if (angle<20) {
  27.         angle = 20;
  28.     }
  29.     firepower = Math.sqrt(mousex*mousex+mousey*mousey);
  30.     if (firepower>200) {
  31.         firepower = 200;
  32.     }
  33.     this.cannon._rotation = angle*-1;
  34. };
  35. function onMouseDown() {
  36.     if (fired<max_firepower) {
  37.         fired++;
  38.         angle = tank.cannon._rotation-1;
  39.         start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
  40.         start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
  41.         cannonball_fired = attachMovie("cannonball", "cannonball_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:start_ball_x, _y:start_ball_y});
  42.         cannonball_fired.dirx = Math.cos(angle*Math.PI/180)*firepower;
  43.         cannonball_fired.diry = Math.sin(angle*Math.PI/180)*firepower;
  44.         cannonball_fired.onEnterFrame = function() {
  45.             this.diry += gravity;
  46.             this._x += this.dirx/30;
  47.             this._y += this.diry/30;
  48.             if ((this._y>350) or (ground.hitTest(this._x, this._y, true))) {
  49.                 this.removeMovieClip();
  50.                 fired--;
  51.             }
  52.         };
  53.     }
  54. }
  55. function place_enemy() {
  56.     enemy_placed = attachMovie("enemy", "enemy", _root.getNextHighestDepth(), {_x:0, _y:350});
  57.     enemy_placed.yspeed = 0;
  58.     enemy_placed.onEnterFrame = function() {
  59.         this.yspeed += gravity/10;
  60.         this._x++;
  61.         while (_root.ground.hitTest(this._x+this._width/2, this._y+this._height, true)) {
  62.             this._y--;
  63.             this.yspeed = 0;
  64.         }
  65.         if (!_root.ground.hitTest(this._x+this._width/2, this._y+this._height+1, true)) {
  66.             this._y += this.yspeed;
  67.         } else {
  68.             this.yspeed = 0;
  69.         }
  70.         if (this._x>500) {
  71.             this.removeMovieClip();
  72.             place_enemy();
  73.         }
  74.     };
  75. }

Line 5: call to a place_enemy function that will... uh... something like placing an enemy...

Line 55: here starts the function place_enemy

Line 56: Placing an enemy in the bottom left of the stage

Line 57: Init enemy yspeed at zero. It's obvious that I won't move the enemy with a motion guide but with pure actionscript, just in case tomorrow I would like to change the terrain. I am using some of the basics explained in the tutorial called Create a flash draw game like Line Rider or others - part 5 so give it a look if you haven't done it yet.

Line 58: Function to be executed every time the enemy enters in a frame.

Lines 59-69: As said, these are lines already explained in the the tutorial called Create a flash draw game like Line Rider or others - part 5

Lines 70-73: When the enemy reaches the right border, I remove it and call the function again, creating another enemy.

And we have our walking enemy... want to hurt it?

The killable enemy

In this tutorial I won't cover energy, health and so on, but I will during next tuts. At the moment, when a bullet hits an enemy, he/it dies and repops in the starting point.

PLAIN TEXT
ACTIONSCRIPT:
  1. Mouse.hide();
  2. gravity = 2;
  3. fired = 0;
  4. max_firepower = 3;
  5. place_enemy();
  6. attachMovie("crosshair", "crosshair", 1);
  7. attachMovie("tank", "tank", 2, {_x:295, _y:255});
  8. attachMovie("ground", "ground", 3, {_x:0, _y:200});
  9. crosshair.onEnterFrame = function() {
  10.     this._x = _xmouse;
  11.     this._y = _ymouse;
  12. };
  13. tank.onEnterFrame = function() {
  14.     mousex = _xmouse-this._x;
  15.     mousey = (_ymouse-this._y)*-1;
  16.     angle = Math.atan(mousey/mousex)/(Math.PI/180);
  17.     if (mousex<0) {
  18.         angle += 180;
  19.     }
  20.     if (mousex>=0 && mousey<0) {
  21.         angle += 360;
  22.     }
  23.     if (angle>160) {
  24.         angle = 160;
  25.     }
  26.     if (angle<20) {
  27.         angle = 20;
  28.     }
  29.     firepower = Math.sqrt(mousex*mousex+mousey*mousey);
  30.     if (firepower>200) {
  31.         firepower = 200;
  32.     }
  33.     this.cannon._rotation = angle*-1;
  34. };
  35. function onMouseDown() {
  36.     if (fired<max_firepower) {
  37.         fired++;
  38.         angle = tank.cannon._rotation-1;
  39.         start_ball_x = tank._x+48*Math.cos(angle*Math.PI/180);
  40.         start_ball_y = tank._y+48*Math.sin(angle*Math.PI/180);
  41.         cannonball_fired = attachMovie("cannonball", "cannonball_"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:start_ball_x, _y:start_ball_y});
  42.         cannonball_fired.dirx = Math.cos(angle*Math.PI/180)*firepower;
  43.         cannonball_fired.diry = Math.sin(angle*Math.PI/180)*firepower;
  44.         cannonball_fired.onEnterFrame = function() {
  45.             this.diry += gravity;
  46.             this._x += this.dirx/30;
  47.             this._y += this.diry/30;
  48.             if ((this._y>350) or (ground.hitTest(this._x, this._y, true))) {
  49.                 this.removeMovieClip();
  50.                 fired--;
  51.             }
  52.             if (enemy.hitTest(this._x, this._y, true)) {
  53.                 this.removeMovieClip();
  54.                 enemy.removeMovieClip();
  55.                 fired--;
  56.                 place_enemy();
  57.             }
  58.         };
  59.     }
  60. }
  61. function place_enemy() {
  62.     enemy_placed = attachMovie("enemy", "enemy", _root.getNextHighestDepth(), {_x:0, _y:350});
  63.     enemy_placed.yspeed = 0;
  64.     enemy_placed.onEnterFrame = function() {
  65.         this.yspeed += gravity/10;
  66.         this._x++;
  67.         while (_root.ground.hitTest(this._x+this._width/2, this._y+this._height, true)) {
  68.             this._y--;
  69.             this.yspeed = 0;
  70.         }
  71.         if (!_root.ground.hitTest(this._x+this._width/2, this._y+this._height+1, true)) {
  72.             this._y += this.yspeed;
  73.         } else {
  74.             this.yspeed = 0;
  75.         }
  76.         if (this._x>500) {
  77.             this.removeMovieClip();
  78.             place_enemy();
  79.         }
  80.     };
  81. }

Lines 52-57: if a bullet hits THE enemy (I will explain that bold "the" later), I remove both the bullet (decreasing the fired variable) and the enemy and place another enemy.

It's very simple, but I wrote that "the" because I know that A bullet on the stage can hit only THE only enemy on the stage.

When we'll have lots of bullet that can hit lots of targets, it gets a bit more complicated.

That's what I'll cover during next step, coming soon.

Meanwhile, download the sources and give me feedback.

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (20 votes, average: 4.75 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.

32 Responses to “Create a flash artillery game – step 2”

  1. Callum on May 25th, 2007 8:22 pm

    Wow, thats pretty good. Im making a Game where one of my teachers is throwing geography books at you and you have to shoot the geog books and at the end kill him xD

    Im using 2 of your tutorials and when Im finished ill show you the final thing xD

  2. And Mar on May 25th, 2007 11:39 pm

    Hey I made a game using some of your tutes. Its not very good but its my first.

    http://andmargames.bravehost.com/jetpack.html

  3. Eblup on May 26th, 2007 2:20 am

    veary good well don iam kinda con fused on how to wright action script in frames instead of movie clips.

  4. And Mar on May 27th, 2007 4:45 am

    To write actionscript in frames, just click on the keyframe and open the actions panel.

  5. David on May 29th, 2007 9:05 am

    hey
    love yout tuts i was wondering how could you instead of using mouse click to fire you press space bar? plz someone tell me how thx

    :)

  6. person on June 5th, 2007 5:40 pm

    I can only shoot one bullet at a time and when I shoot the enemy suddenly disappears, does anyone know how to fix this? thanks

  7. Brandon on June 8th, 2007 9:04 pm

    how do you add more enemys????

  8. sammo on June 20th, 2007 5:46 am

    Hey great tutes it’s really hard to find good ones with good English and not too much detail. Look forward to more.

  9. bipin chander on June 22nd, 2007 11:01 am

    help me to learn to make flash game

  10. X-99 on June 23rd, 2007 11:14 pm

    I’m making a game at the moment,
    so when your player touches the mighty and powerfull enemy
    you would go back to frame 1.
    Please help ME!!!!!!!!!!

  11. Tony on June 28th, 2007 10:04 am

    [In the player movieclip]

    if(_root.mightyandpowerfulenemy.hitTest(this)){
    _root.gotoAndPlay(1);
    }

  12. Marnix Pop on June 28th, 2007 12:49 pm

    Nice tutorial you go there! Everything works, but it’s pretty hard to make the turret itself work correctly. Could you maybe make a defense game tutorial? Lots of people are asking for one, and I bet you can make one. ^^,

  13. Andy on August 14th, 2007 9:42 pm

    i couldn’t get the rotation limiter to work with a script with similar to this.

    Please help!

  14. jummers on September 8th, 2007 3:01 pm

    how could i do it so the cannon and the tank moved with the arrow keys?

  15. Ozzy on September 15th, 2007 8:22 pm

    please help me,
    i’m making a game like this, and when the cannonball hits the enemy the enemy explodes.

    the actionscript:
    if (enemy.hitTest(this._x, this._y, true)) {
    _root.scoretext.text = deaths+ “Deaths!”;
    exp_sound.start();
    this.removeMovieClip();
    _root.enemy.play();
    fired–;
    place_enemy();
    }

    but the game still acts like the enemy is on stage, how do i remove him after the frames are played??

  16. zee on November 7th, 2007 3:03 pm

    Great tut very helpfull i added a score variable wich worked fine
    then i drew a death sequence in enemy and i wrote this code in the hit test

    ActionScript

    if (enemy.hitTest(this._x, this._y, true)) {
    _root.enemy.gotoAndPlay(2)
    score ++; this.removeMovieClip();
    enemy.removeMovieClip();
    fired–;
    place_enemy();

  17. Ruby on December 31st, 2007 5:30 pm

    Heya, I’m making a shooter game that allows the player to shoot 10 times. If he shot 10 times I want the game to end. I tried it with your tut but it did not work. In your tut you can have 3 shots at the stage max. But when they are gone you can shoot another 3 times.

    So my question is:
    How can flash make my player shoot 10 times max., with only one bullet on screen at the time?

    Thank you so much,
    Ruby

  18. Aaron on April 3rd, 2008 5:57 am

    Hey, I know you probably get a lot of emails, and messages, but. I’ve looked all over and can’t figure out a way to do what I’m trying to do. I’m making a side scrolling shooter, where the character is in the center of the screen and as you move around you can traverse a map. I’m going to figure out all that later, but for now I need to find a way to have it so that my character’s arm and selected gun stay attached to the character but point toward the cursor location. I’ve tried dozens of methods and nothing works right. Thanks in advance.

  19. Maniac on May 10th, 2008 6:57 pm

    =/ How do you combine the bouncing with getting rid of bullets that aren’t on the screen? No matter what I do to try and combine the two, I get an error.

  20. koala on June 2nd, 2008 6:36 pm

    @ Ruby
    make a damned counter.

  21. 90301 on July 17th, 2008 11:27 pm

    you did a.
    (_root.blank.hitTest)

    do this.
    _root.blank.hitTest(_x,_y,true) {

  22. fahad mohammad on October 25th, 2008 7:04 pm

    hi, please help.
    i added a dynamic score box edited the ground everything added clouds and all.
    and it worked. but when i added the kongregate highscore api ,everything went wrong, now the score doesnt work it jus says _level0 or somtimes NaN please help.

  23. Sam on January 19th, 2009 6:35 pm

    This works well! But I see that the hit test in the cannon ball relies on there being one definite enemy instance with a known name.

    How do you have it so there can be numerous enemies AND numerous cannonballs – where any enemy can collide with any cannonball?

    Would you need to create an array on which you place each instance – then loop through it?

  24. Cal on January 26th, 2009 3:38 pm

    when will there be a second step?

  25. Eliott on February 24th, 2009 8:00 pm

    Found the code on another website… http://www.foundation-flash.com/tutorials/turretpart1/

  26. vel on March 4th, 2009 9:00 am

    thank you

  27. Paanchow on July 2nd, 2009 5:01 pm

    por lo que entendi me gusto muchho el tutorial. lastima que no lo puedo completa por que no entiendo mucho inglés.

  28. Saberking13 on July 3rd, 2009 7:07 pm

    when will the next one come out?

Leave a Reply




Trackbacks

  1. Create a flash artillery game - step 1 at Emanuele Feronato on May 25th, 2007 5:19 pm

    [...] May 25th update: 2nd part released [...]

  2. Arch Games Webmasters - Arcade Webmasters » Game Developer tutorial List on May 13th, 2008 7:32 pm

    [...] http://www.emanueleferonato.com/2007/05/25/create-a-flash-artillery-game-step-2/ [...]

  3. Como criar jogos online (em flash)? on April 11th, 2009 10:20 pm

    [...] 11. Jogo de artilharia [...]

  4. Create a flash artillery game – step 2 | Tutorial Collection on July 1st, 2009 3:24 am

    [...] View Tutorial No Comment var addthis_pub="izwan00"; BOOKMARK This entry was posted on Wednesday, July 1st, 2009 at 6:54 am and is filed under Adobe Flash Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

Posts