1
00:00:00,170 --> 00:00:04,320
このビデオでは、私が作りたいと思ういくつかの小さな変更があります。次に、これを少しリファクタリングする方法について私は話します。

2
00:00:04,320 --> 00:00:06,330
 

3
00:00:06,330 --> 00:00:09,570
最初の変更は、このゲームに勝つときです。

4
00:00:09,840 --> 00:00:11,860
だからここで勝ちましょう。

5
00:00:11,880 --> 00:00:16,320
私たちは行くと私はこの正しいメッセージを取得し、私は再びプレイをクリックします。

6
00:00:16,710 --> 00:00:18,080
それでも正しいと言います。

7
00:00:18,300 --> 00:00:22,030
そして、本当にすばやい変更であることをリセットすることを願っています。

8
00:00:22,320 --> 00:00:27,330
私たちがする必要があるのは、プレイを再びクリックしたときに実行されるコードを見つけて、ここにあるスパンを変更して空にするだけです。

9
00:00:27,330 --> 00:00:30,730
 

10
00:00:30,750 --> 00:00:33,760
だから、このフルスクリーンを作ることを見つけよう。

11
00:00:34,410 --> 00:00:38,570
それで、ここにあるリセットボタンをクリックします。

12
00:00:39,360 --> 00:00:44,190
私たちがする必要があるのは、メッセージ表示と呼ばれる表示を変更することだけです。

13
00:00:44,190 --> 00:00:48,090
だからどこでもここでそれをやるよ。

14
00:00:48,090 --> 00:00:57,960
メッセージ表示テキストupsテキスト内容は空の文字列と等しくなります。

15
00:00:58,360 --> 00:01:00,330
それがどうやって行くのか見てみましょう。

16
00:01:00,540 --> 00:01:01,730
リフレッシュ。

17
00:01:01,810 --> 00:01:03,740
OKをクリックするだけで勝ちます。

18
00:01:04,050 --> 00:01:05,680
OKだからここで正しいと言います。

19
00:01:05,790 --> 00:01:09,440
そして、私がもう一度遊びをクリックすると、それはなくなる。

20
00:01:09,660 --> 00:01:15,270
私が作ろうとしているもう一つのわずかな変更は、このボタンはユーザーが勝利した後に再びプレイすると言うだけです。

21
00:01:15,270 --> 00:01:16,290
 

22
00:01:16,320 --> 00:01:20,760
だから、私はページをリフレッシュして、新しい色を出しています。これはどのように動作させたいのかです。

23
00:01:20,760 --> 00:01:23,910
それから私が勝つと、私はもう一度遊びたいかどうか聞いてきます。

24
00:01:24,120 --> 00:01:30,080
そして私が再びプレイをクリックすると、ボタンのテキストを新しい色に戻すように変更したいと思っています。

25
00:01:30,090 --> 00:01:35,280
だから本当にわずかな違いですが、私はユーザーがちょうど勝った場合、再びプレイをしたいと思っています。

26
00:01:35,850 --> 00:01:41,820
だから私たちのコードに行くと、ユーザーは、ここでは、ユーザーが選んだ色をクリックすると、ゲームに勝つ場所を見つける必要があります。

27
00:01:41,820 --> 00:01:44,240
 

28
00:01:44,370 --> 00:01:50,970
ユーザーが適切な色をクリックすると、リセットボタンのテキストがテキストの内容に変わりますが、ユーザーがリセットボタンをクリックしてそのボタンを変更すると、テキストの内容が表示されます。

29
00:01:50,970 --> 00:01:56,650
 

30
00:01:56,790 --> 00:02:05,040
このドットテキストのコンテンツは新しい色に戻り、リセットボタンも作成できます。

31
00:02:05,040 --> 00:02:09,540
しかし、リセットボタンのイベントリスナーの内部にいるので、これを行う方が簡単です。

32
00:02:10,050 --> 00:02:15,270
そして、それが正しいものになるまで、すばやくリフレッシュすれば、それは良いはずです。

33
00:02:15,360 --> 00:02:16,440
我々は再びプレーしたい。

