Game2D Touch Control

This sample explains how to move the object and control the direction by tapping on the device screen. We re-used Snakehead sprite from the Snake demo. Key words: Game, Spite, Movement, Moving object, Bitmap

Show screenshots (4)

Sample touch control contains Background sprite object and Head class extended from the Sprite.

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);
}

Snakehead is the most important part in sample touch control. It is a class extended from the Sprite class and covers all snake directions within 4 frames. Frame width and frame hight is set to 40 pixels.

include "lib://game2d/sprite.ms"; 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;
            }
        }
    }     }

Movement of the snakehead is managed iby Head.onProcess method. With combination with Head.direction property, snakehead changes direction and picture. If snakehead reaches background border, it comes out from the opposite border and direction does not change. Movement of the snakehead is done within system and snakehead tick.

this.head.direction = #right;
    this.head.onProcess = function(sender)
    {
        var self = this super;
        //Check time, which passed from last refresh
        if (System.tick - self.tick < self.time){             //return snake heat into playground if it has reach playground border
            if (this.x > self.bg.width)this.x = 0;
            if (this.x < 0)this.x = self.bg.width;             if(this.y > self.bg.height)this.y = 0;
            if(this.y < 0) this.y = self.bg.height;             return;
        }         //set new system tick
        self.tick = System.tick;         //Move head by direction
        switch(this.direction)
        {
            case #left:     this.x -= this.frameWidth; break;
            case #right:    this.x += this.frameWidth; break;
            case #up:       this.y -= this.frameHeight; break;
            case #down:     this.y += this.frameHeight; break;
        }     }

Direction of the snakehead is controlled in Game.onPointerPressed event. Each time the user touches on the device screen, Game.onPointerPressed event is fired.

game.onPointerPressed = function(sender, x, y)
{
    //change head direciton by pressed on screen
    if (this.head.direction == #left || this.head.direction == #right) {
        if (y         if (y>this.head.y) this.head.direction = #down;
    }     else if (this.head.direction == #up || this.head.direction == #down) {
        if (x         if (x>this.head.x) this.head.direction = #right;
    }
}