加速度(javascriptで実装)

加速度とは「単位時間あたりにどのくらい速度が変化するか」を表します。
加速度をjavascriptで実装してみます。

---

html

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

javascript

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

実行すると速度を上げながら短形が移動していきます。
速度がvelocityX 、加速度がaccelX、距離の座標がposX です。