34
00:02:16,680 --> 00:02:17,480
確かに。

35
00:02:17,490 --> 00:02:24,350
今度は新しい色に戻り、何度も何度も何度も何度も何度も何度も何度も何度も新しい色を言います。

36
00:02:24,360 --> 00:02:26,900
 

37
00:02:26,910 --> 00:02:31,770
だから本当に小さなことですが、私はそれが本当に気を散らしていることがわかります。私はこれらのボタンの1つをクリックすると、その周りにこの厄介な輪郭があります。

38
00:02:32,220 --> 00:02:34,350
 

39
00:02:34,680 --> 00:02:36,990
そしてこれは実際に私たちのブラウザがそれをしていることです。

40
00:02:36,990 --> 00:02:38,560
そして、それを断つことができます。

41
00:02:38,610 --> 00:02:41,940
私はあなたがスクリーンキャストでそれを見ることができるか分からないが、青い輪郭がある。

42
00:02:42,070 --> 00:02:43,190
それはかなり有害です。

43
00:02:43,200 --> 00:02:49,560
だから、私たちがスタイルシートに行くのを取り除くために、ボタンをここでちょうど選択すると、アウトラインなしを書いて戻ってリフレッシュすることができます。

44
00:02:49,560 --> 00:02:54,290
 

45
00:02:54,310 --> 00:02:57,810
クリックするとその周りに青い輪郭が表示されません。

46
00:02:57,960 --> 00:03:00,260
だから私はゲームロジックのためにやりたかったことです。

47
00:03:00,450 --> 00:03:03,500
今度は、あなたのコードをリファクタリングするのに少し時間を費やしたいと思っています。

48
00:03:03,630 --> 00:03:04,880
だから戻ってみましょう。

49
00:03:04,980 --> 00:03:10,770
私に最初に飛びついたのは、ここでは簡単なボタンとそれぞれのリスナーがあるハード・ボタンがあるコードです。

50
00:03:10,770 --> 00:03:12,120
 

51
00:03:12,240 --> 00:03:14,370
彼らは仕事の仕方が非常に似ています。

52
00:03:14,370 --> 00:03:17,100
それらのうちの1つを除いて3つの正方形で動作します。

53
00:03:17,100 --> 00:03:20,860
もう1つは6つで動作しますが、それ以外の場合は基本的に同じことを行います。

54
00:03:21,090 --> 00:03:23,720
だから私たちは実際にその重複を減らすことができます。

55
00:03:23,880 --> 00:03:30,300
そして、私たちがしようとしていることをそれぞれのアイデアに与えるのではなく、それらのIDを取り除き、それらにクラスを与え、それらは同じクラスを共有することになります。

56
00:03:30,300 --> 00:03:33,180
 

57
00:03:33,390 --> 00:03:37,660
したがって、クラスはモードと呼ばれることになります。

58
00:03:37,770 --> 00:03:39,570
そこでクラスモードにしましょう。

59
00:03:39,600 --> 00:03:42,850
ボタンや項目は2つのクラスを持つことができることを思い出してください。

60
00:03:42,870 --> 00:03:45,010
スペースで区切るだけです。

61
00:03:45,030 --> 00:03:48,030
クラスモードとクラスが選択されています。

62
00:03:48,420 --> 00:03:49,020
OK。

63
00:03:49,160 --> 00:03:56,460
ここではこれらの2つのボタンを削除し、モードボタンと呼ばれるボタンのリストを作成します。これはクエリセレクタのドキュメントになります。

64
00:03:56,460 --> 00:03:59,220
 

65
00:03:59,350 --> 00:04:03,090
Paul dattモード。

66
00:04:03,160 --> 00:04:05,410
2つのボタンがあります

67
00:04:05,700 --> 00:04:08,360
次にモードボタンをループします。

68
00:04:08,370 --> 00:04:13,020
したがって、varがゼロに等しい必要があります。

69
00:04:13,290 --> 00:04:16,740
モードボタンが驚くほど少ない。

70
00:04:16,910 --> 00:04:23,250
またこれが私たちにしてくれるのは、将来的には中程度の難易度モードや難易度の高い難易度モードを追加したい場合です。

