Javascript: canvasでアニメーションをコントロール

アニメーションをコントロール

自動で動いているアニメーションを自在にコントロールすることを考えよう。アニメーションを外部からの指示で変更できるようにすると、ゲームに一歩近づくことになる。
  1. ちょっと待って(移動を止める)
  2. フリーズ(動きを止める)

ちょっと待って(移動を止める)

動いているキャラクタは、updatePosの中でvxを使って次の位置を決めている。このvxを0にすれば動かなくなる。但し、再度、動かす時のために、元のvxの値を保存しておかなければならない。アニメーションは自動的に繰り返されているから、vxが0になった途端に、移動が止まる。キャラクタは動いている。
var backupVx; // グローバル変数
…
function wait() { // ちょっと待ってで呼び出し
  if ( vx != 0 ) backupVx = vx;
  vx = 0;
}
function goOn() { // 続けてで呼び出し
  if ( vx == 0 ) vx = backupVx;
}
これを実行するためには、ボタンを用意する。canvasタグの下に、
    <input type="button" id="stop" value="ちょっと待って" onclick="wait();">
    <input type="button" id="goon" value="続けて" onclick="goOn();">
として操作するためのボタンとし、イベントハンドラーを作る。
さて、ちょっと、上のプログラムにあるif文が気になるであろう。この条件式を省いて、条件式内の命令を常に実行すると、困ったことが起こる。同じボタンを2度押した場合である。試してみよ。

canvas08.html

常に利用者が期待した通りの操作をするというのは誤りである。どんな場合でも対応できる配慮が必要。ここではユーザが間違わないようにプログラムを修正しよう。方法は簡単で、ボタンを一つにする。同じボタンで「ちょっと待って」と「続けて」を実現する。一つのボタンにすることで、不要な状況でボタンが押せなくなるようにする。

canvas09.html


canvas09-2.html

では、同様な別の機能を実現してください。

練習問題

  1. クリックすると移動向きを変える「回れ右」ボタンを作成せよ。
  2. クリックすると速度が増す「急げ」ボタン、速度が遅くなる「ゆっくり」ボタンを作成せよ。

フリーズ(動きを止める)

動きを完全に止めるには、自動で繰り返し描画されているアニメーションを止める必要がある。そのためには、setIntervalの起動時にそのIDを保存しておいて、そのIDを使って、実行を止める必要がある。再開するには、もう一度、startを実行すれば良い。初めからやり直すには、startフラグをtrueにする。

canvas10.html