SAMPLE

今回制作するサンプルはこちら.

VIDEO

チュートリアルムービー

CODE

今回制作したサンプルの script 部分です.

// 定数
var FPS             = 60;
var SCREEN_WIDTH    = 640;
var SCREEN_HEIGHT   = 480;
var CIRCLE_RADIUS   = 30;
var CIRCLE_MAX_NUM  = 10;

// グローバル
var global = {};
global.context      = null;
global.circleList   = [];

window.onload = function()
{
    init();
    run();
};

var init = function()
{
    var canvas = $id("c");
    global.context = canvas.getContext("2d");
    
    for (var i=0; i<CIRCLE_MAX_NUM; ++i)
    {
        global.circleList.push(new Circle(
            100*i+10, 100, "white"
        ));
    }
};

var run = function()
{
    var _run = function()
    {
        update();
        draw();
        
        setTimeout(_run, 1000.0/FPS);
    };
    
    setTimeout(_run, 1000.0/FPS);
};

var update = function()
{
    for (var i=0,len=global.circleList.length; i<len; ++i)
    {
        global.circleList&#91;i&#93;.update();
    }
};

var draw = function()
{
    var ctx = global.context;
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
    
    // 円を描画
    for (var i=0,len=global.circleList.length; i<len; ++i)
    {
        global.circleList&#91;i&#93;.draw(ctx);
    }
};


/**
 * Circle クラス
 */
var Circle = function(x, y, color)
{
    this.x = x || 0;
    this.y = y || 0;
    this.color = color || "white";
};

Circle.prototype = {
    x: null,
    y: null,
    color: null,
    
    update: function()
    {
        ++this.x;
        ++this.y;
    },
    
    draw: function(ctx)
    {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, CIRCLE_RADIUS, 0, Math.PI*2, false);
        ctx.fill();
        ctx.closePath();
    }
};
&#91;/code&#93;</pre>
</section>

<section>
    <h2>TIPS</h2>
    <section>
    <h3>クラスを定義</h3>
    <p>
        クラス定義の方法については以前<a href="http://tmlife.net/programming/javascript/javascript-define-class-definition.html">こちら</a>で詳しく説明しています.
        今回は C++ と比較しながら解説してみます.
    </p>
    <p>
        JavaScript のクラス定義の方法は少し変わっています. 正確には JavaScript には class という概念はなく
        prototype チェーンを使って class のような挙動を実現する形になります.
    </p>
    
    <h4>JavaScript クラス定義</h4>
    <p>
        今回のサンプルでは下記のコードで Circle class を定義しています.
    </p>
    <pre class="prettyprint">[code]
/**
 * Circle クラス
 */
var Circle = function(x, y, color)
{
    this.x = x || 0;
    this.y = y || 0;
    this.color = color || "white";
};

Circle.prototype = {
    x: null,
    y: null,
    color: null,
    
    update: function()
    {
        // TODO: 更新
    },
    
    draw: function(ctx)
    {
        // TODO: 描画
    }
};

C++ クラス定義

C++ で同じようなクラスを定義すると下記のような形になります.

class Circle {
public :
    Circle(int x=0, int y=0) : _x(x), _y(y) {}
    
    void update() {
        // TODO: 更新
    }
    
    void draw() {
        // TODO: 描画
    }
    
private:
    int _x;
    int _y;
};

C/C++ や Java を学んだことのある方は上記のコードで照らしあわせていただければなんとなく JavaScript での クラス定義の方法が分かるかと思います.

変数にデフォルト値を設定

JavaScript のちょっとした小技です.

this.x = x || 0;

と書くと x に数値が入っていた場合は x が, undefined だった場合 0 が this.x に入ります.

JavaScript ではよく使うので覚えておいて下さい.