Create a Flash game like Gold Miner

October 4, 2008 by Emanuele Feronato
Filed Under Actionscript 2, Flash, Game design •  

Today I received an email from a reader asking me to make a tutorial of a game like Gold Miner.

Gold Miner

It's a Flash demo of a downloadable game, and I think its gameplay is interesting enough to deserve a tutorial.

The main actor in this game is the hook (in the original game, a claw).

The hook can have three states, that I defined this way:

rotate: that's when the hook is rotating from left to right at the top of the screen. If the player presses the mouse the state turns to...

shoot: the hook moves in a fixed direction (the one it had when the player pressed the mouse) until it hits a gem or flies off the screen. Then the state turns again to...

rewind: the hook returns, in a straight path, to its initial position and changes the state to rotate, allowing the player to shoot again.

Rewind speed is the same as shoot speed if the hook did not take any boulder, while if the hook has a boulder attached, there will be a slowdown according to boulder size

Let's see the commented code... remember that the hook is linked as pod while the gem as boulder

PLAIN TEXT
ACTIONSCRIPT:
  1. // number of boulders in the game
  2. boulders = 20;
  3. for (x=1; x<=boulders; x++) {
  4.     // creating the boulders
  5.     bould = _root.attachMovie("boulder", "boulder_"+_root.getNextHighestDepth(), _root.getNextHighestDepth());
  6.     // placing them in random positions and with random dimensions
  7.     bould._x = Math.floor(Math.random()*400)+50;
  8.     bould._y = Math.floor(Math.random()*200)+150;
  9.     bould._width = Math.floor(Math.random()*30)+20;
  10.     bould._height = bould._width;
  11.     // setting picked attribute as false
  12.     // picked = false => the boulder has not been picked by the hook
  13.     // picked = true => the boulder has been picked
  14.     bould.picked = false;
  15.     // function to be executed at every frame for the boulder
  16.     bould.onEnterFrame = function() {
  17.         // if it's not been picked...
  18.         if (!this.picked) {
  19.             // check if the hook is in shoot mode and touched the boulder
  20.             // you'll see later what do hot_spot_x and hot_spot_y mean
  21.             if (pod_status == "shoot" and this.hitTest(hot_spot_x, hot_spot_y, true)) {
  22.                 // set the hook on rewind mode
  23.                 pod_status = "rewind";
  24.                 // mark this boulder as picked
  25.                 this.picked = true;
  26.                 // determining the slowdown according to boulder size
  27.                 slowdown = Math.floor(this._width/5);
  28.             }
  29.         }
  30.         else {
  31.             // the boulder has been picked, so move it as the hook moves
  32.             this._x = hot_spot_x;
  33.             this._y = hot_spot_y;
  34.             // if the hook status changed to rotate
  35.             // (this means: if the hook took a boulder and pulled it out to surface...
  36.             if (pod_status == "rotate") {
  37.                 // remove the boulder
  38.                 this.removeMovieClip();
  39.             }
  40.         }
  41.     };
  42. }
  43. // placing the hook on stage
  44. _root.attachMovie("pod","pod",_root.getNextHighestDepth(),{_x:250});
  45. // creating an empty movie clip to draw the rope
  46. _root.createEmptyMovieClip("rod",_root.getNextHighestDepth());
  47. // this is the rotation direction and speed
  48. rotation_dir = 2;
  49. // hook initial status
  50. pod_status = "rotate";
  51. // slowdown malus
  52. slowdown = 0;
  53. // function the hook will execute at every frame
  54. pod.onEnterFrame = function() {
  55.     // getting pod status
  56.     switch (pod_status) {
  57.         case "rotate" :
  58.             // if the status is rotate, just rotate the hook according to rotation_dir
  59.             this._rotation += rotation_dir;
  60.             if (this._rotation == 80 or this._rotation == -80) {
  61.                 // invert rotation_dir if the hook reaches its minimum (or maximum) rotation allowed
  62.                 rotation_dir *= -1;
  63.             }
  64.             break;
  65.         case "shoot" :
  66.             // the hook has ben shoot
  67.             // (re)set slowdown malus to zero
  68.             slowdown = 0;
  69.             // moving the hook using trigonometry
  70.             this._x += 10*Math.cos(dir);
  71.             this._y += 10*Math.sin(dir);
  72.             // determining the hot spot of the hook
  73.             // the hot spot is the lowest corner of the hook (that acts like an harpoon in this case)
  74.             hot_spot_x = this._x+40*Math.cos(dir);
  75.             hot_spot_y = this._y+40*Math.sin(dir);
  76.             // if the hot spot goes off the stage
  77.             if (hot_spot_y>400 or hot_spot_x<0 or hot_spot_x>500) {
  78.                 // then rewind the hook
  79.                 pod_status = "rewind";
  80.             }
  81.             // draw a line from the hook starting position to its actual position
  82.             // this will simulate the rope
  83.             rod.clear();
  84.             rod.lineStyle(1,0x000000);
  85.             rod.moveTo(250,0);
  86.             rod.lineTo(this._x,this._y);
  87.             break;
  88.         case "rewind" :
  89.             // rewinding the hook...
  90.             // it may seem a nonsense determining the hot spot now, but I need id
  91.             // to move the boulder (if I have any boulder attached to the hook)
  92.             hot_spot_x = this._x+40*Math.cos(dir);
  93.             hot_spot_y = this._y+40*Math.sin(dir);
  94.             // moving the hook with slowdown malus (if any)
  95.             this._x -= (10-slowdown)*Math.cos(dir);
  96.             this._y -= (10-slowdown)*Math.sin(dir);
  97.             // if the hook returns in its initial position...
  98.             if (this._y<0) {
  99.                 // then reset its position and set its status to rotate
  100.                 this._y = 0;
  101.                 this._x = 250;
  102.                 pod_status = "rotate";
  103.             }
  104.             // drawing a line as seen in shoot status
  105.             rod.clear();
  106.             rod.lineStyle(1,0x000000);
  107.             rod.moveTo(250,0);
  108.             rod.lineTo(this._x,this._y);
  109.             break;
  110.     }
  111. };
  112. // when the mouse is clicked...
  113. _root.onMouseDown = function() {
  114.     // if the status is rotate...
  115.     if (pod_status == "rotate") {
  116.         // save hook heading and convert it to radians
  117.         dir = (pod._rotation+90)*0.0174532925;
  118.         // set pod status to shoot
  119.         pod_status = "shoot";
  120.     }
  121. };

