前回はとりあえず「ラベル」という機能を使ってみました。
今回は今まで覚えたことにプラスして、表示した画像(スプライト)を動かしてみました。
「タイムライン」という機能があって、表示したスプライトを滑らかに移動したり拡大縮小したりできるのです。その中で今回は「moveTo」という滑らかに移動させる命令を使ってみました。これは初期のenchant.jsには無かった機能らしいです。
このページが分かりやすかったです。
例えばdragonという動かしたいスプライトがあった場合に、
dragon.tl.moveTo(x座標, y座標, 何フレームかけて移動するか);
という風に指定します。ちなみに「moveTo」「moveBy」の違いですが、「moveTo」は画面内の指定した座標に向かって移動するのに対し「moveBy」のほうはそのスプライトの現在位置から指定したピクセル分移動します。
そして作ったものがこちら。
1~6のサイコロが書いてあるカードがあり、それをシャッフルして伏せた状態で並べる。クリックするとカードをめくる。というイメージです。「スタート」を押すとカードが並べられます。ブラウザをリロードするたびに、めくったカードの並びが変わっているはずです。
最初に作ったときはこのようにすべてのカードが同時に飛び出していたのですが、順番にくばられた方がそれっぽいので「setTimeout()」というやつを使って時間差を作っています。