お帰りなさい。
このビデオでは、ゲームの難易度に影響を与える簡単で難しいボタンをここに追加することに焦点を当てます。
したがって、ページを上に読み込むと、すでにハードが選択されています。ここには6つの異なるボタンまたは6つの異なる正方形が表示されます。
そして、私は簡単にクリックすることができ、それは選択されたままです。
そして私たちは3つの正方形から選ぶだけです。
そして私は心に戻って行くことができます。
まず、必要な2つのボタンを追加します。
そこで私はHMOに入り、2つのボタンを追加します。
最初に私たちは簡単に言うでしょう。
第2のものは難しいと言い、リフレッシュします。
OK。
それは今のところよく見えます。
私たちのスパンがまだスペースを占めていないことに気付くでしょう。
そして、私はいくつかのテキストが表示されるのを見ます。
それらのボタンを押して、後でスタイリングに焦点を当てますが、スタイリングの要素が1つあります。これは、ページが読み込まれたときに選択されるようにしたり、対応するボタンが青く保たれるように簡単に選択するときです。
そして、私たちがやることは、クラスを使ってそのクラスをオンとオフにすることです。
ここではクラスを定義するつもりですが、このスタイルのスタイリングよりもシンプルになりますが、ここでは色になるだけです。
だから私たちの背景色とクラスは、それが私たちがやっていることなので選択されたものになるでしょう。
選択したボタンを選択したクラスに追加します。
そして、それはちょうど始めるためにあなたに設定された背景を持っているつもりです。
次に、ハードモードボタンクラスを選択したものに等しくするだけです。
また、コードを更新すると、ハードが関与していることがわかります。
それは恐ろしいですが、それは少なくとも私たちがハードモードにいることを示しています。
だから私たちがやりたいことは、簡単なものをクリックするとスイッチを押すコードを追加して、心臓をクリックすると簡単な6つの色をクリックすると3つの色が表示されます。
OK。
ここから始めましょう。
これらのボタンを実際に動作させるには、javascriptでそれらのボタンを選択し、いくつかのクイックリスナーを用意し、それぞれをクリックしてコードを実行する必要があります。
だから選択を簡単にしましょう。それぞれのIDを簡単に入力することから始めます。
DTN、ハードETNの順に表示されます。ここに赤旗が表示されている場合や、あまりにも多くのアイデアを使用していると思われる場合は、これを変更します。
これを数分でリファクタリングします。
しかし、我々は2つの異なるIDから始めるつもりです。
簡単ボタンハードボタン。
私たちのjavascriptに行き、それらを選択してください。
だから、var easy ETNはOctaを使った文書のdocクエリーセレクタと同じです。
簡単なETN。
私たちが物事を同じものにすることを確かめてください。
そこに行く。
そして、同じことを頑張って、あなたがそれを崇高に捉えたのかどうかは分かりません。
あなたが簡単な単語を選択し、あなたがKamandiを押すと、それは自動的に次のインスタンスを選択し、それらをすべて選択することができますが、私はこれらの2つがほしいと思うので、代わりに難しいとタイプします。
だから私たちは2つのボタンを持っていますし、このようなことをすることができます。
簡単なPTENイベントリスナーを追加します。
クリックすると、簡単なボタンがこのように終了したという警告だけが表示されます。
簡単なボタンをクリックして警告し、それが機能することを確認してください。
Easyボタンをクリックすると、ハードボタンが表示され、ハードボタンがクリックされたと表示されます。
だから、それを行うのではなく、どのクラスが選択されたかを反映するために、選択されたクラスをクラスにする作業をしましょう。
だから私たちが簡単なボタンをクリックすると、私たちがしたいのは簡単なボタンだけです。
Docクラスのリストが追加されました。私たちが今リフレッシュしたら、簡単にクリックします。
それは選択されたクラスを持っています。
簡単ですが、問題はまだハードボタンに残っているので、簡単に修正できます。
ハードなボタンを持っていて、クロスリストのドットを削除したいのですが、簡単にクリックすればハードモードが消えてしまいます。
しかし、ハードをクリックしてもまだそのロジックがないので、このコードをコピーするだけで問題を解決できます。選択された簡単なボタンクラスリストを削除して、クラスを選択しなくて済むハードボタンが追加されます。
OKを試してみましょう。
大丈夫。
そこで、私たちは6つの要素を持っているので、現在選択されているものを示している2つのボタンと、リフレッシュとハードが自動的に選択されるという簡単な部分があります。
次に、これらのボタンのスタイルだけでなく、3つの要素または6つの正方形を表示するために、難易度を実際に変更するロジックを追加する必要があります。
だから私たちが始める前にこれを行う必要があります。
どのように動作するかを見てみましょう。
だから私はリフレッシュして、私は新しい色を得る簡単な通知をクリックし、私はここで6色を持っているリスクがあるため、ここで選択された色がこれら3つの1つかもしれないので、それらの3つは削除されます。
だから、それはかなりのゲームを破るバグかもしれません。
したがって、それに対処するよりも、3つの新しい色を選択するだけです。
だからプロセスはそれをリフレッシュしています。
つまり、簡単なボタンをクリックすると、3つの新しい色を生成することになります。色の配列は、3つの色から1つの色を選択します。
選択した色で表示されるように更新します。
ここでは3つの広場を更新します。
重要なのは、3つの他の四角形も隠すので、displayをnoneに設定して非表示にするだけです。
そして、同じことが難しくなります。
colors配列に6つの新しい色を生成します。
私たちは1つを選んで私たちの選んだピックにします。
それをここに表示します。
次に、3つの正方形を下に表示し、それぞれの色を設定します。
OK。
だから今これに取り組んでみましょう。
まず、簡単ボタンをクリックするとそこから始めましょう。
今度は色がランダムな色を生成するように新しい色を生成したいと思っています3。
そして、いったんそれが完了すると、新しいピックされたカラーを選びたいので、ピックされたカラーはそれと同じようにピックカラーに等しくなります。
だから私たちの色と私たちの選んだ色を持っていれば、新しい絵の色を表示するためにここに表示を変更することから始めることができます。
これは、カラー表示のテキストコンテンツが選択された色に等しいと言うほど簡単です。
私たちがリフレッシュしたら、ここにいくつかの新しい色をつけてみましょう。
色が変わって舞台裏で変わる前にあなたが言いましたように簡単にクリックすると、同様に色の配列も変わります。
それでは、どのような色が今であるかを見てみましょう。次に、簡単モードをクリックして、色が何であるかを見ていきます。
そしてそれはまた、色を選んだが異なっています。
では、簡単モードをクリックしたときに3つの下位divを隠す方法や、上位3つを隠す方法について説明します。
それは問題ではありません。
しかし私は、ループ3を実行し、下の3つの表示プロパティをnoneに設定することによって、下の3つを実行します。
だから私はそれがどのように動作するかを見せてあげましょう
私はちょうどそれらの1つを選ぶつもりです。
ですから、すべての四角形または四角形のドキュメントクエリーセレクタを実行し、5番目のクエリーセレクタを使用してみましょう。
実際には5番目のインデックスを持つ6番目のスタイルを設定し、そのスタイル表示をnoneに設定します。
そしてあなたはそれが消えるのを見るでしょう。
そして、私がハードモードをクリックすると私はそれが戻ってくるようにしたいと思うなら、私はちょうどスタイルを言う必要があります。
表示はロックと等しくなります。
大丈夫。
ですから、これを実現する方法でコード内に実装しましょう。最初は6つすべてをループすることです。
最初の3人は新しい色をつけます。
下の3つは隠すつもりです。
そのために2つのループを持たせるのではなく、すぐにやります。
だからvar Iはゼロに等しい。
私はちょうど長さを四角形未満です。
さらに、色には3つのアイテムがあるという事実を利用します。
だから私たちは色Iならこのようなことをするつもりです。
もし次の色があれば、これは最初の3つで起こります。
私たちは背景が色と同じになるように四角形を描きます。
したがって、最初の3つの場合、色は3つのアイテムしかないので、すべての四角形をループし、そのインデックスに色があるかどうかを確認します。
そしてもしあれば、我々は最初の3つの色を変えるつもりです。
だから、それが確実に動作するようにしましょう。
私は簡単にクリックすると、トップ3だけが変化していることがわかります。
だから我々は近くにいる。
私たちが今したいのは、下の三つを隠すことだけです。
それで、他の人と一緒にやっていきます。
正方形私は表示がnoneに等しいスタイルです。
私が簡単モードをクリックすると、それをフルスクリーンでリフレッシュして作成すると、下の3つが失われ、上位3つの色が変化していることがわかります。
これがどれであるか把握してみましょう。
百三十三の赤125緑と青の少し。
そこに行く。
もう一度試してみてください。
私はこれらのいくつかをリフレッシュし、簡単モードをクリックするので、小さな問題が1つあります。
ここでは3色しか生成していません。
しかし、新しい色のボタンをクリックすると、今はどのような色になっているかがわかります。
それは3つの項目です。
私は新しい色をクリックして、次に色を見る。
それは実際には6つのアイテムであり、それは私たちがどのモードにいるのかを把握していないからです。
そのコードがリセットボタンに表示されます。
私たちは色がランダムな色を生成することと等しいと言っています。
最終的にはそれを修正する必要があります。
しかし、それを行う前に、私たちのハードボタンを手に入れて、6つの四角形に戻し、それぞれに独自の色をつけてそれを行うようにしましょう。
私はちょうどこのコードのいくつかを取って、ここには常に悪い兆候であるそれを複製するつもりです。
それで、私たちはこれを少しだけリファクタリングするつもりです。
だから最初にやりたいこと。
ハード・ボタン・イベント・リスナーの色にすべてコピーするだけです。
それは同じ色の表示テキストの内容が同じである6色の色を選ぶことになるだろう。
そして、私たちはこのループのすべてをループします。
我々は2つの異なることをする必要があります。
1つ目は、すべての四角に新しい色を割り当てることです。
しかし、我々は潜在的に3つが底に隠れていないことを確認する必要もあります。
だから私たちは今、ifステートメントを取り除くつもりで、すべての四角形を背景色にして色を付けることにします。
すべての四角形にはブロックが表示されます。
これは技術的に最後の3つだけが必要で、表示ブロックになるようにすべてをリセットしているので、これは少し無駄です。
しかし、それは私たちが後で焦点を当てることができる本当に小さなことです。
ですから、この作業がリフレッシュされていれば、行36に構文エラーがあることがわかります。
そしてここに余分な中括弧があります。
だから今すぐ保存してリフレッシュすると、いつものように6色になります。
私が簡単にクリックすると、3つが得られます。
私が激しくクリックすると、今度は6に戻ります。
私はここに新しい色をつけて、それが働いていることを確かめましょう。
ハードモードになると簡単にハードなので簡単です。
新しい色をもう一度クリックしてみましょう。
簡単に戻って、簡単にハードに戻ってください。
大丈夫。
そして、これを再生し、それが動作するかどうかを見てみましょう。
だから、ピックカラーは196 170 57です。
だから、たくさんの青と緑の多くを読んでいる。
だからそれは赤と緑の多くは黄色です。
だから、それはその1つまたはその1つになることはありません。
これは本当に素早くこの1つになるだろうし、うまく動いているようだ。
私が簡単にクリックすると3色に戻ります。
私たちが直面している最も重大な問題は、私がイージーモードになっているときに、私は再び3つではなく6つの色を生成し、6つのうちランダムな色を選んで表示されないそれを修正するには問題がある。
私たちがしなければならないことは、私たちが行っているモードを追跡する変数を持つことだけです。
簡単またはハードまたは3または6の正方形の数。
だからここでそれをやる。
私たちは、四角形の数と呼ばれる変数を持っていて、それは6から始まり、ここでそれを宣言して、色が等しく、numberのランダムな色を生成し、それを正方形または正方形の数にしましょうと言うでしょう。
それはちょっと簡単ですし、保存してください。
そして、それをいくつかの場所で置き換える必要があります。
だから私たちが簡単モードをクリックすると、麻痺の四角形を3にして、四角形のないランダムな色を生成します。
また、ハードボタンをクリックすると、いくつかの四角形が6になりますので、麻痺した四角形は6になり、次にランダムな色の四角形が生成されます。その後、リセットボタンをクリックすると、ここにいくつかの場所があります。
私たちはそこにNahmの正方形である正しい数の色を生成したいと思います。
それで、私たちが戻ってリフレッシュするなら、それは私たちのためにそれを世話するべきです。
私たちは簡単なモードに行き、このモードで勝利しましょう。
だから、ほとんど赤い青です。
これじゃない。
それじゃない。
そこに行く。
そして私が再び演奏をクリックすると、色を入力するときに3色しか表示されないようにしましょう。
色を選んだ色を見たら、色の配列の内側にあることがわかります。
だから私たちはこれ以上心配する必要はありません。
私たちのロジックは今働きます