このビデオでは、私が作りたいと思ういくつかの小さな変更があります。次に、これを少しリファクタリングする方法について私は話します。
最初の変更は、このゲームに勝つときです。
だからここで勝ちましょう。
私たちは行くと私はこの正しいメッセージを取得し、私は再びプレイをクリックします。
それでも正しいと言います。
そして、本当にすばやい変更であることをリセットすることを願っています。
私たちがする必要があるのは、プレイを再びクリックしたときに実行されるコードを見つけて、ここにあるスパンを変更して空にするだけです。
だから、このフルスクリーンを作ることを見つけよう。
それで、ここにあるリセットボタンをクリックします。
私たちがする必要があるのは、メッセージ表示と呼ばれる表示を変更することだけです。
だからどこでもここでそれをやるよ。
メッセージ表示テキストupsテキスト内容は空の文字列と等しくなります。
それがどうやって行くのか見てみましょう。
リフレッシュ。
OKをクリックするだけで勝ちます。
OKだからここで正しいと言います。
そして、私がもう一度遊びをクリックすると、それはなくなる。
私が作ろうとしているもう一つのわずかな変更は、このボタンはユーザーが勝利した後に再びプレイすると言うだけです。
だから、私はページをリフレッシュして、新しい色を出しています。これはどのように動作させたいのかです。
それから私が勝つと、私はもう一度遊びたいかどうか聞いてきます。
そして私が再びプレイをクリックすると、ボタンのテキストを新しい色に戻すように変更したいと思っています。
だから本当にわずかな違いですが、私はユーザーがちょうど勝った場合、再びプレイをしたいと思っています。
だから私たちのコードに行くと、ユーザーは、ここでは、ユーザーが選んだ色をクリックすると、ゲームに勝つ場所を見つける必要があります。
ユーザーが適切な色をクリックすると、リセットボタンのテキストがテキストの内容に変わりますが、ユーザーがリセットボタンをクリックしてそのボタンを変更すると、テキストの内容が表示されます。
このドットテキストのコンテンツは新しい色に戻り、リセットボタンも作成できます。
しかし、リセットボタンのイベントリスナーの内部にいるので、これを行う方が簡単です。
そして、それが正しいものになるまで、すばやくリフレッシュすれば、それは良いはずです。
我々は再びプレーしたい。
確かに。
今度は新しい色に戻り、何度も何度も何度も何度も何度も何度も何度も何度も新しい色を言います。
だから本当に小さなことですが、私はそれが本当に気を散らしていることがわかります。私はこれらのボタンの1つをクリックすると、その周りにこの厄介な輪郭があります。
そしてこれは実際に私たちのブラウザがそれをしていることです。
そして、それを断つことができます。
私はあなたがスクリーンキャストでそれを見ることができるか分からないが、青い輪郭がある。
それはかなり有害です。
だから、私たちがスタイルシートに行くのを取り除くために、ボタンをここでちょうど選択すると、アウトラインなしを書いて戻ってリフレッシュすることができます。
クリックするとその周りに青い輪郭が表示されません。
だから私はゲームロジックのためにやりたかったことです。
今度は、あなたのコードをリファクタリングするのに少し時間を費やしたいと思っています。
だから戻ってみましょう。
私に最初に飛びついたのは、ここでは簡単なボタンとそれぞれのリスナーがあるハード・ボタンがあるコードです。
彼らは仕事の仕方が非常に似ています。
それらのうちの1つを除いて3つの正方形で動作します。
もう1つは6つで動作しますが、それ以外の場合は基本的に同じことを行います。
だから私たちは実際にその重複を減らすことができます。
そして、私たちがしようとしていることをそれぞれのアイデアに与えるのではなく、それらのIDを取り除き、それらにクラスを与え、それらは同じクラスを共有することになります。
したがって、クラスはモードと呼ばれることになります。
そこでクラスモードにしましょう。
ボタンや項目は2つのクラスを持つことができることを思い出してください。
スペースで区切るだけです。
クラスモードとクラスが選択されています。
OK。
ここではこれらの2つのボタンを削除し、モードボタンと呼ばれるボタンのリストを作成します。これはクエリセレクタのドキュメントになります。
Paul dattモード。
2つのボタンがあります
次にモードボタンをループします。
したがって、varがゼロに等しい必要があります。
モードボタンが驚くほど少ない。
またこれが私たちにしてくれるのは、将来的には中程度の難易度モードや難易度の高い難易度モードを追加したい場合です。
余分なリスナーを追加する必要はありません。すべてのリスナーを選択してからループを使用するからです。追加するボタンごとに手動でリスナーを作成する必要があります。
OK。
ここでループを完成させてください。
プラスプラス。
私たちがやることは、モードボタンを追加して、イベントリスナーのクリックを追加して、今のところこれをそのままにしておくことです。
さらに進める前に、実際にコードをコメントアウトして、新しいコードから何が実行されているのか、それらのボタンの1つをクリックしたときに何が起こりたいのかを知ることができます。
まずは、選択したクラスを適用する必要があります。
だから今は私たちが動かすときだけです。
その色を私はクリックしたときの色にします。
だから私たちは簡単なボタンとハードボタンにそれをやっていることを除いて私たちがここにあるものであるように選択されたこのドットクラスリストドットアドを行う必要があります。
私たちはこれをクリックするだけで、クリックされたものを参照することができます。
唯一の問題は、元のものと同様にそれをオフにする必要があるということです。
これを行うには、ちょっとハードコードしてモードボタンを作成するモードのボタンをゼロドットクラスリストのドットを選択して削除し、もう一方のボタンからも削除します。
ボタンが2つしかないからです。
これは問題ではありません。
私たちがやっていることは、安全のために両方のボタンからそれを削除してから、ちょうどクリックしたボタンに追加することです。
だから今これを試してリフレッシュすればいい。
私たちがちょうどクリックしたものに追加され、他のものから削除されていることがわかります。
だから私たちが次に行う必要があるのは、これらのボタンのロジックの大部分をここに追加することです。
そこで、新しい色を選択するための正方形の数を把握し、クリックしようとしている色の新しい色を選択する必要があります。
最後に、変更を反映するようにページを更新する必要があります。
だから私は実際に新しい関数を作り、その関数をリセットしようとしています。これはいくつかの場所で使うつもりです。新しい色をピックして色配列から新しい色を選び、ページを更新して新しい色を表示し、ここでこの表示を更新します。
私たちはいつもそれをやっているので、私はそれをすべて関数に置くつもりです。
だから、私たちがこの関数の中でやる必要があるのは、実際にはここからコピーすることだけです。
私たちはすでにここでこれを行っています。
私はこのようなすべてのものを私たちのリセットにコピーするつもりでした。
何が起きているのかを見てみましょう。
だから、升目の二乗変数に応じてランダムな色をリセットしたり生成したりする代わりに、新しい色を選んで、色の表示内容を変更しています。
このテキストコンテンツは新しい色と同じです。
これはリセットボタンを指していたので実際には機能しません。
そして、リセットボタンの中央のイベントの中にあった。
今はresetという別の関数の代わりになっています。
ですから、リセットボタンとしてハードコードする必要があります。
そして、メッセージの表示を空に変更します。
そして、すべての四角形をループして、色を更新しています。
そして、私たちは8：1のバックグラウンドを青色に戻しています。
そして、ここでは代わりにそれを呼び出すだけで、リセットを実行します。
私たちが麻痺の広場を更新することは決してないという小さな問題があります。
だから、簡単なボタンをクリックすると、四角形の変数を3に変更します。
ハード・ボタンをクリックすると、それを6に変更します。
その分を行うには、ここで、if文を追加してください。私たちが行うことができるのは、このテキストコンテンツがあれば書くことです。
テキストコンテンツが簡単な場合にクリックされたボタン。
私たちがやろうとしているのは、麻痺した四角形が三つのLの四角形に等しいと言うことです。
そしてリセット機能では、ここで見ているように麻痺の四角形を使用するリセット機能を呼び出します。
ランダムな色を生成する関数を呼び出すために、いくつかの四角形を使用しています。
だからここでやっているいくつかの四角形を更新する必要があります。
実際には、これを書くためのより短い方法があります。
三項演算子と呼ばれています。
だから私は最初にそれを書くつもりですし、それから私はそれがどのように動作するかについて話します。
したがって、このテキストの内容は等しいequalsです。
簡単な疑問符。
Numbの正方形は、3つの結腸の麻痺の正方形が6に等しいことに等しい。
ここの1行は、ここの4行とまったく同じことです。
これらの5行。
だから三項演算子と呼ばれています。
それには3つの部分があります。
最初のことは条件です。
したがって、このテキストの内容が簡単な場合と同じように、これを読み取ることができます。正方形がない場合は3、それ以外の場合は正方形は6になりません。
だから、これを書いているのです。
そして私はこれのように保つつもりです。
通常は、1つの値を2つの異なる可能なオプションに設定している場合には、簡単な1行if文を使用すれば、3項演算子の良いユースケースになります。
私たちはまだ問題を抱えていますが、それは実際に隠れることはありません。
または、正方形の正しい数を示します。
では、リフレッシュするとどうなりますか？
ハードモードから始めます。
それはうまく動作します。
すべてが同じように機能します。
私が簡単にクリックしてもまだここには6つの四角があり、下の三つは色が変わっていないことがわかります。三つの色しか生成しなかったからです。
だから私たちがリセット機能の代わりに何をする必要があるのか​​、それを説明する必要があります。
そこでここでは、このループの代わりに、colors配列の色と一致する四角形の色を変更しています。
カラー配列内に3つのアイテムしかない場合、実際に行う必要があるのは他の3つの四角形を非表示にすることです。
だから私はifステートメントでそれを書くつもりです。そして、塗りつぶす色があるかどうかをチェックするつもりです。
私はまた何かをする。
だから色があれば、私たちは塗りつぶしたり、四角形の背景色を変えたりします。
私はその色でなければ私は何も表示されない正方形を変える必要がある。
そして、それはまさにそのように表示するためのスタイルにする必要があります。
それで、それは私たちのためにそれを隠すでしょう。
それで、簡単なボタンをクリックすると、3つのアイテムが6つの四角形をループして再確認している色の配列があります。
その四角に一致する色があり、最初の3つの色がある場合、その色があります。
そこで、背景色を配列の色に設定します。
しかし、私は最後の3色私はノーになるだろう。
実際には未定義です。
色はありません。
それは偽です。
そして、何が起こるかは、ディスプレイをnoneにすることです。
だから私はそれがどのようにリフレッシュするかをお見せしましょう。
簡単にクリックすると、下の3つが消えます。
簡単にクリックし続けると3つの新しい色が得られます。
ゲームをしましょう。
そこに行く。
私たちは問題を抱えていますが、ハードをクリックすると、6つの四角形すべてを新しいバクトリム色に変更していますが、新しい背景を与える前に、底辺の3人がそれを回避することを隠すことはありません正方形に色を付ける。
私は先に進み、それらを再現するつもりです。
だから私はスタイルの表示がブロックに等しいと思った四角形になるだろう。
そういうわけで、私たちはそれらを元に戻す方法です。
そして、我々は6人全員にそれを行うつもりです。
たいしたことじゃない。
だから、もし彼らに背景色をつけたら、彼らは最初に目に見えるようにするつもりです。
だから、もし我々がリフレッシュして、彼らが容易に行くなら、私たちは3つのゲームをする。
私は難しいをクリックします。
今我々は6人の発信者を得る。
ゲームをしましょう。
私たちは簡単にクリックして行き、3つに戻ります。
大丈夫。
だから、ここでたくさんのコードを整理しているのが分かります。
以前はずっと長くなっていました。
少なくとも3倍の長さに似ています。
そして、2つの異なるクリックリスナーと今や私たちのコードは比較的汎用性があります。
中程度の難易度のボタンを追加したい場合は、ここでこの行を変更して、ノータナンバーが四角になるようにします。
多分5つの四角形が必要な場合や、10の四角形を変更してリセットする必要がある場合は、リセットボタンをクリックしたときにリセット機能を使用してリセット機能を呼び出す必要があります。
だから私たちがする必要があるのは、リセットボタンの代わりにすべてを置き換えることです。ちょうどそのようにリセットされたLisnerをクリックしてください。
だからこそ、私たちのコードを多く動かしています。
私たちはちょうど10かそこらの行を取り除きました。
だから括弧なしで保存し直しましょう。
ブラウザに行き、それがまだ動作することを確認しましょう。
だからゲームをしましょう。
もう一度再生をクリックすると、正常にリセットされます。
簡単に別のゲームをプレイしてみましょう。
大丈夫。
だから私たちはコードをかなり動かす。
彼らはこれらの2つを取り除くつもりです