71
00:04:23,280 --> 00:04:25,380
 

72
00:04:25,470 --> 00:04:30,990
余分なリスナーを追加する必要はありません。すべてのリスナーを選択してからループを使用するからです。追加するボタンごとに手動でリスナーを作成する必要があります。

73
00:04:30,990 --> 00:04:34,800
 

74
00:04:35,100 --> 00:04:35,330
OK。

75
00:04:35,340 --> 00:04:36,480
ここでループを完成させてください。

76
00:04:36,570 --> 00:04:37,740
プラスプラス。

77
00:04:38,100 --> 00:04:49,360
私たちがやることは、モードボタンを追加して、イベントリスナーのクリックを追加して、今のところこれをそのままにしておくことです。

78
00:04:49,360 --> 00:04:50,590
 

79
00:04:50,590 --> 00:04:56,020
さらに進める前に、実際にコードをコメントアウトして、新しいコードから何が実行されているのか、それらのボタンの1つをクリックしたときに何が起こりたいのかを知ることができます。

80
00:04:56,020 --> 00:05:01,100
 

81
00:05:01,210 --> 00:05:05,580
まずは、選択したクラスを適用する必要があります。

82
00:05:05,680 --> 00:05:07,260
だから今は私たちが動かすときだけです。

83
00:05:07,300 --> 00:05:10,220
その色を私はクリックしたときの色にします。

84
00:05:10,780 --> 00:05:20,140
だから私たちは簡単なボタンとハードボタンにそれをやっていることを除いて私たちがここにあるものであるように選択されたこのドットクラスリストドットアドを行う必要があります。

85
00:05:20,170 --> 00:05:23,510
 

86
00:05:23,710 --> 00:05:27,070
私たちはこれをクリックするだけで、クリックされたものを参照することができます。

87
00:05:27,220 --> 00:05:31,180
唯一の問題は、元のものと同様にそれをオフにする必要があるということです。

88
00:05:31,540 --> 00:05:42,400
これを行うには、ちょっとハードコードしてモードボタンを作成するモードのボタンをゼロドットクラスリストのドットを選択して削除し、もう一方のボタンからも削除します。

89
00:05:42,550 --> 00:05:47,320
 

90
00:05:47,800 --> 00:05:49,360
ボタンが2つしかないからです。

91
00:05:49,390 --> 00:05:50,550
これは問題ではありません。

92
00:05:50,560 --> 00:05:55,840
私たちがやっていることは、安全のために両方のボタンからそれを削除してから、ちょうどクリックしたボタンに追加することです。

93
00:05:55,840 --> 00:05:57,690
 

94
00:05:57,700 --> 00:06:00,690
だから今これを試してリフレッシュすればいい。

95
00:06:01,030 --> 00:06:05,560
私たちがちょうどクリックしたものに追加され、他のものから削除されていることがわかります。

96
00:06:05,560 --> 00:06:06,630
 

97
00:06:06,640 --> 00:06:10,900
だから私たちが次に行う必要があるのは、これらのボタンのロジックの大部分をここに追加することです。

98
00:06:11,080 --> 00:06:26,290
そこで、新しい色を選択するための正方形の数を把握し、クリックしようとしている色の新しい色を選択する必要があります。

99
00:06:26,310 --> 00:06:30,420
 

100
00:06:30,670 --> 00:06:37,850
最後に、変更を反映するようにページを更新する必要があります。

101
00:06:38,110 --> 00:06:43,810
 

102
00:06:43,810 --> 00:06:49,060
 

103
00:06:49,060 --> 00:06:55,030
 

104
00:06:55,150 --> 00:06:59,650
だから私は実際に新しい関数を作り、その関数をリセットしようとしています。これはいくつかの場所で使うつもりです。新しい色をピックして色配列から新しい色を選び、ページを更新して新しい色を表示し、ここでこの表示を更新します。

105
00:06:59,650 --> 00:07:03,400
私たちはいつもそれをやっているので、私はそれをすべて関数に置くつもりです。

106
00:07:03,400 --> 00:07:08,500
だから、私たちがこの関数の中でやる必要があるのは、実際にはここからコピーすることだけです。

