CANVASでの直線運動

トップページプログラミング技術等CANVAS要素(HTML5)(導入)

画面上に配置したオブジェクトに様々な直線運動を行わせるJavaScriptの例を挙げる。
「上記のHTMLをブラウザで開く」を閲覧する際は、Google Chrome等を使用してください(IE8以前では表示されない)。

オブジェクトを水平に右へ動かす

JavaScriptのコードは、最初の設定をする開始モジュールと、一定間隔で繰り返す描画モジュールに分かれる。
開始モジュールでは、canvas = document.getElementById ('canvas_e');ctx = canvas.getContext ('2d');の二行で、絵を描くカンバスが用意される。
body要素の中にcanvas要素を置き、上記の指定した名前(ここではcanvas_e)をidに取る。色(ここではピンク)、大きさ(高さheight、幅width)等を指定して、描画カンバスを設定する。
また、body要素の属性にonloadを取り、読み込まれてから表示するようにしている。
開始モジュールのimg = new Image();img.src = "neko02.gif";で、置きたい画像を用意している。
timerID = setInterval ('draw()', 33);は、ミリ秒単位の時間間隔を指定して、描画モジュールを呼び出す仕掛けである。
描画モジュールでは、呼び出されるたびにいったん画面を消す(次に少し動いた画像を見せる事を繰り返せば、パラパラめくるような動画になる)。
ctx.drawImage (img , x_zahyo , y_zahyo);は、カンバス(ctxという名にした)に、画像(imgという名にした)を引数で指定した座標に貼る。
ここでは、x座標だけを5pxずつ増やしている。従って、猫は画面の右外に飛び出したまま、帰って来ない。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

オブジェクトを斜めに動かす

CANVAS領域の座標は、左上端が原点(x座標=0、y座標=0)となる。右へ行くにつれてx座標は大きくなる。下に行くにつれてy座標は大きくなっていく。

数学で習った座標は、第一象限では原点は左下にあり、上へ行くにつれてy座標は大きくなったので、y座標については逆となっているので注意が必要だ。
画像を斜めに動かしたい場合は、両方の座標を動かす必要がある。両方大きくすれば右下へ、両方小さくすれば左上へ動く。
x座標を大きくy座標を小さくすれば右上、x座標を小さくy座標を大きくすれば左下へ動く。
x座標の変化だけだと水平移動、y座標の変化だけだと垂直移動となる。ここでは、右下への移動を行なっている。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

画面から出たら反対側から戻す

オブジェクトが画面から出たら、反対側から戻るように設定するには、描画モジュールの中で、座標が一定数を超えたらリセットするコードを書く。
図のように、或る画像が座標x、yに配置されるとは、その画像の左上端がx、yの位置にある事になっている。

CANVASの下端に消えるのは、オブジェクトのy座標がCANVASのy方向の長さを超えたときだ。
その場合、if文の中でリセットする。自然に足から入って来るように見せるには、頭の位置は原点よりも上、この画像のy軸方向の長さだけマイナスにした位置に置く。

水平方向のx軸についても同様となる。この猫画像は横幅61px、縦幅82pxなので、if文の中で其々0から引いた値を代入する。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

画面の壁に付いたら反対に動く

x座標、y座標に加える数を、x_sa、y_sa等と(名前は何でも良い)変数で用意しておく。当然、この値が+なら座標の値は増えるし、-なら減る。
動きを反対にしたい所に来たら、x_sa、y_sa等に-1を掛ければよい。
例えばx_saだけが反転すれば、左上が右上に、又は右上が左上に、又は左下が右下に、或いは右下が左下に変化する事になる。
y_saだけが反転すれば逆に、上下成分だけが反転する。両方反転すれば、左下が右上等、全く逆方向に進む。

折り返す位置の座標は、上端、左端に付いたときは、其々画像の座標がy<0(上端)、x<0(左端)となれば付いた事が分かる(=0としないのは、差で飛び飛びに動かすので0を跨ぐ場合があるからだ)。
下端、右端に付いた場合の画像の座標は、CANVASの縦幅をY、横幅をXとし、画像の縦幅をy、横幅をxとすると、其々図のようにY-y、X-xとなる。
if文でこれらの4つの条件を設定し、其々差を表す変数に-1を掛ければよい。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く

次第にスピードを上げていく

描画モジュールが呼び出されるごとに追加される座標の差を次第に大きくすれば、スピードも上がっていく。
ここでは、一回毎にx座標の差とy座標の差を其々1.01倍している例を示す。
数字はわずかな差しかないように見えるが、33ミリ秒に一回画像が更新されるため、画像上ではすぐに目に留まらないようなスピードになる。
或る速度になったら差をリセットし、最初のスピードに戻している。

上記のCANVAS要素を含むHTMLファイル
上記のHTMLをブラウザで開く