app.ts

/// <reference path="scripts/typings/easeljs/easeljs.d.ts"/>
/// <reference path="scripts/typings/jquery/jquery.d.ts"/>

class Circle {
    circleShape: createjs.Shape;

    /**
     * 
     * @param x 
     * @param y 
     * @param radius 
     * @param color 
     * @returns {} 
     */
    constructor(x: number, y: number, radius: number, color: string) {
        this.circleShape = new createjs.Shape();
        this.circleShape.graphics.beginFill(color).drawCircle(x, y, radius);
    }

    /**
     * 
     * @param stage 
     * @returns {} 
     */
    draw(stage: createjs.Stage) {
        if (!stage.contains(this.circleShape)) {
            stage.addChild(this.circleShape);
        }
        stage.update();
    }

    /**
     * 
     * @param stage 
     * @param x 
     * @param y 
     * @returns {} 
     */
    move(stage: createjs.Stage, x: number = 0, y: number = 0): void {
        this.circleShape.x += x;
        this.circleShape.y += y;
        const canvas = <HTMLCanvasElement>(stage.canvas);
 
        if (this.circleShape.x > canvas.width) {
            this.circleShape.x = 0;
        }
        stage.update();
    }
}

window.onload = () => {
    const graphics = new createjs.Graphics();
    graphics.setStrokeStyle(1);
    graphics.beginStroke("#000000");
    graphics.beginFill("DeepSkyBlue");
    graphics.drawCircle(100, 100, 50);

    const  circle = new createjs.Shape(graphics);
    circle.x = 100;
    circle.y = 100;

    const stage = new createjs.Stage("demoCanvas");
    stage.addChild(circle);
    stage.update();

    let timer: number;
    const canvas = <HTMLCanvasElement>(stage.canvas);

    const moveCircle = (xDelta: number, yDelta: number = 0) => {
        circle.x += xDelta;
        circle.y += yDelta;

        if (circle.x > canvas.width) {
            circle.x = 0;
        } else if (circle.x <= 0) {
            circle.x = 600;
        }

        if (circle.y > canvas.height) {
            circle.y = 0;
        } else if (circle.y <= 0) {
            circle.y = 400;
        }
        stage.update();
    }

    $("#MoveRightButton").mousedown(() => {
        timer = setInterval(() => { moveCircle(5) }, 7);
    }).mouseup(() => clearInterval(timer));

    $("#MoveLeftButton").mousedown(() => {
        timer = setInterval(() => {moveCircle(-5)}, 7);
    }).mouseup(() => clearInterval(timer));

    $("#MoveUpButton").mousedown(() => {
        timer = setInterval(() => {moveCircle(0, -5)}, 7);
    }).mouseup(() => clearInterval(timer));

    $("#MoveDownButton").mousedown(() => {
        timer = setInterval(() => {moveCircle(0, 5)}, 7);
    }).mouseup(() => clearInterval(timer));
};