107
00:07:08,530 --> 00:07:09,860
私たちはすでにここでこれを行っています。

108
00:07:09,990 --> 00:07:15,200
私はこのようなすべてのものを私たちのリセットにコピーするつもりでした。

109
00:07:15,430 --> 00:07:17,150
何が起きているのかを見てみましょう。

110
00:07:17,350 --> 00:07:24,740
だから、升目の二乗変数に応じてランダムな色をリセットしたり生成したりする代わりに、新しい色を選んで、色の表示内容を変更しています。

111
00:07:24,740 --> 00:07:29,310
 

112
00:07:29,530 --> 00:07:32,020
このテキストコンテンツは新しい色と同じです。

113
00:07:32,050 --> 00:07:37,060
これはリセットボタンを指していたので実際には機能しません。

114
00:07:37,390 --> 00:07:40,420
そして、リセットボタンの中央のイベントの中にあった。

115
00:07:40,540 --> 00:07:43,240
今はresetという別の関数の代わりになっています。

116
00:07:43,270 --> 00:07:45,720
ですから、リセットボタンとしてハードコードする必要があります。

117
00:07:45,880 --> 00:07:49,140
そして、メッセージの表示を空に変更します。

118
00:07:49,570 --> 00:07:54,660
そして、すべての四角形をループして、色を更新しています。

119
00:07:54,970 --> 00:07:57,920
そして、私たちは8：1のバックグラウンドを青色に戻しています。

120
00:07:58,180 --> 00:08:02,170
そして、ここでは代わりにそれを呼び出すだけで、リセットを実行します。

121
00:08:02,170 --> 00:08:06,760
私たちが麻痺の広場を更新することは決してないという小さな問題があります。

122
00:08:06,880 --> 00:08:11,870
だから、簡単なボタンをクリックすると、四角形の変数を3に変更します。

123
00:08:11,920 --> 00:08:15,180
ハード・ボタンをクリックすると、それを6に変更します。

124
00:08:15,220 --> 00:08:22,940
その分を行うには、ここで、if文を追加してください。私たちが行うことができるのは、このテキストコンテンツがあれば書くことです。

125
00:08:22,960 --> 00:08:27,880
テキストコンテンツが簡単な場合にクリックされたボタン。

126
00:08:28,250 --> 00:08:36,510
私たちがやろうとしているのは、麻痺した四角形が三つのLの四角形に等しいと言うことです。

127
00:08:36,640 --> 00:08:42,130
そしてリセット機能では、ここで見ているように麻痺の四角形を使用するリセット機能を呼び出します。

128
00:08:42,130 --> 00:08:43,030
 

129
00:08:43,150 --> 00:08:47,410
ランダムな色を生成する関数を呼び出すために、いくつかの四角形を使用しています。

130
00:08:47,600 --> 00:08:51,970
だからここでやっているいくつかの四角形を更新する必要があります。

131
00:08:52,000 --> 00:08:57,010
実際には、これを書くためのより短い方法があります。

132
00:08:57,010 --> 00:08:58,580
三項演算子と呼ばれています。

133
00:08:58,570 --> 00:09:01,720
だから私は最初にそれを書くつもりですし、それから私はそれがどのように動作するかについて話します。

134
00:09:01,720 --> 00:09:06,350
したがって、このテキストの内容は等しいequalsです。

135
00:09:06,670 --> 00:09:10,870
簡単な疑問符。

136
00:09:11,000 --> 00:09:19,110
Numbの正方形は、3つの結腸の麻痺の正方形が6に等しいことに等しい。

137
00:09:19,120 --> 00:09:23,710
ここの1行は、ここの4行とまったく同じことです。

138
00:09:23,710 --> 00:09:25,430
これらの5行。

139
00:09:25,510 --> 00:09:27,360
だから三項演算子と呼ばれています。

140
00:09:27,400 --> 00:09:28,950
それには3つの部分があります。

141
00:09:28,960 --> 00:09:30,860
最初のことは条件です。

