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

sekibotbot.hatenablog.jp

物理エンジンをつくるにあたって用意するものを書いてみる.

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

↑スポンサードリンク

自作2D物理エンジンを作った話 - Qiita
JavaScript ゲームのための単純な 2D 物理エンジンを作成する
 物理エンジンを作るためにはどのぐらいのプログラミング技術と数学... - Yahoo!知恵袋

目標

用意するもの

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

code

mypage.html

<html>
  <head>
    <title>Canvas tutorial template</title>
    <script type="text/javascript" src="myscript.js">
    </script>
    <style type="text/css">
      canvas { background-color:#ffffff; border: 2px solid #999; }
    </style>
  </head>
  <body onload="init();">
    <canvas id="tutorial" width="400" height="500"></canvas>
  </body>
</html>

myscript.js

    //速度
    var speedX = 0.0; 
    var speedY = 3.0; 
    //位置
    var locX = 200;
    var locY = 0;
    //canvasを使うのに必要なもの
    var ctx;
    //フレームレート
    const FPS = 60;
    //draw関数の更新時間
    const TIME = 1000/FPS;

    //最初にロードされる
    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;
    locY += speedY;
    
    //更新した座標で円を描く
    ctx.beginPath();
        ctx.fillStyle = '#3399FF';
        ctx.arc(locX, locY, 10, 0, Math.PI*2.0, true);
        ctx.fill();

    }

まとめ

とりあえずコピペしてみる
あとは数字をいじりまくる

つづく

つづき