だから私たちは今焦点を合わせることができる2つの異なるものを持っています。
最初のものは勝利選手の緑色になるようにここを上げています。
もう1つはリセット・ボタンが働いてリセットして再生できるようにすることです。
色の変更から始めて、CSSAファイルにクラスを定義することでこれを行うつもりです。
だから私はC Sファイルを作る必要があり、私はそのスコアキーパーに電話するつもりです。
私のHDMIファイルスコアキーパーDotsie SSの代わりにそれにリンクして保存します。
それから私はCSSAファイルに行き、クラスを定義するつもりです。私はそれを冬と呼ぶでしょうし、色は緑で、それだけで私たちが必要とするすべてのものを保存します。
そして、それが私がそれを望む方法を見ていることを確認するだけです。
スパンにクラスを追加しましょう。そうすれば、クラスは等しくなります。そして、私たちはgetから行くプレーヤー1のディスプレイのための勝者のクラスを与えます。
私がリフレッシュすると、緑色の0が表示されます。
それはまさに私たちが増分として望むものです。
もちろん、それは黒として始まり、クラスを追加するだけです。
ゲームが終わったら、私たちはJavaScriptに戻り、これを取り除く必要があります。
それで、それは黒に戻ります。
私たちのjavascriptに今すぐ移動します。
だから、プレイヤー1を開始するだけで、プレイヤー1の得点が勝ちの得点に等しいかどうかを確認する必要があります。
それは、プレーヤー1が勝ったことを意味します。
ここでは、プレーヤー1のディスプレイクラスリストを追加します。
クラス受賞者を追加する予定です。それだけでいいのです。
プレイヤー1の得点を増やして5になると、リフレッシュすると表示されます。
そのクラスが追加されました。
だから私たちがここを見れば、私はそれを調べます。
クラスがなく、5になるまで増分を続けます。
ここで注意を払うと、クラスが5つになると、勝者が追加されます。
だから、プレイヤー2でも同じことをやります。
したがって、プレーヤー2の得点が表示されるようにプレーヤーを変えます。
これを5に増やしてみましょう。
すばらしいです。
すべてがうまくいっているようです。
次の部分はリセットボタンがすぐに動作するようにしています。
ゲームを終えると、それは常に真実に設定されます。
ゲームを変える方法はありません。
したがって、リセットボタンをクリックすると、いくつかの異なる行のコードがトリガされる必要があります。
あなたが変更したい最初のもの。
プレイヤー1はスコアを獲得し、プレイヤーはスコアをゼロに戻します。
プレイヤー1ディスプレイに表示されている値を0に変更し、プレイヤーが表示されている値を変更したい場合、この緑色のクラスを削除する必要があります。
そして最後に、ゲームオーバーが偽に戻って、コードとここで再び実行できるようにする必要があります。
最初にボタンを選択する必要があります。
だから私たちはここに行き、ちょうどそれを選択する必要があります。
だから私はこれまでの他のボタンと一緒にやっていきます。
リセットボタンはドキュメントのドットと等しく、私たちはIDで別のget要素を行い、今回IDがリセットされて保存され、次に動作することを確認するだけです。
一定のログを行います。
リセットボタンをリセットし、リフレッシュします。
コンソールを見ると正しいボタンが表示されます。
キャンセルされ、ログに記録されました。
OKボタンをクリックしてイベントリスナーを追加することで開始する必要があります。イベントリスナーは、コールバック関数でクリックしてリセットします。再起動するには、そのログリセットをキャンセルするだけですそこにリセットボタンがクリックされました。
だから私たちが議論したように、論理を設定する必要があります。
プレイヤー1はスコアを獲得し、プレイヤーはスコアを0に戻す。
そう簡単に十分です。
プレーヤー1のスコア0のスコアプレーヤーはゼロです。
しかし、私がこれを今実行した場合、プレイヤー1のスコアを0に変更して増分するだけで、プレイヤー1が勝ち、リセットされます。
何も起こりそうにないと私たちはJavaScriptのスコアを変更するだけです。
ページのスコアを更新することはありません。そのため、更新する必要があるP1およびP2表示変数です。
したがって、1つの表示テキストコンテンツを作成し、それをゼロに設定するだけです。
1スコアに設定することもできます。
両方ともゼロでなければなりません。
Peteがテキストコンテンツを表示するのと同じことはゼロです。
今リフレッシュすれば5になる。
彼らは両方ともゼロに戻ります。
だから近づくゲームをしよう。
クリックリセットは両方ともゼロに戻ります。
次に勝者節を削除しましょう。
両方から勝者クラスを削除することで、これは簡単な方法ですか？
だから私たちはどちらがそれを持っているかを調べることさえしません。
両方から削除するだけです。
これは1つのディスプレイの問題です。
クラスリストは勝者を削除します。
そうすれば、その節を取り除き、それを表示することもできます。
だからそれを持っていてもどちらでも問題はありません。
だから今ゲームをすると勝者が得られます。
私はリセットをクリックします。
彼らはどちらも空白の平文に戻ります。
しかし、あなたが見ることができるように私は5になる。
私はリセットボタンをクリックしてもまだ動作しません。
ゲームオーバはまだ真実だからです。
したがって、これらのイベントの代わりに私たちのコードは実行されません。
したがって、最後に行う必要があります。
ゲームを虚偽に戻して、それが私たちのプレーを続けることを可能にするはずです。
だから私はインクリメンタルをリフレッシュします。
ゲームを終わらせましょう。
そこに行く。
私はもうプレイできません。
私はリセットをクリックし、それ以上のゲームは偽に戻って、私は再びプレイして、次に続けることができます。
それがここの中核機能です。
私たちはほとんどすべてのことをやっています。最後のことは、演技を数字にすること、勝ち点を変数にすることです。
だから、必ずしも5つだけではありません。
だから私たちはこの情報を持っていますので、私はこれを7に変更すると7になると言っています。私たちの最大得点は5ではなく7です。
だから我々はそこに着くためのいくつかのステップがあります。
最初に行う必要があるのは、入力タイプが数字に等しいことがわかるように、この入力を選択することです。
それはページ上の唯一の入力です。
だから必ずIDや何かを与える必要はありません。
だから私はここに行き、他のセレクタでそれを選択するだけです。
入力なしのドキュメントと呼びましょう。クエリーセレクタ入力をドキュメント化する方法はたくさんあります。
私たちはまたどこだけ指定することができます。
タイプは他の入力がある可能性があるため、numberと等しくなります。
私たちの場合、私はそれを簡単に保ちます。
入力は1つだけです。
だからこれはうまくいくでしょう。
OK。
だから私たちはその入力を選択しました。
イベントを追加しましょう。
だから私たちは何が起こるかは、これが値を変更したり、その数値が変化したりすると、これを更新したいと思うので、勝利スコア変数も更新したいと思っています。
だから私たちがする必要があるのは、イベントを追加することです。
だから私たちは麻痺して、ドットを入れましょうイベントLessnerはちょうどここでこのようにしてください。
機能とすべての警告を行います。
入力をクリックしたところ、実際にはクリックリスナーがこの仕事に最適なツールではないことがわかります。
はい、私はちょうどそこに行ったようにクリックで値を変更することができます。
しかし、私はまた削除を打つことができますし、自分自身の数字を入力し、私はクリックする必要がなかったため、イベントが発生しませんでした。
だから私はここで小さなボタンを使用すると、迅速なイベントが発生します。
それ以外の場合は、キーボードを使用するだけで簡単なイベントはありません。
だから、変更と呼ばれるこのケースではるかに優れた別のタイプのイベントがあります。
したがって、変更イベントは値が変更されるたびに実行され、その値がどのように変更されたかは関係ありません。
削除キーをクリックしたか、またはヒットしたからです。
ここで実際にアラートを変更して入力を変更し、次に更新してみましょう。
ここをクリックして変更すると、入力を変更したことがわかります。
しかし、私が削除し、それをクリックすることを伴わない数字を入力すると、入力が変更されていることがわかります。
これは、ここでこの数値を更新したいときにいつでも変更イベントを使用するイベントです。また、勝利スコアを更新して、新しい勝利スコアに達するまでゲームが継続するようにしたいと思っています。
うまくいけば、これは我々の実際の勝利得点ではない。
ロックペーパーはさみの間違いなく長いゲームです。
最初のことはここでこの値を更新することです。
だから私がそれを選択する前に、それは段落です。
だから私は段落を選択する必要があり、私はVAR段落をクエリセレクタタグと同じ文書にします。
このクイックイベントでは、テキストコンテンツを変更するだけで、クリックしたと言ったり、値を変更したりするように変更することから始めます。
ちょうどそのようにリフレッシュしてください。
今私は値が変更されたという段落の変更が変更されたが、これは私たちが以前にH-1で遭遇した同じ問題であるという値を変更すると段落全体を変更したくない。
我々はこの小さな部分を変更したいだけです。
だから我々が使いたいものは、実際には別のスパンです。
だから私たちは元に戻って、数字の周りにスパンを追加します。
これは、全体の要素ではなく、要素のほんの一部をターゲットにするためにも使用できます。
そして、私は実際には、今度はそれを選択する別の方法を示すためにアイデアを与えるつもりはありません。
それで段落ではなくスパンであることを覚えておいてください。
私たちのページにはそれだけのものがあります。
だから私たちは戻ってきます。
したがって、段落を選択するのではなく、新しい変数を作成して、得点表示と呼び、それをドキュメントクエリセレクタにします。
しかし、ページに他のスパンがあるので段落だけでなく、段落の内側にスパンを選択する必要があります。
だからこそ、私たちは書かなければなりません。
P空間。
スパン。
そして私たちは救います。
そして、ここで段落の代わりにここに表示される勝利スコアを更新しましょう。
こうして勝利の表示はこのようになります。
それでもまだ完璧ではないでしょう。
毎回値が更新されるだけですが、少なくとも段落全体を更新しているわけではありません。
次のステップでは、値を入力内に表示して値を同期させるように更新します。
したがって、入力からデータを取得する方法は実際にはわかりません。
現在の値をどうやって取得するのですか？
ここでは入力を選択して説明します。
クエリセレクタをドキュメントし、コンソール入力でそれを行うつもりです。変数に保存するつもりだから、var input
document taqueriaと入力して入力値を指定します。
その値は、値が何であれ、この入力に含まれるものの文字列になります。
したがって、これを7に変更してコードを再実行すると、7が得られます。
私はそれを膨大な数にして今回はもう一度やりますが、この入力の中に何らかの価値があることを反映しています。
だから、変更した文字列値の代わりにこれを変更することで、これを利用する予定です。
私たちはそれをNahm入力ドット値に変更し、ここから値を取り、勝利スコアを変更してテキストの内容を表示します。
そこで私たちはリフレッシュし、これを更新して、あなたは今一緒に同期することができます。
だから私は1から3にこれを更新すると、私のプレイや獲得スコア表示も1から3に更新されます。
だからもちろん、私たちは123に遊びません。
私たちはまだ5つまでプレーしています。
そして、それは、私たちのロジックがこの新しい入力値を反映していないからです。反映されているのは、当初の5という勝利スコアです。
だから私たちはまた、入力値を麻痺させて保存するのと同じスコアを獲得することをここに変更したいと思います。
そして今、これを変更して3つまでプレーしてみましょう。クリックすると、奇妙な振る舞いに気付くでしょう。
それで、5時にも止まらなかった。
それは永遠に続く。
だからこれは面白いバグで、データ型や数値の種類が違っていて、それらを2倍と3倍に比べて比較する必要があります。
だから、それの底に到達するために、いくつかの短所をしよう。 ロギング。
だから、このすべての要点は、ここのラインか、ここでは、プレーヤーのスコアが勝者のスコアと等しいかどうかを調べているラインです。
それがゲームを真実にする時です。
ゲームオーバーのため、今は起こっていません。
スコアを変更した場合
ゲームオーバーは決して変化しません。
それは常に偽です。
だから何かがこの線で間違っている。
だから、取り消しログを作って、2つのことをやろうとしましょう。
選手1の得点をプリントアウトして勝利点を印刷し、カンマで分けて同じ行に印刷します。
Comstockログを使用した簡単なメモは、今すぐデバッグする方法ですが、後でさらに高度なデバッグ方法について説明します。
だから私はリフレッシュし、開始すると、プレイヤー1の得点が上がったことを見て、3点を得て、5点目と比較しています。
プレイヤー1スコアは3つの勝利スコアは5です。
しかし、私がこれを変更してすぐに7と言いましょう。そして今すぐクリックします。
プレイヤー1は、現在、数字4のプレイヤー1スコアをストリング7である勝利スコアと比較しています。
私がちょうど5で始めるなら、再びリフレッシュしてください。
それはうまく動作します。
しかし、私がこれを変えて、それを数字と文字列と比較すると、私たちはここでトリプルイコールをしているので、それはうまくいかないでしょう。
だから私達は二重の等価をすることができますが、あなたは私がそれのファンではないことを知っています。
だから私たちが代わりにやることは、ここに落ちてこれを取ってその価値を入れて文字列にすることです。
その数字と同じように、その大文字と数字を入力して渡して、それを文字列に変換し、それを勝ち抜くように設定します。
だから我々は新鮮だった。
今これはうまく動作します。
我々は5になるが、我々もそれを私たちのゲームに変えれば2で終わる。
私たちが始めたことである5つのゲームをプレイしている場合、それに焦点を当てる必要がある小さな問題が1つあります。
それを途中で決めると、最高得点で勝利スコアを変更したいと思っています。
今私たちのコードはこれをうまく処理しません。なぜなら私がこれを変更すれば、私たちは3つしか演奏しないからです。
これを処理する方法は2つあります。
最初のものは、スコアとすべてを0に戻しています。
もう1人は5人までプレーし続けています。
しかし、実際に起こっているのは、私たちが3つまでプレーしているということですが、すでに3つを超えています。
だから私たちはすでにそれを渡しているので、私たちが嘘をついているので、私たちのコードは実際にはもう機能しません。
勝つスコアよりも大きいかどうかはチェックしていません。
もし私たちがそれを変えることができたら。
だから、もしそれが勝ち点を上回るなら、試合は終わっていて、それはいいです。
しかし、もっと良い解決策は、ゲームの途中で最大のスコアを決して変更したことがないので、最大のスコアを変更するたびにゼロにリセットすることだと思います。私たちはゲームをやり直したいと思っています。短いリファクタのための良いユースケースですか？
だからここで得点を変えると勝ちです。
ここで実行しているのと同じロジックのゲームをリセットしたい。
ですから、このコードをコピーしてresetという新しい関数を作成するだけです。
関数のリセットはこのコードをすべてそこに置き、数値入力が変わるとリセットを実行するだけです。
だから、ここで私は5に遊んでリセットを参照してください。
これは正常に動作します。
私たちは5つになる。
私はリセットをクリックし、このイベントリスナーの内部でリセット関数を呼び出さなかったので、リセット関数呼び出しを追加する必要があります。
そして今私達がリフレッシュすれば私達は5になる。
私はリセットをクリックします。
それはすべて良いです。
そして今私が試合途中でスコアを変更しても、それがリセットされ、今度は1になる。
そして、それは動作します。
または私が変更した場合。
だから私たちは現在7歳になっている。
私たちはゼロに戻します。
だから私はあなたが実際には2になるゲームであることを知っていると判断した場合、代わりに仕様をゼロに変更します。
そして、私たちはそれをどう扱うか心配する必要はありません。
途中で変更した場合。
だから私たちがやっていることは、コードをここで、そしてここで複製するのではなく、コードを乾かすための別の機能をリセットすることだけです。
それは今のところそれです。
それだけでいいのです。
あなたの中には、このコードが実際にこれを行う可能性のある最良の方法であるかどうか疑問に思うかもしれません。
答えはいいえだ。
あなたがよく見ると、それは非常に似ていることがわかります。
それは基本的には同じですが、ここではここで、P2はここでやっています。
しかし、他のすべての言葉は同じです。
したがって、これを少し良くするという、より高度なリファクタリング方法があります。
しかし、ここでは私が焦点を当てたいのは、概念的には、JavaScriptイベントリスナーセレクターの支配的な関係とインタラクティブなHD
IMOをどのように取り入れることができるのかということです。
しかし、ちょうどこのようなコードを少し短めにするほうが良い方法を見ていることを知っておいてください。
私たちがここで行うことができ、それをイベントリスナーに置くことができることが1つあります。
私たちはちょうどこれをマイナーチェンジであるという言葉で置き換えてもよいが、それを行うことができ、ちょっとコードを少しだけ短くすることができる。
だから私がこれを変えれば、私たちは今3つに遊んでいる。
すべてがまったく同じように機能します。
私はちょうどイベントが何を入力したのか聞いていたものを指しているこのキーワードを使用しました。
さて、このレッスンではそれだけです。
私が次のプロジェクトで言及したように、我々はより実質的なものを作り上げようとしています。そして、これよりももっと良く見えると約束します。