142
00:09:31,070 --> 00:09:40,390
したがって、このテキストの内容が簡単な場合と同じように、これを読み取ることができます。正方形がない場合は3、それ以外の場合は正方形は6になりません。

143
00:09:40,450 --> 00:09:42,080
 

144
00:09:42,250 --> 00:09:44,060
だから、これを書いているのです。

145
00:09:44,380 --> 00:09:46,280
そして私はこれのように保つつもりです。

146
00:09:46,270 --> 00:09:51,880
通常は、1つの値を2つの異なる可能なオプションに設定している場合には、簡単な1行if文を使用すれば、3項演算子の良いユースケースになります。

147
00:09:51,880 --> 00:09:55,970
 

148
00:09:56,600 --> 00:09:59,420
私たちはまだ問題を抱えていますが、それは実際に隠れることはありません。

149
00:09:59,420 --> 00:10:01,380
または、正方形の正しい数を示します。

150
00:10:01,390 --> 00:10:03,940
では、リフレッシュするとどうなりますか？

151
00:10:04,030 --> 00:10:04,950
ハードモードから始めます。

152
00:10:04,950 --> 00:10:05,860
それはうまく動作します。

153
00:10:05,870 --> 00:10:07,290
すべてが同じように機能します。

154
00:10:07,450 --> 00:10:13,240
私が簡単にクリックしてもまだここには6つの四角があり、下の三つは色が変わっていないことがわかります。三つの色しか生成しなかったからです。

155
00:10:13,240 --> 00:10:16,160
 

156
00:10:16,370 --> 00:10:21,890
だから私たちがリセット機能の代わりに何をする必要があるのか​​、それを説明する必要があります。

157
00:10:21,880 --> 00:10:26,750
そこでここでは、このループの代わりに、colors配列の色と一致する四角形の色を変更しています。

158
00:10:26,740 --> 00:10:28,000
 

159
00:10:28,210 --> 00:10:33,370
カラー配列内に3つのアイテムしかない場合、実際に行う必要があるのは他の3つの四角形を非表示にすることです。

160
00:10:33,380 --> 00:10:34,060
 

161
00:10:34,270 --> 00:10:40,060
だから私はifステートメントでそれを書くつもりです。そして、塗りつぶす色があるかどうかをチェックするつもりです。

162
00:10:40,670 --> 00:10:42,070
私はまた何かをする。

163
00:10:42,110 --> 00:10:47,410
だから色があれば、私たちは塗りつぶしたり、四角形の背景色を変えたりします。

164
00:10:47,410 --> 00:10:57,200
私はその色でなければ私は何も表示されない正方形を変える必要がある。

165
00:10:57,320 --> 00:11:02,920
そして、それはまさにそのように表示するためのスタイルにする必要があります。

166
00:11:03,100 --> 00:11:05,130
それで、それは私たちのためにそれを隠すでしょう。

167
00:11:05,360 --> 00:11:12,280
それで、簡単なボタンをクリックすると、3つのアイテムが6つの四角形をループして再確認している色の配列があります。

168
00:11:12,280 --> 00:11:14,870
 

169
00:11:14,920 --> 00:11:19,790
その四角に一致する色があり、最初の3つの色がある場合、その色があります。

170
00:11:19,820 --> 00:11:22,890
そこで、背景色を配列の色に設定します。

171
00:11:23,020 --> 00:11:26,700
しかし、私は最後の3色私はノーになるだろう。

172
00:11:26,740 --> 00:11:27,910
実際には未定義です。

173
00:11:27,910 --> 00:11:29,240
色はありません。

174
00:11:29,470 --> 00:11:31,010
それは偽です。

175
00:11:31,270 --> 00:11:34,560
そして、何が起こるかは、ディスプレイをnoneにすることです。

176
00:11:34,820 --> 00:11:37,770
だから私はそれがどのようにリフレッシュするかをお見せしましょう。

177
00:11:38,230 --> 00:11:41,180
簡単にクリックすると、下の3つが消えます。

178
00:11:41,170 --> 00:11:43,720
簡単にクリックし続けると3つの新しい色が得られます。

179
00:11:43,780 --> 00:11:44,840
ゲームをしましょう。

