javascript 【JavaScript】オブジェクトの動きに摩擦を加える
オブジェクトをアニメーションで動かすスクリプトに摩擦を追加する。摩擦を加えることで徐々に動きを止めていく。「【JavaScript】ボールを壁で跳ね返させる」のBoundクラスに、たった3行加えただけ。
別メージで表示
...
2022-12
javascript javascript 【JavaScript】ボールを壁で跳ね返させる
ボール（といっても猫だが）をCanvas内で跳ね返らせる。矢印キーで操作し、壁に衝突すると反射する。
別ページで表示
まず、猫画像を表示するCatクラス。
/**
* 猫画像を表示(cat.js)
*/
ex...
javascript 【JavaScript】端から出たオブジェクトを反対側から出現させる
「【JavaScript】加速度を使った移動」では、猫画像を矢印キーで操作したが、画面端を過ぎると猫が見えなくなっていた。今回は猫が画面端に達したら、反対側から現れるように手を加えた。
別ページで表示
まず、猫画像を表示...
javascript 【JavaScript】加速度を使った移動
キー等でCanvasに描いたオブジェクトを動かす時、等速ではなく加速度をつけるスクリプト。マウスでクリックした後に矢印キーで縦横に動かせる。
別ページで表示
移動に加速度をつける
まず、猫画像を表示するCatクラス（cat...
javascript 【JavaScript】マウスカーソルを追いかけるマウスストーカーを作る
Canvas上の矢印がマウスカーソルを追いかけてくる。ただ追いかけるだけでなく、マウスカーソルの方向を向いて追ってくる。ベースは「【JavaScript】オブジェクトを回転させる」であり、そこに移動処理を加えている。
Arrowク...
javascript 【JavaScript】オブジェクトを円運動させる
Canvas上に描画した画像を円運動させてみる。
まず、画像を表示するCatクラス（cat.js）を用意。猫のイラストを表示する単純なもの。
/**
* cat.js
* 猫画像を表示
*/
export cl...
javascript 【JavaScript】オブジェクトを伸縮させる
JavaScriptで画像を大きくしたり、小さくしたりする処理を作る。ゲームでボタンを押した時、押し広がるアニメーションなどに使える。
まず、ボタン画像を表示するクラスを用意。button.jsは画像を読み込んで表示する簡単な...
javascript 【JavaScript】オブジェクトを回転させる
キャンバス上に矢印を描画して、常にマウスポインタの方に向けさせる。つまり、矢印はその場で回転する。
ArrowクラスとRotateクラス
まず、矢印を描画するArrowクラスを作成。
/**
* arrow.js
* ...