オブジェクトの根幹部に関する理論と文法の詳細についてすべてを見てきて、始めていくのに十分な基礎固めをしました。楽しくてカラフルなものを。オブジェクトの基本を参照)。目的:オブジェクトの使い方とオブジェクト指向のテクニックを実世界のコンテストで練習する。どれほどオブジェクトが役に立つかお見せしましょう。小さなボールは画面じゅうを跳ねまわり、それぞれがぶつかると色が変わります。ついて事前の知識は不要です。ついてもっと知りたくなっているだろうと期待してますが。道中では、イカしたオブジェクトを活用して、ボールを壁で弾ませる、それぞれがぶつかった事を判定する(衝突判定という呼び名で知られています)といった上手いテクニックをいくつかお見せしていきます。ファイルのローカルコピーを作成してください。適用するための要素だけからなります。簡単なスタイル、主には<h1>のスタイルとポジションを指定し、スクロールバーやページ端のマージンを消す(素敵にきれいに見せるため)ためのもの。JavaScript。メソッドを使って描画していくためのコンテキストを取得します。得られる変数(ctx)はキャンバスの描画可能領域を直接表現しており、ここに二次元の形状を書き込む事ができます。プロパティから取得できます)に等しくします。これで全く問題ありません。num;}この関数は二つの数を引数に取り、二つ数の範囲内の乱数を戻します。我々のプログラム用のボールを一つモデル化する我々のプログラムではたくさんの画面中を跳ねまわるボールがあります。これらのボールはどれも同じルールで動くので、1つのオブジェクトで表わすのが理に叶っています。コードの最後に以下のコンストラクターを追加するところから始めましょう。ボールが画面のどこからスタートするか表わす水平と垂直の座標。0(画面左上隅)からブラウザービューポートの幅と高さの(画面右下隅)間の値を取ります。個々のボールには水平と垂直方向の速度が与えられます。x/y座標値に定期的に加算され、各フレームでこの値だけ移動していきます。個々のボールには色がつけられます。ピクセルを単位とする半径で表わします。プログラムの中では、実際のところボールに何かさせたいわけです。キャンバスコンテキスト(ctx)のメンバーを順に呼び出す方法で、ボール自身が画面に自分を描画する方法を教え込みます。使って紙に形を描きたいと宣言します。プロパティを指定します。メソッドを使って紙に円弧形をなぞります。プロパティを指定します。プロパティで指定します。最後の二つの引数は円弧の開始点から終了点までの角度を円の中心角で指定します。360度に相当します(ややこしいですがラジアンで指定しなければなりません)。これで一周した円を描けます。指定しなければ、半円(180度)になるでしょう。指定していた色で塗り潰せ"という指示になります。これでオブジェクトをテストしてみられるようになりました。ファイルをブラウザーで読み込みます。コンソールを開いて、ページをリフレッシュし、キャンバスのサイズがコンソール分小さくなったビューポート領域に合うようにします。10);そのメンバを呼び出して見てください:testBall.xtestBall.sizetestBall.colortestBall.draw()最後の行を入力すると、キャンバスのどこかにボールが表示されたはずです。ボールのデータを更新するボールを座標に表示できるようになりましたが、ボールを実際移動させるには、何らかの更新するための関数が必要です。つの部分でボールがキャンバスの端に達したかどうかチェックします。あれば、関連する速度の向きを反転してボールが反対の向きに移動するようにします。跳ね返る前に画面外にめり込んで欲しくないからです。結果ボールはこのメソッドが呼ばれる毎に移動します。ここまでで、ちょいとアニメーションさせてみよう!ボールのアニメーションさあ、楽しい事をやりましょう。キャンバスにボールを追加し、アニメーションさせるところから始めましょう。最初に、ボールを全部保存しておく場所がどこかに必要です。[];ものをアニメーションさせるすべてのプログラムには、大概アニメーションループがあり、プログラム内の情報を更新して、アニメーションの各フレームでその結果を表示します。これは大半のゲームや類似するプログラムの基本になります。つの引数は始点の座標と、描画する長方形の幅と高さになります)。これで次のフレームを描く前に、前のフレームで描いた内容を見えなくします。以前の何フレーム分かがかすかに残り、ボールが移動した後の軌跡を表現します。変更すると、軌跡は全く見えなくなります。この値を変えて、どんな効果になるか見てみてください。満たない間まで繰り返されます。数字をいろいろ変えれば表示されるボールの数を増やしたり減らしたりできます。関数を実行し、それぞれを画面に描画してから、次のフレームに備えて必要な位置と速度の更新を行います。このメソッドが定期的に実行され同じ関数名を与えられると、その関数がスムースなアニメーションを行なうために毎秒設定された回数実行されます。関数は毎回その関数自身を呼び出すので、何度も何度も繰り返し実行されます。アニメーションを開始するために、一旦は関数を呼ぶ必要があるのです。セーブしてリフレッシュして、ボールがはずむのをテストしてみてください!衝突判定を追加するさあ、もうちょっと面白くするため、プログラムに衝突判定を追加して、ボールに他のボールとぶつかったらどうするのか教えましょう。}}このメソッドはちょっとばかり複雑なので、今はどんな動作をしているのか正確に理解できなくても構いません。説明していきます:それぞれのボールで、他のボールそれぞれとこのボールが衝突していないか調べなければなりません。内側のループに入ってすぐ、if文でループで回しているボールがチェックしているボールと同じか調べています。メソッド内のループのくりかえし中で参照されているボール)と一致しているかチェックします。!を使って等価性チェックを逆にしているので、if文の中のコードはボールが同じでないときだけ実行されます。二つの円が衝突していないか調べるための一般的なアルゴリズムを使っています。基本的には円ないの領域が重なっているかチェックしています。2次元の衝突判定で解説されています。if文の中のコードが実行されます。プロパティをランダムな新しい色に設定しているだけです。複雑なこと、現実っぽくボールを互いに跳ね返らせたりもできたでしょうが、これを実装したとするともっとずっとに複雑なったでしょう。ゲームや物理用のライブラリを使う開発者が多いです。あなたはアニメーションの各フレーム毎にこのメソッドを呼ばなければなりません。コードを私たちの完成版と比べてみてください(ライブ実行版も見られます)。まとめ自分版の実世界で跳ね回るランダムボール例作り、この全単元で出てきた様々なオブジェクトやオブジェクト指向テクニックを使ったものをあなたに楽しんでいただけていれば、と思います。オブジェクトの実践的な使い方の練習や、実世界のコンテキストについて得られるものがあったはずです。残るのは、あなが自分のスキルをオブジェクトの評価問題で試してみる事だけです。キャンバスの初心者向けガイド。ゲームの作り方に関する、素晴しい初心者向けチュートリアル。ゲームを作るための基本を解説しています。inbox.現在、ニュースレターは英語でのみ提供されています。従って私の個人情報を扱うことに同意します。