Speakedraw – Javascript でお絵描きと音再生


前回のプログラムをブラッシュアップました。
今回の修正ではまず起動時に三色の円の大きさと配置をランダムで変化するようにしています。また移動速度も起動するたびに違う設定になります。

スタートボタンをクリックすると、オブジェクトが動き出し壁に当たったり、他のオブジェクトとぶつかると方向が変わり色が変わるようになります。またその時には再生する音も変化します。

音再生用のプログラムはこちらにて解説しています。今回はこのクラスを流用して音を再生します。

動作するプログラムはこちらです。

本プログラムは何回かに分けて説明します。

今回はまずスタートボタンを押したときの処理。
※この関数moveはCircleと言うクラスのメソッドとして定義しています。

  • 初回起動時にはまず移動線を描いて開始フラグを立てます。
  • 移動距離を設定します。
  • 他のオブジェクトと接触した場合は角度変更確認フラグを立てます。
  • 上下の壁に接触したら角度を-1倍にして角度変更確認フラグを立てます。
  • 左右の壁に接触したらsetAngleを使用して角度を変えて角度変更確認フラグを立てます。
  • 角度が変更された場合は、色の変更、移動距離を再設定、移動線の起点終点を再設定、キャンバスの初期化、移動線の描画をします。
  • 続いて移動先の座標を設定して、描画します。
  • 次に実行する処理を設定します。

一連が基本的な処理の流れとなります。次回はmoveから呼ばれている関数の説明をしようと思います。