javascript

【JavaScript】 球と球の衝突反応

最も簡単な衝突反応 球と球が衝突した時の動き(衝突反応)をJavaScriptで実現してみる。ビリヤードの球の動きが典型例で、昔からあるおはじきやビー玉遊びも含まれるだろう。ビデオゲームではスマホアプリの「モンスターストライク」などが代表...
javascript

【JavaScript】角度のついた跳ね返り

基本の角度のついた跳ね返り 水平面や垂直面に対する跳ね返りは、単に速度を反転させればよく簡単だが(【JavaScript】ボールを壁で跳ね返させる)、反射面に角度がついている場合は難しい。そこで、ボールが反射面に当たった時、システムの座標...
javascript

【JavaScript】当たり判定を行う

下はJavaScriptで実装した円形当たり判定のデモ。赤円をドラッグし青円に当てると「HIT!」と表示される。 円形の当たり判定はピタゴラスの定理を使い斜線の距離から割り出す。ピタゴラスの定理とは、直角三角形の斜辺(c)の2...
スポンサーリンク
javascript

【JavaScript】オブジェクトにバネ運動させる

オブジェクトにバネ運動をさせるスクリプト。Canvas上をクリックすると、左上からCanvas中央に向かって猫画像が移動する。 まず、猫画像を表示するCatクラス。 /** * 猫画像を表示(cat.js) */ ...
javascript

【JavaScript】オブジェクトをイージング(比例運動)させる

イージング(比例運動)とは、出発点から目標点に近づくにつれ、徐々に遅くなって止まるような動き。出発から到着まで同じ速度の等速運動と違い自然な動き見える。 下のスクリプトはCanvasの中心を目標点に設定し、マウスでCanvas内をクリ...
javascript

【JavaScript】オブジェクトの動きに摩擦を加える

オブジェクトをアニメーションで動かすスクリプトに摩擦を追加する。摩擦を加えることで徐々に動きを止めていく。「【JavaScript】ボールを壁で跳ね返させる」のBoundクラスに、たった3行加えただけ。 別メージで表示 ...
javascript

【JavaScript】ボールを壁で跳ね返させる

ボール(といっても猫だが)をCanvas内で跳ね返らせる。矢印キーで操作し、壁に衝突すると反射する。 別ページで表示 まず、猫画像を表示するCatクラス。 /** * 猫画像を表示(cat.js) */ ex...
javascript

【JavaScript】端から出たオブジェクトを反対側から出現させる

「【JavaScript】加速度を使った移動」では、猫画像を矢印キーで操作したが、画面端を過ぎると猫が見えなくなっていた。今回は猫が画面端に達したら、反対側から現れるように手を加えた。 別ページで表示 まず、猫画像を表示...
javascript

【JavaScript】加速度を使った移動

キー等でCanvasに描いたオブジェクトを動かす時、等速ではなく加速度をつけるスクリプト。マウスでクリックした後に矢印キーで縦横に動かせる。 別ページで表示 移動に加速度をつける まず、猫画像を表示するCatクラス(cat...
javascript

【JavaScript】マウスカーソルを追いかけるマウスストーカーを作る

Canvas上の矢印がマウスカーソルを追いかけてくる。ただ追いかけるだけでなく、マウスカーソルの方向を向いて追ってくる。ベースは「【JavaScript】オブジェクトを回転させる」であり、そこに移動処理を加えている。 Arrowク...
スポンサーリンク
タイトルとURLをコピーしました