【javascript】初心者だけど物理エンジンつくる！その３【html】

Javascript

sekibotbot.hatenablog.jp

前回、等速度運動の書き方がわかったので
次はいよいよそれっぽくなる重力をつけてみた.

いろいろな情報はこちらから

Javascript カテゴリーの記事一覧 - sekibotbotのブログ


↑スポンサードリンク



目標


用意するもの

mypage.html(ここをおえかきするキャンバスにする)#今回はいじらない
myscript.js(ここで動きをかく)
とこんな感じでファイルを2つ用意する.
この二つは同じディレクトリに置いてます.

かんがえかた

重力加速度を計算して、それに応じて位置を変える。
加速度は１秒間あたりにどのくらい速度が変わるか
という指標だから1秒間あたりGRAVITYだけ速度を変えて、
その分移動させるようにした。

これを追加するだけですごくそれっぽい動きをするようになりますね！

code

myscript.js

        //速度
    var speedX = 0.0; 
    var speedY = -10.0; 
    //位置
    var locX = 200;
    var locY = 400;
    //canvasを使うのに必要なもの
    var ctx;
    //フレームレート
    const FPS = 60;
    //draw関数の更新時間
    const TIME = 1000/FPS;
    //重力加速度の大きさ
    const GRAVITY = 9.8;

    //最初にロードされる
    function init(){
    var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
            ctx = canvas.getContext('2d');
            setInterval(draw, TIME);
        }
    }

    //draw関数を繰り返し呼ぶことで絵を描く
    function draw(){
    ctx.clearRect(0,0,400,500);
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "rgba(8,8,12,.2)";

    //位置を更新
    locX += speedX;
    speedY += GRAVITY*TIME/1000;
    locY += speedY;
    
    //更新した座標で円を描く
    ctx.beginPath();
        ctx.fillStyle = '#3399FF';
        ctx.arc(locX, locY, 10, 0, Math.PI*2.0, true);
        ctx.fill();

    }

まとめ

  • 加速度によって速度が変わる
  • 変更後の速度によって位置が変わる
  • あとは数字をいじりまくる

つづく