よろしくお願いします。
先に進んで始めましょう。
RGはゲームアプリケーションを推測しています。
私は最初にh timファイルを作成し、C Sを作成してこの単純なグリッドを作成します。
だから、我々は背景色とフォントでそれをスタイルするつもりはなく、この小さなものは今ここでは6つの四角で単純に始まり、それらの間に少しの間隔があるかもしれないが、丸みのあるコーナーを追加するようなことをやってみましょう。しかし、アニメーションを追加するつもりはありません。
フェードインとフェードアウトは、6つの四角形を取得してから、迅速なイベントの基本ロジックを追加し、正しい色などを確認します。
だから最初に私は彼に私がここにあるファイルの端を作る必要があります。
色のついたゲームを毎回呼び出すので、ここでチームに追加します。
ボイラープレート。
タイトルをつけてください。
私はカラーゲームをします。
6つの正方形を追加してみましょう。
だから私はそれらをdivにするつもりです。
それぞれが正方形のクラスを持つdivです。私たちは、その二乗されたクラスを使用して後でそれらをスタイルします。
さて、私たちはdivクラスのスクエアを行い、その中に何かを入れる必要はなく、そのうちの6つを持っています。
そして、このクリーナーを作成するには、私たちが後でスタイルを変えることができる別のdivの代わりに、それらをすべて入れるつもりです。
私はそれをコンテナと呼ぶつもりです。
それでは、何も前もってやるつもりはありません。
最終的には、サイトを反応させ、グリッドを縮小させるために使用します。
今のところ、それらをグループ化して、6つの正方形が浮かんでいるだけではありません。
ここで6つの四角形があります
私たちがブラウザゲームでこれを開くと、それは彼に向いています。
私たちはいくつかの理由からもちろん何も見ません。
私たちは6つの部門を持っていますが、そこには余白がありません。色がないので、何も見えません。
だから我々は非常に基本的にそれらをスタイリングすることから始めるつもりです。
だから、スタイルシートを追加する必要があるので、私が作成していないスタイルシートを最初にリンクして、これをもう少し大きくします。
だから私はそれをカラーゲームと呼んでSSを参照して保存し、そのファイルをカラーゲームC
Ssにします。まず最初に私たちの体全体に背景色を追加するだけです。
今のところ背景色と私が使用しようとしている色は16進コードです。
それは2 3 2 3 2 3であり、それが接続されていることを確認してください。
うん
正しい背景色が得られます。
次のステップでは、私たちの四角形のスタイルを開始します。
私たちは、このVSSを写真ポートフォリオサイトに使用するのと同じ戦略を使用し、その応答性のある正方形の画像のグリッドを使用します。
彼らはすべて黒と白だった。
ここで同じアイデアを使用できますか？
したがって、我々がこれを行う方法は、それぞれがコンテナの内側にあり、それぞれコンテナの30％を占めるということです。
だから、容器はこれらの正方形の周りを右に進むだけです。
正方形の周りに全身ではありません。
彼らは30％を占めており、両者の間にはマージンがあります。
1。 6 6％。
つまり、すべてがコンテナの100％になります。
それで最初の広場を30％にする。
私たちがそれを残して、彼に背景を与えることができれば、それらを紫色にして保存して、私たちはまだ何も見ません。
それが起こった理由は私たちの人生がページ上にあるかどうかを調べると、私はあなたを見せます。
彼らはまだ空です。
私たちは何をする必要があります。
前回の画像と画像には何らかのコンテンツが含まれていましたが、これらのdivは空です。
だから、いくつかのスペースを追加して、パディングボトムを使用するつもりです。
パディングトップを使用することもできますが、パディングボトムも30％になります。
だから私はリフレッシュする場合。
OK。
私たちは現在、6つの四角形を持っていますが、それらはすべて私たちが望むものではないラインにあります。
私たちは彼らが同じ行にいてほしい。
そのため、イメージグリッドで行ったことも左に浮動させる必要があります。
だから、左に浮かんでリフレッシュしないでください。
そして今、我々はこの大規模なグリッドをここに終わらせます。
ああ、先に進み、何が起こっているのかを見ることができるようにしてください。
だから我々はマージン1を持つつもりです。 6 6パーセントと保存します。
今ここにグリッドがあり、このグリッドが画面全体を占めていることがわかります。
だから私はそれを少し変えるつもりです。
我々はそれが巨大であることを望んでいません。
そして、私たちができることは、このdiv IDコンテナを提供したコンテナを使用することです。
だから、私たちがdivのスタイルをコンテナのアイデアでスタイルすると、このように選択してから、最大幅を指定することから始めることができます。
そして、私は600ピクセルに行ったと思う。
私たちはその番号で遊ぶことができます。
今、私がリフレッシュしたら、あなたはそれがはるかに小さいことを見ることができます。
それはそれの一部です。
そして、これもCenterを中心にしています。
だから我々は2マージンになるだろう。
0オート。
このトリックはコンテナの上部と下部のゼロマージンを覚えていて、左右のオートはそれがどちらの側でも同じサイズになるようにします。
そして今、私たちはこの素晴らしいセンターグリッドを持っています。
大丈夫。
私たちのH-1にあるもう1つのことをやってみましょう。私はここでH1を持っていきます。それは素晴らしいRを言うつもりです。
G. カラーゲームであり、我々はそのように始めるでしょう。
コースをリフレッシュすると、見るのが大変です。
ですから、それを白のH-1カラーの白にして保存しましょう。
そしてそれから始めます。
だから、いくつかのjavascriptを使ってみましょう。
javascriptを設定して、これらのそれぞれに異なる色を設定します。
それでは、新しいファイルを作ってみましょう。私たちはそれをカラーゲームと呼んでいます。
J. S. 保存してください。
そして、私がいつもやりたいことは、接続されているというアラートを追加しましょう。
今度は、ソースをカラーゲームに置き換えてみましょう。
はい、ページを更新して保存すると、接続アラートが表示されます。
OK、そこでウィンドウのサイズを変更します。
次に、異なる色を付けるコードを追加しましょう。
最終的には最終的な結果が出ます。
ページが読み込まれるたびに6つのランダムな色が選択され、各色がdivの1つに割り当てられます。
私たちは無作為化された側面から始めようとしており、常に同じ6つの色を割り当てようとしています。
そして、それらをランダム化することに移ります。
それでは私のカラーゲームに行きましょうはい、私は色のリストを作成することから始めるつもりです、そして、私はそれを色と呼んでいます。
それは配列です。
私たちの最終製品では、これは色のランダムなリストであることを忘れないでください。
今のところ私は自分のものをいくつか追加します。
だからG-Bと私はすべて赤で始める。
だから2 5 5 0 0そしてこれを読みやすいように私は別々の行ですべてこれをやってみましょう。
だから我々はこれらの6つを持っています。
最初のものはすべて赤色になり、次に赤色になるものと黄色になるものがあります。
そして、次の1つは赤と緑です。
その後、次の1つは赤または緑のゼロとなり、すべて青となり、その後も同様になります。
だから0の緑色の255の青色を読んだ後、255の赤色の0の緑色の255の青色を行い、6つの色の配列を文字列として与えます。
そして、私たちがやりたいことは、これらの四角形の6つすべてを選択し、それらの色の1つをそれぞれの背景に割り当てることです。
最初にループするにはこれまで選択する必要があり、正方形とドキュメントを同じにして、ここでは多くの選択肢があります。
私はすべてのクエリセレクタを使用するつもりです。
だから、最初のものだけではなく、6つすべてを確実に取得する。
そして、我々はクラススクエアに基づいて選択するつもりです。
divをしただけでコンテナdivがあることを覚えていれば、それを選択する必要はありません。
これらの6つの四角形のdivを正方形にするだけで、4つのvarが0になるようにループします。
私は四角形の長さよりも小さく、私はプラスではなく、ここで私たちは四角形を私はスタイルのドットの背景等価点を言うとこれは私たちは目を取って色にアクセスするために使用する興味深い部分です。
どちらかはコルトです私は事実の後に追加している少し修正してここにいます。
ちょっとしたメモ。
あなたのスタイルの背景色にはもっと好都合ですので、このビデオで使用しているスタイルの背景を背景色ではなく大文字のCで背景色にしてください。
だから、いつもあなたはスタイリングアップされた背景を見て、それを背景色に変えます。
その理由は、現在のスタイルではすべてのブラウザで動作しますが、バックグラウンドはFirefoxでは機能しないため、技術的にはスタイルで動作します。
その背景はChromeでうまく動作し、ゲームはうまくいきますが、Firefoxで何が起こっているのかについてたくさんの質問がありました。これは本当に主なスタイルの背景色です。
また、Del
Andersonがこれを指摘したディスカッションフォーラムの学生の一人と思うと、最近私はコーディングに戻るでしょう。
それで、私たちは6つの正方形を持ち、私たちの目は0 1 2 3 4
5から行くつもりで、それは各四角形をループします。
そして、私が最初の広場に着くと、私はゼロをとり、ここにある色のゼロの背景色を与えます。
それは正しいでしょう。
そして、我々は続けるつもりで、2番目のdivのために1つを取って、それに1のインデックスを持つ2番目の色を与えます。そして、終わりまでそれを続けます。
だから、我々は基本的には、ページ上にdivが配列からこれらの色を使って色付けされる順序であることを順番に考えている。
リフレッシュを保存すると、6つの基本的な色が得られます。
赤い黄緑色のシアンブルーのマゼンタがあります。
それで今は大丈夫です。
私たちは後で色をランダム化することに焦点を合わせます。
しかし、プレビューとして、0から255までの3つの異なる3つの数字を生成し、それらを組み合わせる必要があります。
したがって、ランダム化された3つの異なるチャネルだけです。
そして、それらをrで1つの大きな文字列にします。 g Bとそれらのまわりの括弧。
しかし、私たちは今、これらの色で行くつもりです。
次は、ページが読み込まれるたびに実行する必要があります。
私はここにあなたを示しているだけでなく、6色を選んだ。
これらの色の1つは、目標であるか、私たちが探している色になるように選択されています。
この場合、これは選択された色です。
だから私たちもそれをやるつもりで、私たちはそれをハードコーディングするPortusを始めるつもりです。それから私たちはそれをランダム化します。
だから、我々は金色がシアン色であると言って始めようとしています。
それは3の4番目のカラーインデックスです。
だから、ここで変数var picked colorは色配列インデックス3と同じです。
そしてそれはSuyinまたはこの色をRに選ぶでしょう。 G. B.
0 2 5 5 2
5 5そしてそれはストリングだと覚えているのは、私たちがやりたかったことは、ページを更新してここにここにあるように言うことです。
明らかに同じ様式のスタイルではありませんが、私たちはそれをRと言いたいと思います。 G. B.
5 5 5で、我々はH1を持っていたスコアキーパーの試合に戻って考えることができ、私たちはあなたを変えなければならない場合、少し変更しなければなりません。
そして、かっこ0 2 5
プレイヤー1人のプレイヤーが最初に2つの得点を返します
我々はちょうど飛行機H-1を持っていた。そして我々がそれを更新したとき、それはそこにあったすべてのものを自動的に上書きした。
しかし、私たちはそれをしたくありません。
私たちは、テキストを素晴らしい色のゲームにしておきたいと思っています。私たちの色はちょうどここに行きますが、H-1や別のものが別々の線になってしまうので、私たちはそれを望んでいません。
だから、スコアキーパーのゲームと同じようにスパンを使い、Rを追加するだけです。 G. プレースホルダとしてそこにいてください。
だから、私たちが検査すれば何も違って見えます。
あなたは今、あなたが簡単にそれを選択し、テキストを操作することができることを意味するスパンを持っていることがわかります。
そしてそれをもっと簡単にするためのアイデアを与えるつもりです。
だから私たちはそれにidを与えます。
それを単にカラー表示と呼んでみましょう。
それから私たちはJavaScriptに行き、それを選択します。
色の表示はドキュメントと同じですが、idで要素を取得するには、IDごとに要素を取得する必要があります。
そしてそれはカラー表示でした。
そして私たちはこれを少しだけ保存して作っていきます。
ファイルを保存してから、色の表示を更新して、この色を選択します。
それで、それはカラー表示のテキストコンテンツになるでしょう、それと同じ色を選び、リフレッシュします。
そして、ここで私達の色に終わります。
すばらしいです。
clickイベントのロジックを追加しましょう。
だから私がこれらの四角形の1つをクリックすると、私たちがクリックした四角形がどの色であるかを知るためにいくつかのコードを実行します。
そして、その色をいったん取得すると、その色をpix色と比較します。
これがここにあります。
そして、それらが異なっているなら、私たちはその正方形の背景色を変えて、それが体の背景と同じ色になるようにします。
そしてそれらが同じであるなら、それはプレーヤーが1つを持っていることを意味します。
そして、特別なことをする必要があります。
そして、彼らが違うなら、それはプレーヤーが間違った色を選んだことを意味し、またそれを処理する必要があります。
クリックするだけで警告を発するプレーンなクリックイベントハンドラを追加しましょう。
イベントハンドラを四角形のすべてに追加するので、同じループを使用することができます。
ここでコメントを追加して最初の色を四角形に追加し、次の部分はクリックリスナ2つの四角形になります。
したがって、これらの正方形のもう1つは、イベントリスナーを追加します。
Clickとコールバック関数の時間です。
私たちが行うことは、かなり正方形のアラートであり、6人全員が警報を発することを確認するだけです。
すべて正方形をクリックしてください。
彼らが必要としているだけですべてうまく動作するように見える。
だから私たちがする必要があるのは、クリックされた四角形の色をつかんで色を比較して色を選択することです。
私たちが定義した可変絵柄の色が現れるので、その色を取得し始めます。
正方形の上をクリックしたアイテムを参照することができます。
だから私たちは、このスタイルの背景を言うことができます。
ここで別の警告を出し、私たちが何を得るかを見てみましょう。
それで私が赤いものをクリックすると、それは私に警告します。
RG B 2 5 5 0 0をクリックした場合、1つのR G B 0 2 5 5 2 5 5を割り当てます。
これは機能しています。
今ここで行うことは、これを変数に保存することです。ちょうどそれをクリックした色と呼ぶことにします。
クイックの色を比較するためにIF文を書くつもりです。色が3倍であれば、色の素敵な韻を選んでください。
そして、彼らが一致しない場合、または私たちは間違って警告します。
それをリフレッシュしてみましょう。
私はこれをクリックします。
違う。
そして真のテスト。
正しいと言えるものをクリックします。
私たちが持っているものにランダムな色を持たなくても、私たちのロジックは機能していますが、ハードコーディングされた6色の配列があり、各四角に色を割り当ててからピッキングしています。
このケースでは、シアンとこれは当然ランダムですが、私たちは私たちの答えである一つの色を選んでいます。
ユーザーがその四角形または任意の四角形をクリックすると、すべての四角形にイベントリスナーが追加されます。
指定された四角形の色と画像の色を比較します。
私たちは一つのことをします。
一致しない場合は、次の動画で別のことをします。一致した場合、実際に行ったことについて話し合うつもりです。
そして、彼らが一致しなければ私たちは何をしますか。