CreateJS example

Zapote.ts

module Zapote {
    /// <reference path="typings/easeljs/easeljs.d.ts"/>
    /// <reference path="typings/createjs-lib/createjs-lib.d.ts"/>
    /// <reference path="typings/tweenjs/tweenjs.d.ts"/>
    class GameItem {
        shape: createjs.Shape;
        speedX: number;
        speedY: number;
        speedAlpha: number;
        constructor(shape: createjs.Shape, speedX: number, speedY: number, speedAlpha: number) {
            this.shape = shape;
            this.speedX = speedX;
            this.speedY = speedY;
            this.speedAlpha = speedAlpha;
        }
    }
    export class Game {
        background: createjs.Shape;
        circle: createjs.Shape;
        stage: createjs.Stage;
        isDrawing: boolean;
        circles: Array<GameItem>;
        backgroundImage1: createjs.Bitmap;
        backgroundImage2: createjs.Bitmap;
        backgroundIndex: number;
        background1Y: number;
        background2Y: number;
        constructor() {
            var demoCanvas = document.getElementById("demoCanvas") as HTMLCanvasElement;
            demoCanvas.width = document.body.clientWidth;
            demoCanvas.height = document.body.clientHeight;
            //Create a stage by getting a reference to the canvas
            this.stage = new createjs.Stage("demoCanvas");
            this.backgroundIndex = 0;
            this.background1Y = 0;
            this.background2Y = -1;
            this.background = new createjs.Shape();
            this.background.graphics.beginFill("black").drawRect(0, 0, demoCanvas.width, demoCanvas.height);
            this.backgroundImage1 = new createjs.Bitmap("/images/seamless space times 4.png");
            this.backgroundImage2 = new createjs.Bitmap("/images/seamless space times 4.png");
            this.circles = [];
            createjs.Ticker.addEventListener("tick", this.handleTick);
            this.stage.addChild(this.backgroundImage1);
            this.stage.addChild(this.backgroundImage2);
            this.stage.addEventListener("stagemousedown", this.handleMouseDown);
            this.stage.addEventListener("stagemousemove", this.handleMouseMove);
            this.stage.addEventListener("stagemouseup", this.handleMouseUp);
        }
        private reduceAlpha = (item: GameItem) => item.shape.alpha -= item.speedAlpha;
        private applySpeedX = (item: GameItem) => item.shape.x += item.speedX;
        private applySpeedY = (item: GameItem) => item.shape.y += item.speedY;
        private applySpeed = (item: GameItem) => {
            this.applySpeedX(item);
            this.applySpeedY(item);
        };
        private isDisposable = (item: GameItem) => item.shape.alpha <= 0;
        private isAlive = (item: GameItem) => !this.isDisposable(item);
        private removeFromStage = (item: GameItem) => this.stage.removeChild(item.shape);
        private isTimeToAddRandomCircle = () => Math.random() < 0.1;
        private getStageCanvas = () => this.stage.canvas as HTMLCanvasElement;
        private getStageWidth = () => this.getStageCanvas().width;
        private getStageHeight = () => this.getStageCanvas().height;
        private getRandomX = () => this.getStageWidth() * Math.random();
        private getRandomY = () => this.getStageHeight() * Math.random();
        private addRandomCircle = () => this.addCircle(this.getRandomX(), this.getRandomY());
        private handleTick = () => {
            if (this.isTimeToAddRandomCircle()) this.addRandomCircle();
            this.circles.map(this.reduceAlpha);
            this.circles.map(this.applySpeed);
            this.circles.filter(this.isDisposable).map(this.removeFromStage);
            this.circles = this.circles.filter(this.isAlive);
            this.stage.update();
        }
        private handleMouseDown = (event: createjs.MouseEvent) => {
            this.isDrawing = true;
            this.addCircle(event.stageX, event.stageY);
        }
        private handleMouseMove = (event: createjs.MouseEvent) => {
            if (this.isDrawing) {
                this.addCircle(event.stageX, event.stageY);
            }
        }
        private handleMouseUp = (event) => {
            this.addCircle(event.stageX, event.stageY);
            this.isDrawing = false;
        }
        private getRandomSpeedAlpha = () => (Math.random() * 0.08) + 0.001;
        private getRandomSpeedPosition = () => (Math.random() * 31) - 15;
        private getRandomRadiusBasedOnSpeed = (speedX: number, speedY: number) => (Math.abs(speedX) + Math.abs(speedY) + 10);
        private addCircle = (x: number, y: number) => {
            var speedAlpha = this.getRandomSpeedAlpha();
            var speedX = this.getRandomSpeedPosition();
            var speedY = this.getRandomSpeedPosition();
            var radius = this.getRandomRadiusBasedOnSpeed(speedX, speedY);
            var circle = new GameItem(new createjs.Shape(), speedX, speedY, speedAlpha);
            circle.shape.graphics.beginFill(this.getColor(this.getRandomByte(), this.getRandomByte(), this.getRandomByte(), 1)).drawCircle(0, 0, radius);
            circle.shape.x = x;
            circle.shape.y = y;
            this.stage.addChild(circle.shape);
            this.circles.push(circle);
            return circle;
        }
        private getRandomByte = () => {
            return 64 + Math.round((Math.random() * 193));
        }
        private getColor = (r: number, g: number, b: number, a: number) => {
            return `rgba(${r},${g},${b},${a})`;
        }
    }
}