AnimateでHTML5 Canvasコンテンツをつくる

ボールの方向をランダムに決める

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボールが動く方向を、距離とランダムな角度で決めます。
講師:
05:32

字幕

このレッスンではボールが動く方向を ランダムに決めてみたいと思います。 現在、このコンテンツでは ボールのスピードを X と Y に分けていて それぞれ 10 としてあります。 ですから 45 度に固定で 進んでしまうのですが、 今の動きを確認しておきましょう。 「ファイル」>「ブラウザでプレビュー」です。 45 度で、行ってしまいました。 常に45度です。 もう一度、念のためにリロードしてみます。 まあ、いいです。 ボールが進む方向をランダムにするには この speedX、 speedY を ランダムにすればいい訳ですが 今回は角度をランダムに決めてあげて その上で X と Y のスピードを定める というやり方にしてみたいと思います。 その場合には、距離と角度で 座標を決める三角関数を使います。 ボールが進む方向が水平軸に対して なす角度が θ だとすると この長さ、距離と書いてありますが 後でゲームに適用する場合には スピードになりますけど スピード掛ける cos θ が X 座標 X のスピードです。 スピード掛ける sin θ が Y のスピード ということになります。 三角関数を使うのですが その場合この角度というのは 度数ではなく、ラジアン という値が 使われますのでご注意ください。 180 度が π ラジアンです。 あと、どの範囲でランダムにするかですが 360 度やってしまいますと 後ろに飛ぶということが 発生してしまいますから、これではだめです。 かといって 180 度でもまだ、だめです。 真上に行ったり真下に行ったり ということが出てしまいますので ±45 度の範囲で 角度を決めることにします。 ですから合計で 90 度ということになります。 90 度はラジアンで言うと 2分の π です。 また ±45 度と考えた場合は 45 度は4分の π ラジアンということになります。 では先ほどの図の距離に相当しますが speed という変数名にしましょう。 これを 10 とします。 ですから速さが 10 です。 そしてランダムな角度を決めます。 randomAngle としましょう。 ランダムに数を決めるという場合には Math.random というメソッドを使います。 これは0から1の範囲の ランダムな数字が出てくるのですが これに掛け算をすれば 幾らでも大きい範囲で出せます。 掛けることの、という * です。 幾つ掛けましょうか。 ±45 度という時には、まず 90 度の範囲で ランダムな数字を決めて そこから 45 度を差し引けばいい ということです。 ですから 90 度は π なんですが Math.PI という定数になっています。 90 度ですから2で割ります。 差し引くことのもう一回 Math.PI / 4ということです。 最後に ; をつけましょう。 そしてこの 10 というのは消えます。 speed これが距離です。 * Math.cos randomAngle はコピーで持ってきましょう。 それから又、ここを「コピー」して 「ペースト」して cos を sin に書き換えます。 これで角度が ±45 度の範囲で定まって それに基づいてスピードの XY それぞれ水平方向、垂直方向の 速度が決まるという形になりました。 では「保存」をして確認してみましょう。 「ブラウザでプレビュー」します。 リロードですね。 結構、真っ直ぐ来てしまいました。 またリロード、上の方に来ました。 リロード、上の方です。 下の方にも行っています。 リロード、45度の範囲 大体よさそうですね。 このレッスンではボールの動く方向を ランダムに決めました。 その時は三角関数を使って 速さを 10 と決めた上で 角度を ±45 の範囲内で ランダムに定めました。 そして三角関数の cos と sin で cos が X 、sin が Y と スピードを掛けた上で ということで速度を決めると ±45 度の範囲 そして速さが 10 ということでランダムな ボールの動きができたという事です。

AnimateでHTML5 Canvasコンテンツをつくる

Animate CCではPCやモバイル、Webブラウザなどさまざまなデバイスとプラットフォームに向けたコンテンツが作れます。またHTML5に対応したダイナミックでインタラクティブな表現が可能です。このコースはAnimateで作った素材をJavaScriptでどのようにスクリプティングするのかを基礎から解説します。

2時間43分 (26 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年05月19日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。