さて、このビデオに戻ってきます。
私たちはいくつかの新機能について研究します。
最初のものは、私がゲームに勝つときです。
それは私に正しいと伝えます。
そして、私はまだ新しい色を得るために、また私がまだ勝っていなければ、再びプレーをクリックすることができます。
しかし、何らかの理由で私が持っている色が好きではないので、新しい色が欲しいです。
その新しい色のボタンをクリックすることもできます。
だから、基本的には、新しい色を選んでゲームをリセットするボタンが必要です.6色のランダムな色から新しいランダムな色を選んでください。最後は簡単で簡単なモードに戻ります。
このボタンは同じことをします。
しかし、ゲームに勝った場合はテキストが変わり、再びプレイしたいのかと尋ねられたので、もう一度プレイをクリックすればリセットされます。
しかし、新しい色をクリックしてリセットすることもできます。
それが我々が焦点を当てるものです。
そして、私は先に進んでボタンを追加し、そのストライプを追加して、ストライプに新しい色や再生のためのこのボタンが含まれるようにします。
それには、すでに持っているメッセージが含まれています。
そして、私たちが後でやる2つのボタン。
だから私たちが最初にやる必要があるのは、すでにdivを持っているだけです。ストライプのIDを与えてから、それを使うことができます。
そして、私たちはすでに正しいものを表示するか、もう一度やり直すように私たちのスパンを内部に持っています。
ここでは、ボタンを追加するだけで、このボタンは新しい色を言うことから始まり、新しい色を保存することができます。
それはあなたが期待するほど悪く見えます。
白い背景色を追加して、このdivにすべてを配置しましょう。つまり、divはストライプです。
私たちのC Sに行きましょう。私たちはIDであるStrypeを選択します。
だから私たちは後書きでストライプを使う必要があります。
背景色を白く設定します。
高さを30ピクセルに設定し、高さの高いdivが比較的背の高いdivで、テキストをcenterに設定します。
そして、今私がリフレッシュすると、白いdivがすべての方法を渡る。
それはそれより少し高めです。
私たちはここに何かを入れるボタンを持っています。
私が勝ったり、失ったり、間違った答えを得ると、あなたはそれを見ることができないスパンがあります。
そして、そのスパンからのテキストが白であるからです。
ですから、あなたがやっていることについて考えているのは、私たちのストライプのdivに入り、テキストの色は黒でなければならないと言っていますが、残念ながらそれはうまくいきません。
そして、これは特異性の問題です。なぜなら、この行では、ストライプのアイデアを持つものの中のすべてが黒のテキストカラーの黒でなければならないと言いますから、あなたはOKだと思います。私たちの初期のCSSの特異性の講義とIDは非常に具体的です。
これは、IDストライプを使ってdivの色を黒に設定していますが、問題です。
そして、ここではすべてのスパンを設定しているので、色が白であることがわかります。これを白に設定すると、より具体的になります。なぜなら、実際には親ではなく要素自体をターゲットにしていて色を継承しているからです。
だから我々はいくつかの選択肢がある。
私がやることは、実際には今のところこれを取り除くことです。
私たちはもう色を白にするつもりはなく、リフレッシュすることができます。色が変わらないことはわかります。たとえすべてのスパンが白で、それはH1の内部にあり、H1テキストの色を継承しているためです。
このスパンはここでも黒いのと同じように。
それはあなたがここに黒色で見ることができるそれの周りのストライプdivから黒のテキストの色またはちょうど規則的な色の黒を継承しました。
そして、それは我々のストライクされたものです。
OK。
では、このボタンを使ってゲームをリセットし、イベントリスナーを追加する必要があります。
それを行う前に、そのボタンを選択する必要があります。
ここでボタンとIDを指定します。ここでは、IDはリセットと同じにして、Javascriptではなくリセットボタンを選択します。
したがって、var resetボタンは、クエリーセレクタがオクターブまたはリセットされたドキュメントと同じです。
そして、いつものように簡単なテストイベントリスナーを追加したいと思います。
リセットボタンはイベントリスナーを追加します。
クリックして、私たちが行うすべてをクリックすると、それがリフレッシュされるような簡単なアラートのクイックリセットボタンができます。
私がこれをクリックすると、私は警告を受け取り、それは私たちが行くのが良いことを意味します。
次のステップでは、実際にロジックをリセットしてリセットすることができます。
だから私たちがする必要があるのは、擬似コードを書くことです。
そのボタンをクリックすると、新しい色をすべて生成する必要があります。
配列から新しいランダムな色を選択する必要があります。次に、ページ上の四角形の色を変更する必要があります。
したがって、すべての新しい色を生成するためには、実際にその関数を既存の色にすることが実際にあります。
つまり、色は6色のランダムな色を生成するようになりました。
そして、私たちは新しいランダムな色を選ぶでしょう、そして、色が今私たちが定義したメソッドまたは関数を選択するのと同じ色を選ぶようにします。
私たちが実際にやるべきもう一つのことは、新しい表示色に合わせてこの表示色を変更することです。
そこで、色の表示を変更して、選択した色に合わせて、単純なものにするようにします。
私たちが行う必要があるのは、カラー表示のドットテキストの内容が選択された色と同じです。ページを更新して新しい色をクリックしようとすると、6つの新しい色が生成されます。
私たちはそのコードを持っていないので、まだ見ていません。
そして、それらのうちの1つを選んだ色としてピックしてから、ここで見ているものをピクト色に合わせて変更します。
それで、シーンの裏側に6つのランダムな色があります。
最後の部分は、これらの6つの新しい色をページに反映させることです。
ここでは、すべての四角形をループしており、色を背景にした四角形のスタイルを変更しています。
私はここでそのすべてを複製することから始めるつもりです。私たちはこれをリファクタリングします。
しかし、ここにすべてを入れ始める。
それで、すべての四角形の四角形をループしてIプラスを外に出すと、私たちがする必要があるのは、背景が色と同じになるように四角形を描くことだけです。
私は救います。
リフレッシュして新しい色をクリックすると、60個のランダムな色が生成されます。
それは1つを選ぶ。
画像の色が反映されるように表示が更新され、6つの四角形すべてが新しい6色に一致するように変更されます。
だから、それを試して、私たちの以前の論理が同様に保持されているかどうかを見てみましょう。
OK。
だから、これはまともな量の赤です。
非常に緑色で、まともな量の青色です。
私たちが正しいとは思わないものをクリックしてみましょう。
そして今、そのひとりを召しに行きましょう。
だから、少し赤い青のように見えます。
だから私はこれを推測するつもりだし、我々は正しいとそれはまだうまく動作しているように見えます。
素早く新しい色を再現。
我々はこれをリセットしたい。
それは本当にマイナーな化粧品です。
しかし、新しい色をクリックすると、黒色または暗い灰色に戻るように、ここで表示をリセットする必要があります。
私たちがしたいことのもう一つは、ここで見ることができるように、私たちはそれが再びプレーを言うことを望むとき、私はここで勝つでしょう。
これは緑が多いです。
私は勝ち、それは私にもう一度遊ぶことを指示し、それは同じことをする。
機能的には、それは本当に私たちと異なるテキストだけではありません。
だからそれは簡単です。
私たちがする必要があることは、コードがどこに勝つかをチェックすることです。
それがここにあります。
そして、そのボタンのテキスト内容を変更したいだけです。
ボタンはリセットボタンと呼ばれていました。
それで、テキストの内容が再び同じ色で表示されるようにリセットボタンを押すと、新しい色が表示されます。
さあ、これを試してみましょう。
ですから、これは赤が多く、緑が多く、青が少しあります。
だから、たくさんの赤と多くの緑が私たちに黄色を与えます。
だから、それらのいくつかを絞ってみましょう。
そして少し青色が明るく明るくなります。
だから、このようなもの、あるいはこの1つを試してみると、それは正しいとは言えません。
これが私たちの答えです。
そして本当の素早く、まったく同じことをします。
私が言及した最後のことは、背景色を元に戻すことです。
だから、リセットボタンの最後でこれを行うことができます。
そのH-1を選択するだけです。
ここで選択した1つの点です。
それはダイヤルアップの背景です。
UPSは同等です。
そして、それは16進数です2 3 2 3 2
3これはあなたが見ることができることを忘れている場合は、ボディの背景色を見てみましょう。
または、間違った色を選んだ場合は、色を消すときにここに設定します。
私たちは背景色をボディと同じに変更します。
新しい色をリフレッシュしましょう。
さあ、勝ちましょう。
ちょうどただランダムに時間のために我々は再びプレイをクリックし、それは黒の背景に戻る。
または暗い灰色の背景。
これですべてがこの動画のものです
次に、簡単モードとハードモードを選択するためのボタンを追加します。
そして、最後に、私たちは素敵に見えるようにスタイルを変えようとしています