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文が気になるであろう。この条件式を省いて、条件式内の命令を常に実行すると、困ったことが起こる。同じボタンを２度押した場合である。試してみよ。

canvas08.html

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