And this is the result

As you can see, the basics have been reproduced.

Download the source code.

Improve the blog rating this post
Tell me what do you think about this post. I'll write better and better entries.
1 Star2 Stars3 Stars4 Stars5 Stars (17 votes, average: 4.71 out of 5)
Loading ... Loading ...

» 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.

12 Responses to “Create a Flash game like Gold Miner”

  1. Jack Hopkins on October 4th, 2008 5:57 pm

    Cool! I loved this game when I first played it :D

  2. Josh of Cubicle Ninjas on October 4th, 2008 7:15 pm

    Very cool game idea!

  3. Christian on October 4th, 2008 11:12 pm

    hey really cool game…played it for 30mins+ and this is rare for me ;)

  4. Erv on October 5th, 2008 3:22 pm

    A million thanks Emanuele!

    I’ll show you once I finish the game now.

    Erv

  5. Erv on October 5th, 2008 4:01 pm

    Altho I was wondering how is it possible to add the Boulders manually and being able to move the base of the rope left n right.

  6. val on October 5th, 2008 6:03 pm

    this is awesome!!

  7. MalQue on October 6th, 2008 12:18 am

    This reminds me of Double Wire without the swinging. (DW)was AWESOME! but this is cool too.

  8. anonymouse on October 6th, 2008 12:20 pm

    This is great!

    could you show how to also make lead boulders, like there are in the game?

    I keep trying but it stuffs up.

    thanks

  9. lolek on October 9th, 2008 6:16 pm

    I made a game based on this, but i have a problem… the boulders aren’t removed on the next frame (they tay tehre?!?!?) how to remove them?

  10. miff on October 13th, 2008 12:14 am

    @lolek,if you doing with frames you probably use bould_n.removeMovieClip();
    Create some loop like
    for (x=1; x<=boulders; x++)
    {
    [”bould_”+x}.removeMovieClip();
    }
    to clear stage or something…
    or boulders may be in own “layer” then will be
    boulders_ly.removeMovieClip()….
    so many ways to do it, read help and this blog:)

  11. raelz on October 25th, 2008 2:32 pm

    Again, thanks for this great tutorial. I’m a newbie, so don’t consider this as criticising, I am merely trying to understand the code:
    Wouldn’t it be better to determine the hotspot somewhere outside the switch, so it doesn’t have to be determined over and over?

Leave a Reply




Trackbacks

  1. Create a Flash game like Gold Miner - step 2 : Emanuele Feronato on October 10th, 2008 4:02 pm

    [...] received a lot of emails asking me to add left-right movement to my Gold Miner clone and requiring more information about manually placing the [...]