Get the full commented source code of

HTML5 Suika Watermelon Game

Talking about Metro Siberia Underground game, Flash and Game development.

Multipart tutorial: available parts 1, 2, 3, 4 ,5

In this 4th part I’ll cover the code written in 3rd part. You should read parts 1 and 2 too, because I will comment only the new code.

For a better understanding, I’ll re-publish the code

import flash.filters.GlowFilter;
var ship_filter:GlowFilter = new GlowFilter(0x00ff00, 0.8, 4, 4, 2, 3, false, false);
var smoke_filter:GlowFilter = new GlowFilter(0xff0000, 0.8, 4, 4, 2, 3, false, false);
var tunnel_filter:GlowFilter = new GlowFilter(0xffff00, 0.8, 4, 4, 2, 3, false, false);
var fuel_filter:GlowFilter = new GlowFilter(0x00ffff, 0.8, 4, 4, 2, 3, false, false);
var rock_filter:GlowFilter = new GlowFilter(0xffffff, 0.8, 4, 4, 2, 3, false, false);
var score_filter:GlowFilter = new GlowFilter(0xff00ff, 0.8, 2, 4, 2, 3, false, false);
gravity = 0.1;
thrust = 0.25;
yspeed = 0;
xspeed = 5;
distance = 0;
smoke_interval = 10000;
frames_passed = 0;
tunnel_height = 150;
fuel_freq = 10;
gasoline = 500;
rock_freq = 50;
engines = false;
_root.attachMovie("ship", "ship", _root.getNextHighestDepth(), {_x:150, _y:200});
_root.createEmptyMovieClip("fuel_movie", _root.getNextHighestDepth());
_root.createEmptyMovieClip("deadly_movie", _root.getNextHighestDepth());
_root.attachMovie("score", "score", _root.getNextHighestDepth());
ship.filters = new Array(ship_filter);
score.filters = new Array(score_filter);
ship.onEnterFrame = function() {
    score.sc.text = "Distance: "+distance+" - "+"Fuel: "+gasoline;
    if ((gasoline>0)and(engines)) {
        yspeed -= thrust;
        smoke_interval -= 0.25;
        gasoline -= 1;
    }
    if (Math.random()*1000=smoke_interval) {
        sm = _root.attachMovie("smoke", "smoke"+_root.getNextHighestDepth(), _root.getNextHighestDepth(), {_x:this._x-2, _y:this._y});
        sm.filters = new Array(smoke_filter);
        sm.onEnterFrame = function() {
            this._x -= xspeed;
            this._width += 0.2;
            this._height += 0.2;
            this._alpha -= 2;
            if (this._alpha<=0) {
                this.removeMovieClip();
            }
        };
        frames_passed = 0;
    }
    if ((this._y>400) or (this._y<0) or deadly_movie.hitTest(this._x+28*Math.cos(angle), this._y+28*Math.sin(angle), true) or deadly_movie.hitTest(this._x+8*Math.cos(angle+Math.PI/2), this._y+8*Math.sin(angle+Math.PI/2), true) or deadly_movie.hitTest(this._x+8*Math.cos(angle-Math.PI/2), this._y+8*Math.sin(angle-Math.PI/2), true)) {
        yspeed = 0;
        this._y = 200;
        gasoline = 500;
        distance = 0;
        deadly_movie.removeMovieClip();
        fuel_movie.removeMovieClip();
        _root.createEmptyMovieClip("fuel_movie", _root.getNextHighestDepth());
        _root.createEmptyMovieClip("deadly_movie", _root.getNextHighestDepth());
    }
};
_root.onMouseDown = function() {
    engines = true;
    smoke_interval = 10;
};
_root.onMouseUp = function() {
    engines = false;
    smoke_interval = 100000;
}; 

Lines 5-7: New filters used for the rock object (the white square), the fuel object (the blue circle) and the score written at the upper left corner. Since there isn't any tunnel in this example, you can remove line 4 if you want

Line 15: You can remove this line too if you want

Line 16: A variable that determines the fuel spawn frequency. Higher value means higher freq

Line 17: This is the amount of gasoline in your ship

Line 18: A variable that determines the rock spawn frequency... same thing as the fuel one seen at line 16

Line 21: Creating a new movieclip to host all fuel cans.

Line 22: New movieclip to host all rocks

Line 23: Attaching the score movieclip

Line 25: Applying the filter to score movieclip

Line 27: Showing distance traveled and remaining fuel

Line 28: As you can see in the if statement, now you must have gasoline in order to give thrust to your spaceship

Line 31: Obviously giving thrust will cost you some gasoline...

Line 33: Checking if it's time to spawn a can of gasoline

Line 34: if true, then attach a fuel movieclip in the game at a random position

Line 35: Applying the filter to fuel movieclip

Line 36: Function to be executed by the fuel tank at every frame

Line 37: Moving the fuel tank according to ship's speed. Notice that there is a 1.2 multiplier to make the fuel move faster than rocks

Lines 38-40: Calculating the distance from the head of the spaceship and the centre of the fuel tank using trigonometry. More information about trigonometry at Create a flash draw game like Line Rider or others - part 3. I want the gasoline to be collected only with the head of the ship, to give the game some kind of "realism"

Lines 41-44: If the distance is less than 10 (the radius of the gasoline tank), then add 100 units of gasoline and remove the fuel tank

Lines 45-47: If the fuel tank leaves the game to the left, then remove it

Line 50: Checking if it's time to spawn an asteroid (a rock)

Line 51: if true, then attach a rock movieclip in the game at a random position wiht a random rotation

Line 52: Applying the filter to rock movieclip

Line 53: Function to be executed by the rock at every frame

Lines 54-57: Moving the rock according to ship's speed. If the rock leaves the game to the left, then remove it

Lines 80-89: Checking if the ship hits the rocks or goes too high or too low... if true, resetting the game

That's all...

Multipart tutorial: available parts 1, 2, 3, 4 ,5

Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.