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

ボールとラケットの垂直方向の重なりを調べる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ラケットの垂直位置とボールの重なりを調べて跳ね返します。
講師:
05:45

字幕

このレッスンではアニメーションする ボールと、それからラケットの あたり判定を垂直方向についても 行うようにしたいと思います。 現在開いている HTML ドキュメントは ボールのアニメーションと それから板と、その跳ね返り ということが設定されています。 あとは板がマウスクリックで動くんですけど それを確認しておきましょう。 「ファイル」> 「ブラウザでプレビュー」です。 ラケットと壁をボールが跳ね返ります。 そして垂直方向に、このラケット 板を動かすことができます。 クリックすると、 動くということでいいんですが 水平方向のあたり判定しかしていないために 完全に板が上に行ってしまっても ボールが抜けないということになります。 ですから、この垂直方向についても 板とボールが重なっているかどうか あたり判定という言い方をするんですが その判定を加えたいと思います。 そのあたり判定を どのように行うかというと 現在、水平方向については この板の中心から半分の厚み それから、この半径ですね、 2つ足しあわせた範囲の中に ボールが入っているかどうか この右側も同じですね。 それぞれについて この幅の中にボールの位置があるかどうか ということを確かめています。 垂直方向についても同じように 板の上端から半径分、板の下端から半径分 この4つの辺の中に ちゃんと全部入っていれば その場合にはあたっているので跳ね返す という風にすればいいわけですね。 そうすればボールが この下を通った場合には 抜けていくということになります。 ただ、これは若干アバウトな所がありまして 厳密に言うと この辺ですね、についてはボールと 板がすれすれであたっていないですけど この場合はあたっているという風に 判定されてしまいます。 アクションゲームのような場合には これぐらいの誤差は実際あるでしょう。 コードの方にはまず 変数の宣言を加えます。 板の厚みの半分が 変数宣言されているので、同じように 板の高さの半分ですね、 halfHeight ということで これは調べておいたのですが 高さ 50 ですので 半分は 25 ということになります。 そして、当たったったか 当たってないか判定をして スピードを -1 掛け合わせて逆転すると つまり跳ね返すという処理を ここで行っていますので 今の所、板の水平方向しか ここで判定していないので 更に垂直方向を加えることになります。 これすべて & ですね。 なので、&を 2つ加えて もしも ボール _mc ですね ボールの Y 座標が 上端よりも大きかったら と振って、どれと これは変数で、この後設定をします。 板の上端です。 更に、これをまた & で結んで ball_mc の y が これも変数を後で加えるんですけど bottom よりも小さいこと ということで left right はここで固定で 変数に入れているんですけど 板の位置はクリックすると変わりますので この関数の中で 板の上端、下端ですね top bottom を設定することにします。 var top これはどうするかというと baord ですね。 _mc の y 座標から 半分引くわけですから タイプミスはこの辺 あやしいのでコピーを持ってきます。 引いて、そして更に もう1つ変数、必要でしたね。 ボールの半径です。 これも調べておいたんですが radius と 言う風にして 半径 10 です。 この半径分を引かないといけないですね。 同様に、と。 同様なので 一旦コピーを作りましょうか。 コピーをつくって 「ペースト」して bottom ですね。 y から今度足します。 halfHeight を足してあげて radius も足します。 これでいいでしょうか。 一旦保存しましょう。 そして「ブラウザーでプレビュー」 します。 まず最初は変わらないんですが 上に持っていくと抜けると。 リロードしましょう。 下の方も確認しないといけませんので 抜けますね。 大丈夫ですね。 このレッスンではボールとラケットの あたり判定に垂直方向の チェックも加えました。 垂直方向のチェックは、まずここで 水平方向のチェックが入っているんですけど ボールの垂直座標 これが板の上端よりも大きい そして、もう1つ条件を加えて 板の下端よりも小さい、と 板は動くので 毎回、毎回ここで変数で確認をして 位置を top bottom を 設定するという風にしてありました。

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

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

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

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

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

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