(23) CREATEJSでアニメーション (#2) ボールがマウスに追従

前回の (22) CREATEJSでアニメーション (#1) を改造し、マウスの動きにボールを追従させてみる。



実行サンプルはこちらです。

■プログラム

プログラムの変更箇所は1関数だけ。

test.js

CjTest::moveBall()内に記述している移動先座標の算出処理をまるまる変更する。
便利なことに、stage内に入ったカーソルポインタの座標が stage.mouseX, stage.mouseY に格納されている。ボールはこの座標を目指して1回のtick関数実行時に
 カーソルポインタまでの距離 x 0.1 [pixel]
だけ移動させる。カーソルポインタまでの距離が短くなると 1回の移動距離も短くなり、まるで加速度がついているように見える。

moveBall: function(){
  this.sprite.x += (this.stage.mouseX - this.sprite.x) * 0.1;
  this.sprite.y += (this.stage.mouseY - this.sprite.y) * 0.1;
  this.stage.update();
}

実行サンプルはこちらです。
何だかペットのようでかわいいw


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です