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

ボールの壁からの跳ね返りとラケットの移動

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
水平にアニメーションするボールを垂直な壁で跳ね返し、ラケットの垂直位置をマウスクリックで移動します。
講師:
04:28

字幕

このレッスンでは水平にアニメーションする ボールを垂直な壁で跳ね返すこと それからもう1つ、ラケットの垂直位置を マウスクリックで移動する この2つをやってみたいと思います。 まず、今開いている HTML ドキュメント スクリプトが書いてありますけど この動きを確認しておきましょう。 「ファイル」>「ブラウザでプレビュー」 します。 ラケットにボールがあたると 跳ね返るんですが 壁で跳ね返らないで 行ったきり戻ってきませんね。 これをまず戻すという所を 加えたいと思います。 ボールをアニメーションさせているのは ticker の addEventListener で tick イベントに対して 設定したリスナー関数 moveBall です。 そして、ボールの行き先を 一回調べておいて それがラケットにあたったら スピードを逆転する。 つまり跳ね返るということになっている わけですが、 ここにもう1つ条件を加えれば良いですね。 この、ラケットにあたるというのは 2つ && で結ばれていて これは一対の条件になります。 あるいは、ということですので 縦棒2つ || ですね、パイプとも言いますけど or 条件になります。 そして、nextX が左端の壁より 越えてしまったらということですから 左端は0ですね。 ですから0よりも小さくなったら という風に設定すれば良いでしょう。 一旦「保存」して「ブレウザーで プレビュー」してみましょう。 壁にあたって跳ね返ります。 これずっと続きますね。 ラケットが動きませんので こちらに抜けることはありません。 今度はマウスをクリックしたら、垂直方向に ラケットが動くようにしたいと思います。 ステージをクリックしたら ということですから eventListener を加えないといけません。 加える相手は もちろん stage ですね。 そして addEventListener イベントはステージをクリックしたら ということですが stagemousedown そしてリスナー関数 新たに加えます。 板を動かしますので moveBoard という風にしましょう。 そして、少しスクロールをして ここに加えます。 function の moveBoard コピーを持ってきましょう。 そして eventListener 今回はこれ必要ですので eventListener をきちんと受け取って そして処理を加えます。 どうしてかというと まず board_mc ですね。 この位置が変わるわけですから board_mc の垂直位置ですから Y 座標ですね。 これをクリックした場所に移します。 クリックした座標というのは イベントオブジェクトが持ってますから これをコピー持ってきて そしてマウス座標、Y 座標ですね、 は stageY ということになります。 ではこれで保存して 確認してみます。 「ブラウザでプレビュー」です。 今度はクリックすると動きます。 ただ あたり判定 ボールと板が当たったかどうかを 水平にだけ調べています。 ですから垂直位置を調べていませんので 完全に抜けてしまっていいはずなんですが ここは跳ね返ってしまいます。 このレッスンでは 垂直のあたり判定ということはしませんので ここまでと言うことにしておきます。 今回、このレッスンでは 2つのことを行いました。 まず左端の壁で跳ね返すということで それを条件に or 条件で加えました。 もう1つは、ステージをクリックした時 その Y 座標に 板を垂直移動する ということをいたしました。

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

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

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

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

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

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