キャンバス 以下ソース html <canvas id="graph" width="800" height="800"></canvas> javascript let ctx; window.addEventListener("load", (event) => { let canvas = document.getElementById("graph"); ctx = canvas.getContext("2d"); paint(); }); function drawLine(x0, y0, x1, y1) { ctx.beginPath(); ct…

三角関数 中心角の移動に応じて、sin/cosカーブをアニメーションで描画してみました。 キャンバス 以下、ソース <canvas id="graph" width="600" height="600"></canvas> <script> let ctx, degree = 0; window.addEventListener("load", (event) => { let canvas = document.getElementById("graph"); ctx = canvas.getCon…

中心角とsin/cosの値を表示するアプリを作成 JavaScriptでは、Math.sin(),Math.cos()という関数が用意されているので、それを利用させてもらった。 中心角=0度 キャンバスの表示内容を説明する代替テキストです。 以下ソース <p><input id="theta" max="360" min="0" type="range" value="0" /> 中心角=<span id="degree">0</span>度<br /> <canvas id="graph" width="600" height="600">キャンバスの表示内</canvas></p>…

前回のjavascriptの重力加速度を参考にシンプルなゲームを作成しました。 マウスを押すと対象物が上に上がり、マウスを離すと対象物が下がるというシンプルなものです キャンバスの表示内容を説明する代替テキストです。 以下ソース let ctx, isFlying = fal…

重力には逆らえない。 遠投した時の軌道を書いてみた。

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

前回に引き続き、速度の計算をjavascriptで実装してみる。

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