TypeScript入門 ライフゲーム編

README

ライフゲーム http://ja.wikipedia.org/wiki/%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B2%E3%83%BC%E3%83%A0
size セルのサイズ
sparsity 初期状態での生物のまばらさ
wait mills 実行時の待ち時間（ミリ秒）

jsdoit.html

<canvas id="canvas" width="400" height="400"></canvas>
<br>
size <input id="size" type="text" size="5" value="10"><br>
sparsity <input id="sparsity" type="text" size="5" value="5"><br>
wait millis <input id="wait" type="text" size="5" value="100"><br>
<button id="init">init</button>
<button id="start">start</button>
<button id="stop">stop</button>

jsdoit.js

class Field {
    private maxX: number;
    private maxY: number;
    private context;
    private cell = {};
    private nextCell;
    private timer: number;
    
    constructor(private canvas: HTMLCanvasElement, private cellSize: number) {
        this.context = canvas.getContext('2d');
        this.init(10, 5);
    }
    
    public init(size: number, sparsity: number): void {
        var that = this;
        that.cellSize = size;
        this.maxX = Math.floor(canvas.width / that.cellSize);
        this.maxY = Math.floor(canvas.height / that.cellSize);
        this.forEach(function (i, j) {
            var life = (Math.floor(Math.random() * sparsity) === 0);
            if (!that.cell[i]) {
                that.cell[i] = {};
            }
            that.cell[i][j] = life;
        });
        this.draw();
    }

    private forEach(func) {
        var i, j;
        for (i = 0; i < this.maxX; i++) {
            for (j = 0; j < this.maxY; j++) {
                func(i, j);
            }
        }        
    }

    public draw(): void {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        var that = this;
        this.forEach(function (i, j) {
            if (that.cell[i][j]) {
                that.context.fillRect(i * that.cellSize, j * that.cellSize, that.cellSize, that.cellSize);
            }
        });
    }
    
    public generate(): void {
        var that = this;
        that.nextCell = {};
        this.forEach(function (i, j) {
            if (!that.nextCell[i]) {
                that.nextCell[i] = {};
            }
            that.nextCell[i][j] = that.nextLife(i, j);
        });
        that.cell = that.nextCell;
        this.draw();
    }
    
    private nextLife(x: number, y: number): bool {
        var lives = this.countSurroundingLives(x, y);
        var result = false;
        if (!this.cell[x][y] && lives === 3) {
            result = true; //born
        }
        if (this.cell[x][y] && (lives === 2 || lives === 3)) {
            result = true; //live
        }
        return result;
    }
    
    private countSurroundingLives(x: number, y: number): number {
        var count = 0;
        if (y > 0 && this.cell[x][y - 1]) count++;
        if (x < this.maxX - 1 && y > 0 && this.cell[x + 1][y - 1]) count++;
        if (x < this.maxX - 1 && this.cell[x + 1][y]) count++;
        if (x < this.maxX - 1 && y < this.maxY - 1&& this.cell[x + 1][y + 1]) count++;
        if (y < this.maxY - 1 && this.cell[x][y + 1]) count++;
        if (x > 0 && y < this.maxY - 1&& this.cell[x - 1][y + 1]) count++;
        if (x > 0 && this.cell[x - 1][y]) count++;
        if (x > 0 && y > 0 && this.cell[x - 1][y - 1]) count++;
        return count;
    }
    
    public start(wait: number): void {
        if (this.timer) {
            return;
        }
        var that = this;
        this.timer = setInterval(function () {
            that.generate();
        }, wait);
    }
    
    public stop(): void {
        if (this.timer) {
            clearInterval(this.timer);
        }
        this.timer = null;
    }
}

function $(id) {
    return document.getElementById(id);
}

function $value(id): number {
    return parseFloat((<HTMLInputElement>$(id)).value);
}

var canvas = <HTMLCanvasElement>$('canvas');
var field = new Field(canvas, 2);

$('init').onclick = function () {
    field.init($value('size'), $value('sparsity'));
}
document.getElementById('start').onclick = function () {
    field.start($value('wait'));
}
document.getElementById('stop').onclick = function () {
    field.stop();
}