速度(javascript実装)

canvasの知識やゲーム作成の勉強を兼ねて、ブログに残しておきます。
まずは速度から。
一定の速度で右方向へ移動する単純なアプリからはじめよう。

一定の間隔で繰り返し呼び出される関数はJavaScriptの場合は、setInterval関数を使うのが簡単。

setInterval(メイン処理の関数,関数を呼び出す間隔(msec));

以下ソース

html

    <canvas id='viewer' width="600" height="600"></canvas>

javascript

let ctx, posX = 0, velocityX = 5;
function init() {
    ctx = document.getElementById('viewer').getContext('2d');
    setInterval(tick, 100);
}
function tick() {
    posX += velocityX;
    if (posX > 600) {
        posX = 0;
    }
    paint();
}
function paint() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, 600, 600);
    ctx.fillStyle = 'white';
    ctx.fillRect(posX, 200, 10, 10);
    ctx.fill();
}
window.onload = init;

速度を早くする場合、以下のどちらか、もしくは以下の２つを組み合わせます。

• 一回で追加する量velocityXを増やす
• 関数tick()を呼び出す間隔を短くする