180
00:11:44,840 --> 00:11:46,410
そこに行く。

181
00:11:46,450 --> 00:11:52,250
 

182
00:11:52,240 --> 00:11:59,530
 

183
00:11:59,530 --> 00:12:01,720
私たちは問題を抱えていますが、ハードをクリックすると、6つの四角形すべてを新しいバクトリム色に変更していますが、新しい背景を与える前に、底辺の3人がそれを回避することを隠すことはありません正方形に色を付ける。

184
00:12:01,720 --> 00:12:03,960
私は先に進み、それらを再現するつもりです。

185
00:12:03,970 --> 00:12:09,470
だから私はスタイルの表示がブロックに等しいと思った四角形になるだろう。

186
00:12:09,590 --> 00:12:11,320
そういうわけで、私たちはそれらを元に戻す方法です。

187
00:12:11,410 --> 00:12:13,140
そして、我々は6人全員にそれを行うつもりです。

188
00:12:13,150 --> 00:12:14,170
たいしたことじゃない。

189
00:12:14,200 --> 00:12:18,490
だから、もし彼らに背景色をつけたら、彼らは最初に目に見えるようにするつもりです。

190
00:12:19,340 --> 00:12:24,590
だから、もし我々がリフレッシュして、彼らが容易に行くなら、私たちは3つのゲームをする。

191
00:12:24,760 --> 00:12:26,160
私は難しいをクリックします。

192
00:12:26,380 --> 00:12:28,070
今我々は6人の発信者を得る。

193
00:12:28,070 --> 00:12:30,520
ゲームをしましょう。

194
00:12:30,520 --> 00:12:33,700
私たちは簡単にクリックして行き、3つに戻ります。

195
00:12:33,700 --> 00:12:34,280
大丈夫。

196
00:12:34,450 --> 00:12:37,390
だから、ここでたくさんのコードを整理しているのが分かります。

197
00:12:37,510 --> 00:12:39,480
以前はずっと長くなっていました。

198
00:12:39,480 --> 00:12:41,360
少なくとも3倍の長さに似ています。

199
00:12:41,380 --> 00:12:46,120
そして、2つの異なるクリックリスナーと今や私たちのコードは比較的汎用性があります。

200
00:12:46,120 --> 00:12:51,850
中程度の難易度のボタンを追加したい場合は、ここでこの行を変更して、ノータナンバーが四角になるようにします。

201
00:12:51,860 --> 00:12:54,040
 

202
00:12:54,040 --> 00:12:59,950
 

203
00:12:59,950 --> 00:13:06,380
 

204
00:13:06,670 --> 00:13:09,160
多分5つの四角形が必要な場合や、10の四角形を変更してリセットする必要がある場合は、リセットボタンをクリックしたときにリセット機能を使用してリセット機能を呼び出す必要があります。

205
00:13:09,430 --> 00:13:15,050
だから私たちがする必要があるのは、リセットボタンの代わりにすべてを置き換えることです。ちょうどそのようにリセットされたLisnerをクリックしてください。

206
00:13:15,040 --> 00:13:17,630
 

207
00:13:17,650 --> 00:13:19,500
だからこそ、私たちのコードを多く動かしています。

208
00:13:19,570 --> 00:13:22,650
私たちはちょうど10かそこらの行を取り除きました。

209
00:13:23,170 --> 00:13:26,280
だから括弧なしで保存し直しましょう。

210
00:13:26,600 --> 00:13:29,020
ブラウザに行き、それがまだ動作することを確認しましょう。

211
00:13:29,020 --> 00:13:31,580
だからゲームをしましょう。

212
00:13:31,850 --> 00:13:35,000
もう一度再生をクリックすると、正常にリセットされます。

213
00:13:35,320 --> 00:13:40,750
簡単に別のゲームをプレイしてみましょう。

214
00:13:40,750 --> 00:13:41,430
大丈夫。

215
00:13:41,530 --> 00:13:43,340
だから私たちはコードをかなり動かす。

216
00:13:43,380 --> 00:13:47,690
彼らはこれらの2つを取り除くつもりです