CreateJS実践講座

複数のオブジェクトを総当たりで処理する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
配列に入れたオブジェクトから総当たりでふたつの組合せを取出すには、for文を二重のループにして定めます。
講師:
06:26

字幕

このレッスンでは たくさんのオブジェクトの すべての組み合わせについて 決まった処理をするという方法について ご紹介します 今画面で見ているたくさんのオブジェクト このたくさんのオブジェクトの間には 互いにひっぱり合う力が働いています このような動きを作ろうと思ったときは 動いているオブジェクトの すべての2つの組み合わせをとって それぞれについて 力を判断しなければなりません そのときの定石となる考え方を ご紹介しましょう Dreamweaverで開いている このHTMLドキュメントでは たくさんのオブジェクトを ランダムな方向に 一定の速さで動かしています ただ互いのオブジェクト同士に 力はかかっていません それぞれは独立して動いています その動かす関数がこちらです ticker classのtick eventのリスナーの 関数として定められています その中では 配列にすべての オブジェクトが入っているんですが ballsという配列です その中からすべてのオブジェクトを取り出して 位置を決めてスピードを定めて そのスピードに従って動く というふうにしています ですからそれぞれが一定のスピードで動きます 確認してみましょう ファイルからブラウザーでプレビューをします 方向やスピードそのものはランダムですけれども それぞれ同じ速さ/一定の速さで動いています そしてステージの端から消えると 反対の端から現れますので オブジェクトが消えてなくなってしまう ということはありません ではこのオブジェクト同士の間に 何らかの処理を加えたい オブジェクトの二つの組み合わせ それをすべて取り出したいという場合の 処理の仕方について まず簡単に説明しておきましょう たくさんのオブジェクトから 2つずつ取り出して すべての組み合わせを処理する つまり総当たりで処理するという場合は オブジェクトは普通 配列に入れます そしてそれを前提に forループ/for文を2重にして 2つの組み合わせを すべて取り出すとするのが定石です まず最初の外側のforループ カウンタ変数がiです i(インデックス)は 配列0(ゼロ)からスタートします そして今度は その0の配列インデックスのオブジェクトを オブジェクト0という変数に取り出します そして次に中の内側のforループです カウンタ変数jになっていますが iより1個 後から順に取り出します どこまで取り出すかというと その配列に入っている エレメントの総数すべてを取り出します そしてすべての組み合わせについて処理します 内側のforループが1回終わりました すると外側のforループに行って カウンタ変数iに1が入ります そして今度は内側のカウンタ変数jで iの次の 1の次の2からスタートするというふうに 順番に処理するわけですが 外側のカウンタ変数iは最後いくつになるかというと 総数にしてしまうと 最後のオブジェクトの後はもうないですね つまりjが取り出せませんから 総数よりも1個 手前まで調べます jの方はiより1個 後からスタートして 総数まですべて取り出す これですべてのオブジェクト 2つ取り出したオブジェクトの 組み合わせが出来上がりますので 2つのオブジェクトの処理を 内側のforループの中で 行えばいいということになります ではDreamweaverで開いている HTMLドキュメントのアニメーションの関数 ticker eventのリスナー関数ですね ここに2つのオブジェクトを取り出す という処理を加えてみたいと思います まずこのfor文は アニメーションさせるための部分ですから このまま置いておきます この後にまた改めて 2つのオブジェクトを取り出す という構文を入れます まずカウンタ変数iなんですが これはすで1回関数の中で使われていますので var宣言は重複するから入れません そして0からスタートして iはオブジェクトの総数 ballカウントという変数に入れてあるんですが それの1個手前までということになります そしてカウントアップして 最初のオブジェクトを取り出します ball 0としましょう それを配列ballsという名前になっているんですが i番目を取り出します 次に内側のカウンタ変数jを設けた 内側のforループです jはカウンタ変数はi+1ですね iの次からスタートして オブジェクトの総数になります 1は引きません そしてjをカウントアップして 2つ目のオブジェクト 変数名はball 1としますけど それを取り出します これは配列ballsの中のj番目です そしてここにはまだ具体的な処理は書きませんけれども 2つのオブジェクト ここではball 0とball 1の処理を 必要であれば加えるということになります このレッスンでは たくさんのオブジェクトの中から 2つのオブジェクトのセットをすべて取り出して 総当たりで処理するというときの 定番のforループの書き方をご紹介しました forループは2重にします 外側カウンタ変数iについては 配列にオブジェクトが入っている前提ですが iは0からスタートして 総数の1個手前まで順に取り出します そしてオブジェクトを そのカウンタ変数の インデックスのエレメントを取りだしたら 次に内側のforループです 2つ目のオブジェクトになりますが カウンタ変数はj これはiの次からスタートして エレメント/オブジェクトの総数すべてを取り出します そして2つのオブジェクトを取り出したら その2つのオブジェクトの処理を 順に行っていくという こういう書き方になります

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

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

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

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

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