Game2D Collision

Sample Collision explains how to implement simple collision in Moscrif. Snake head collides with water drop, both are instances of Game2d Sprite. Key words: game, sprite, collision, bitmap

Show screenshots (4)

Sample collision consists of background, water drops and snakehead. Snake direction is set to down, what leads snakehead into bottom of the screen. Once snakehead reaches the bottom border, the sample ends.

Background is a simple Sprite object with its own draw method.

//load background as game sprite
this.bg = new Sprite({image:"app://gfx/bg.png"});
this.bg.draw = function(canvas)
{
//override sprite draw, and draw simple image on Canvas
canvas.drawBitmap(this.image,0,0);
}

Drop is a separated class extended from Sprite class. Bitmap of the drop is declared as static variable, what is better solution as it creates bitmap object each time Drop object is created.

include "lib://game2d/sprite.ms"; /**
Drop, simple game sprite contains with image of a water drop
*/
class Drop : Sprite
{
    //load image to static variable, because we can have more drops, but we need only one bitmap in memory
    var DROP_IMG = Bitmap.fromFile("app://gfx/drop.png");     function init()
    {
        super.init();

        //declare sprite's image
        this.image = DROP_IMG;
    }
}

To illustrate the collision, there are three dots defined in Game.onStart method. Each of the drops has different location and one of the drop is in trajectory of the snakehead.

//create container for drop objects
this.drops = new Array(); //create three drops and add to drops container
var drop = new Drop();
drop.x = this.bg.width/2 + 40;
drop.y = 150;
this.drops.push(drop);
this.add(drop); var drop2 = new Drop();
drop2.x = this.bg.width/2 - 40;
drop2.y = 300;
this.drops.push(drop2);
this.add(drop2); var drop3 = new Drop();
drop3.x = this.bg.width/2;
drop3.y = 500;
this.drops.push(drop3);
tthis.add(drop3);

Snakehead, the most important part in the sample collision. It is a class extended from the Sprite class and it covers all directions of the snake within 4 frames. For this sample, we need to demonstrate movement into bottom of the screen. Therefore property direction is set to #down in the constructor of the Head. Frame width and frame hight is set to 40 pixels.

include "lib://game2d/sprite.ms"; /**
Head, game sprite define in four frames snake head
*/
class Head : Sprite
{
    //load images to static variables     function init()
    {
        super.init();
        //init direction
        this._direction = #right;
        //load image from file
        this.image = "app://gfx/head.png";
        this.frameWidth = 43;
        this.frameHeight = 46;     }         property direction(v)
    {
        get return this._direction;
        set {
            this._direction = v;
            switch (this._direction) {
                case #right : this.frame = 1; break;
                case #left : this.frame = 3; break;
                case #up    : this.frame = 0; break;
                case #down : this.frame = 2; break;
            }
        }
    }     }

Snake body moves with every game tick (default set to 300 miliseconds). In this demo, the direction of the snake is set to down. If snakehead collides with a drop, it disappears from the screen.

//create head and init position and direction
this.head = new Head();
this.head.x = this.bg.width/2;
this.head.y = 0;
this.head.direction = #down;
this.head.onProcess = function(){ var self = this super; //Check time, which passed from last refresh
if (System.tick - Game.instance.tick < Game.instance.time)
return; //set new system tick
Game.instance.tick = System.tick; //move snake into bottom of the screen
this.y += this.frameWidth; //if snake reach corner of the backgroud, sample finish
if (this.x >= self.bg.width || this.y >= self.bg.height){
self.pop(); //end Game
} //check collisions with drops
for (var d in self.drops)
if (this.intersectsBounds(d)){
                self.drops.removeByValue(d);
                d.visible = false;
            }
}