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

斜めに動かしたボールを壁とラケットで跳ね返す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ボールを斜めにアニメーションさせて、ラケットと壁で跳ね返します。
講師:
05:25

字幕

このレッスンではボールの アニメーションする向きを斜めにして 壁も上と下両方で弾むように してみたいと思います。 現在開いている HTML ドキュメント JavaScript コードが書いてありますけど 今の動きを確認しておきましょう。 「ファイル」> 「ブラウザーでプレビュー」です。 そうすると、ラケットと壁で 跳ね返ります。 それからクリックすると、 垂直方向にこのラケットは動きます。 そして抜けてしまいました。 ということなので、このゲーム ずうっと動かなければいいんですね。 面白くも何ともありませんので このボールの向きを斜めにしましょう、と いうことになります。 現在このスクリプトでは speedX という水平方向の 動く大きさが設定されていますが これに垂直方向の動きを加えれば良いと いうことですので speedY としましょう。 同じく 10 とします。 そうすると 45 度の角度で動くと いうことになるわけですね。 そしてそのスピードを この Ticker の tick イベントに設定した リスナー関数の中で 水平にボールを動かしてるわけですが ここに垂直の動きも加えます。 ball_mc の Y += の speedY と。 これで垂直方向の動きも加わりましたから 45 度斜めにボールが進むと いうことになります。 ファイルを一旦保存して確認しましょう。 もう一度リロードしましょうか。 斜めに動くんですが こちらの左端の壁は跳ね返るように 設定してあるんですけども 上下の壁にはそんな設定をしていないので 抜けてしまうわけですね。 ですから、上下の壁にも跳ね返りの 設定を加えましょう。 上下の壁の座標が必要ですけども 上は 0 でいいとして 下はこのステージの高さですね。 ということなので、ステージの高さの 変数を加えることにします。 var の stageHeight と。 これは調べれば分かるんですが でも今回は canvas が 変数にとってありますので この canvas から幅をとることにします。 ということで、変数は 宣言するだけにしておいて startAnimation アニメーションの 初期化の関数ですけれども ここで stageHeight タイプミスを避けるために コピーをもってきます。 canvas に訊けば分かりますので canvas.height ですね。 これで高さがとれます。 では、ボールの動きなんですけども この moveBall ですね。 この中で壁に跳ね返るというのは ここで設定していますね。 次の水平座標が左端よりも小さかったら つまり左端の壁を越えてしまったら 弾みましょうと いう風になっていますので 同じように Y 座標についての if 文を追加します。 ( ) を先に打ってしまって { } としてしまいますけども この条件としては ball_mc の Y 座標が 0 より小さい、上の壁を越えて しまったという場合ですね。 あるいは、と。 ball_mc の Y 座標が同じく ステージの高さを越えてしまったら、と。 それはここでとってますので コピーを持ってきましょう。 そうしたら、跳ね返すというのは 仕組みは一緒ですね。 但し、speedY 掛けるイコールの マイナス1、と。 これでやはり反転しますので 確認しましょう。 ファイルを保存して 「ブラウザーでプレビュー」します。 ちゃんと跳ね返りますね。 おっと。」もう1回行きましょう。 ようやくゲームらしくなってきました。 暫くこれで行けそうですね。 あ、抜けてしまいましたけれども これでちゃんとゲームっぽく 作ることができました。 このレッスンではまず ボールを斜めに動かすために speedY という変数を新たに加えて この speedY を垂直方向に 加えることによって 斜め 45 度にボールを動かしました。 それから上下の壁で 跳ね返すことが必要でしたので 新たに if 文を追加して 上の壁を越えたら 下の壁を越えたら その場合には、 Y 軸方向の スピードを反転させるという風にしました。 この時にステージの高さは canvas の高さということで 調べました。

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

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

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

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

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

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