1
00:00:00,240 --> 00:00:01,080
お帰りなさい。

2
00:00:01,080 --> 00:00:06,360
このビデオでは、ゲームの難易度に影響を与える簡単で難しいボタンをここに追加することに焦点を当てます。

3
00:00:06,360 --> 00:00:07,350
 

4
00:00:07,350 --> 00:00:13,920
したがって、ページを上に読み込むと、すでにハードが選択されています。ここには6つの異なるボタンまたは6つの異なる正方形が表示されます。

5
00:00:13,920 --> 00:00:14,590
 

6
00:00:14,760 --> 00:00:18,610
そして、私は簡単にクリックすることができ、それは選択されたままです。

7
00:00:18,900 --> 00:00:21,180
そして私たちは3つの正方形から選ぶだけです。

8
00:00:21,270 --> 00:00:23,270
そして私は心に戻って行くことができます。

9
00:00:23,520 --> 00:00:26,860
まず、必要な2つのボタンを追加します。

10
00:00:27,000 --> 00:00:31,050
そこで私はHMOに入り、2つのボタンを追加します。

11
00:00:31,560 --> 00:00:33,800
最初に私たちは簡単に言うでしょう。

12
00:00:34,020 --> 00:00:37,470
第2のものは難しいと言い、リフレッシュします。

13
00:00:37,900 --> 00:00:38,440
OK。

14
00:00:38,520 --> 00:00:40,610
それは今のところよく見えます。

15
00:00:41,160 --> 00:00:44,030
私たちのスパンがまだスペースを占めていないことに気付くでしょう。

16
00:00:44,300 --> 00:00:46,020
そして、私はいくつかのテキストが表示されるのを見ます。

17
00:00:46,020 --> 00:00:51,600
 

18
00:00:51,600 --> 00:00:57,600
 

19
00:00:57,600 --> 00:01:01,900
それらのボタンを押して、後でスタイリングに焦点を当てますが、スタイリングの要素が1つあります。これは、ページが読み込まれたときに選択されるようにしたり、対応するボタンが青く保たれるように簡単に選択するときです。

20
00:01:02,160 --> 00:01:06,540
そして、私たちがやることは、クラスを使ってそのクラスをオンとオフにすることです。

21
00:01:06,540 --> 00:01:11,940
ここではクラスを定義するつもりですが、このスタイルのスタイリングよりもシンプルになりますが、ここでは色になるだけです。

22
00:01:11,940 --> 00:01:12,780
 

23
00:01:12,810 --> 00:01:18,390
だから私たちの背景色とクラスは、それが私たちがやっていることなので選択されたものになるでしょう。

24
00:01:18,720 --> 00:01:22,110
選択したボタンを選択したクラスに追加します。

25
00:01:22,440 --> 00:01:25,870
そして、それはちょうど始めるためにあなたに設定された背景を持っているつもりです。

26
00:01:26,280 --> 00:01:33,820
次に、ハードモードボタンクラスを選択したものに等しくするだけです。

27
00:01:34,500 --> 00:01:39,600
また、コードを更新すると、ハードが関与していることがわかります。

28
00:01:39,810 --> 00:01:44,540
それは恐ろしいですが、それは少なくとも私たちがハードモードにいることを示しています。

29
00:01:44,550 --> 00:01:49,980
だから私たちがやりたいことは、簡単なものをクリックするとスイッチを押すコードを追加して、心臓をクリックすると簡単な6つの色をクリックすると3つの色が表示されます。

30
00:01:49,980 --> 00:01:54,390
 

31
00:01:54,390 --> 00:01:55,070
 

32
00:01:55,350 --> 00:01:56,340
OK。

33
00:01:56,610 --> 00:01:58,580
ここから始めましょう。

34
00:01:58,650 --> 00:02:03,750
これらのボタンを実際に動作させるには、javascriptでそれらのボタンを選択し、いくつかのクイックリスナーを用意し、それぞれをクリックしてコードを実行する必要があります。

35
00:02:03,750 --> 00:02:08,460
 

36
00:02:08,520 --> 00:02:14,490
だから選択を簡単にしましょう。それぞれのIDを簡単に入力することから始めます。

37
00:02:14,590 --> 00:02:22,650
DTN、ハードETNの順に表示されます。ここに赤旗が表示されている場合や、あまりにも多くのアイデアを使用していると思われる場合は、これを変更します。

38
00:02:22,650 --> 00:02:24,230
 

39
00:02:24,330 --> 00:02:26,660
これを数分でリファクタリングします。

40
00:02:26,760 --> 00:02:28,630
しかし、我々は2つの異なるIDから始めるつもりです。

41
00:02:28,650 --> 00:02:30,500
簡単ボタンハードボタン。

42
00:02:30,660 --> 00:02:32,570
私たちのjavascriptに行き、それらを選択してください。

43
00:02:32,580 --> 00:02:40,100
だから、var easy ETNはOctaを使った文書のdocクエリーセレクタと同じです。

44
00:02:40,410 --> 00:02:42,430
簡単なETN。

45
00:02:42,600 --> 00:02:45,210
私たちが物事を同じものにすることを確かめてください。

46
00:02:45,270 --> 00:02:46,270
そこに行く。

47
00:02:46,650 --> 00:02:54,240
そして、同じことを頑張って、あなたがそれを崇高に捉えたのかどうかは分かりません。

48
00:02:54,240 --> 00:02:59,940
あなたが簡単な単語を選択し、あなたがKamandiを押すと、それは自動的に次のインスタンスを選択し、それらをすべて選択することができますが、私はこれらの2つがほしいと思うので、代わりに難しいとタイプします。

49
00:03:00,000 --> 00:03:05,040
 

50
00:03:05,070 --> 00:03:06,140
 

51
00:03:06,210 --> 00:03:09,670
だから私たちは2つのボタンを持っていますし、このようなことをすることができます。

52
00:03:09,960 --> 00:03:13,690
簡単なPTENイベントリスナーを追加します。

53
00:03:13,800 --> 00:03:23,950
クリックすると、簡単なボタンがこのように終了したという警告だけが表示されます。

54
00:03:24,600 --> 00:03:31,170
簡単なボタンをクリックして警告し、それが機能することを確認してください。

55
00:03:31,200 --> 00:03:38,340
 

56
00:03:40,800 --> 00:03:47,640
Easyボタンをクリックすると、ハードボタンが表示され、ハードボタンがクリックされたと表示されます。

57
00:03:47,640 --> 00:03:49,050
 

58
00:03:49,410 --> 00:03:56,250
だから、それを行うのではなく、どのクラスが選択されたかを反映するために、選択されたクラスをクラスにする作業をしましょう。

59
00:03:56,250 --> 00:03:57,390
 

60
00:03:57,810 --> 00:04:02,020
だから私たちが簡単なボタンをクリックすると、私たちがしたいのは簡単なボタンだけです。

61
00:04:02,070 --> 00:04:11,120
Docクラスのリストが追加されました。私たちが今リフレッシュしたら、簡単にクリックします。

62
00:04:11,420 --> 00:04:12,920
それは選択されたクラスを持っています。

63
00:04:12,940 --> 00:04:19,630
簡単ですが、問題はまだハードボタンに残っているので、簡単に修正できます。

64
00:04:19,650 --> 00:04:29,460
ハードなボタンを持っていて、クロスリストのドットを削除したいのですが、簡単にクリックすればハードモードが消えてしまいます。

65
00:04:29,460 --> 00:04:30,520
 

66
00:04:30,660 --> 00:04:36,990
 

67
00:04:36,990 --> 00:04:46,740
しかし、ハードをクリックしてもまだそのロジックがないので、このコードをコピーするだけで問題を解決できます。選択された簡単なボタンクラスリストを削除して、クラスを選択しなくて済むハードボタンが追加されます。

68
00:04:46,740 --> 00:04:47,630
 

69
00:04:48,160 --> 00:04:49,970
OKを試してみましょう。

70
00:04:50,890 --> 00:04:51,630
大丈夫。

71
00:04:51,630 --> 00:04:57,450
そこで、私たちは6つの要素を持っているので、現在選択されているものを示している2つのボタンと、リフレッシュとハードが自動的に選択されるという簡単な部分があります。

72
00:04:57,680 --> 00:05:02,930
 

73
00:05:02,940 --> 00:05:09,210
次に、これらのボタンのスタイルだけでなく、3つの要素または6つの正方形を表示するために、難易度を実際に変更するロジックを追加する必要があります。

74
00:05:09,210 --> 00:05:12,730
 

75
00:05:12,930 --> 00:05:15,840
だから私たちが始める前にこれを行う必要があります。

76
00:05:15,870 --> 00:05:19,110
どのように動作するかを見てみましょう。

77
00:05:19,110 --> 00:05:26,420
 

78
00:05:26,460 --> 00:05:33,450
 

79
00:05:33,450 --> 00:05:36,510
だから私はリフレッシュして、私は新しい色を得る簡単な通知をクリックし、私はここで6色を持っているリスクがあるため、ここで選択された色がこれら3つの1つかもしれないので、それらの3つは削除されます。

80
00:05:36,510 --> 00:05:39,400
だから、それはかなりのゲームを破るバグかもしれません。

81
00:05:39,600 --> 00:05:42,860
したがって、それに対処するよりも、3つの新しい色を選択するだけです。

82
00:05:42,990 --> 00:05:45,870
だからプロセスはそれをリフレッシュしています。

83
00:05:45,930 --> 00:05:51,840
つまり、簡単なボタンをクリックすると、3つの新しい色を生成することになります。色の配列は、3つの色から1つの色を選択します。

84
00:05:51,850 --> 00:05:54,640
 

85
00:05:54,750 --> 00:05:57,490
選択した色で表示されるように更新します。

86
00:05:57,510 --> 00:05:59,450
ここでは3つの広場を更新します。

87
00:05:59,640 --> 00:06:05,880
重要なのは、3つの他の四角形も隠すので、displayをnoneに設定して非表示にするだけです。

88
00:06:05,880 --> 00:06:08,610
 

89
00:06:09,120 --> 00:06:11,010
そして、同じことが難しくなります。

90
00:06:11,010 --> 00:06:13,930
colors配列に6つの新しい色を生成します。

91
00:06:13,950 --> 00:06:16,080
私たちは1つを選んで私たちの選んだピックにします。

92
00:06:16,230 --> 00:06:17,850
それをここに表示します。

93
00:06:18,000 --> 00:06:23,740
次に、3つの正方形を下に表示し、それぞれの色を設定します。

94
00:06:24,270 --> 00:06:24,730
OK。

95
00:06:24,810 --> 00:06:26,570
だから今これに取り組んでみましょう。

96
00:06:26,820 --> 00:06:31,170
まず、簡単ボタンをクリックするとそこから始めましょう。

97
00:06:31,380 --> 00:06:39,520
今度は色がランダムな色を生成するように新しい色を生成したいと思っています3。

98
00:06:40,410 --> 00:06:47,370
そして、いったんそれが完了すると、新しいピックされたカラーを選びたいので、ピックされたカラーはそれと同じようにピックカラーに等しくなります。

99
00:06:47,880 --> 00:06:50,820
 

100
00:06:50,820 --> 00:06:56,490
だから私たちの色と私たちの選んだ色を持っていれば、新しい絵の色を表示するためにここに表示を変更することから始めることができます。

101
00:06:56,490 --> 00:06:58,400
 

102
00:06:59,070 --> 00:07:06,050
これは、カラー表示のテキストコンテンツが選択された色に等しいと言うほど簡単です。

103
00:07:06,360 --> 00:07:11,410
私たちがリフレッシュしたら、ここにいくつかの新しい色をつけてみましょう。

104
00:07:11,580 --> 00:07:17,520
色が変わって舞台裏で変わる前にあなたが言いましたように簡単にクリックすると、同様に色の配列も変わります。

105
00:07:17,520 --> 00:07:19,630
 

106
00:07:19,650 --> 00:07:25,100
それでは、どのような色が今であるかを見てみましょう。次に、簡単モードをクリックして、色が何であるかを見ていきます。

107
00:07:25,110 --> 00:07:27,490
 

108
00:07:27,870 --> 00:07:30,990
そしてそれはまた、色を選んだが異なっています。

109
00:07:30,990 --> 00:07:37,650
では、簡単モードをクリックしたときに3つの下位divを隠す方法や、上位3つを隠す方法について説明します。

110
00:07:37,650 --> 00:07:38,190
 

111
00:07:38,190 --> 00:07:38,730
それは問題ではありません。

112
00:07:38,730 --> 00:07:43,260
しかし私は、ループ3を実行し、下の3つの表示プロパティをnoneに設定することによって、下の3つを実行します。

113
00:07:43,260 --> 00:07:46,360
 

114
00:07:46,560 --> 00:07:48,440
だから私はそれがどのように動作するかを見せてあげましょう

115
00:07:48,510 --> 00:07:49,870
私はちょうどそれらの1つを選ぶつもりです。

116
00:07:49,980 --> 00:08:01,850
ですから、すべての四角形または四角形のドキュメントクエリーセレクタを実行し、5番目のクエリーセレクタを使用してみましょう。

117
00:08:02,250 --> 00:08:11,320
実際には5番目のインデックスを持つ6番目のスタイルを設定し、そのスタイル表示をnoneに設定します。

118
00:08:12,150 --> 00:08:13,760
そしてあなたはそれが消えるのを見るでしょう。

119
00:08:13,770 --> 00:08:19,000
そして、私がハードモードをクリックすると私はそれが戻ってくるようにしたいと思うなら、私はちょうどスタイルを言う必要があります。

120
00:08:19,050 --> 00:08:22,160
表示はロックと等しくなります。

121
00:08:22,500 --> 00:08:23,280
大丈夫。

122
00:08:23,490 --> 00:08:28,980
ですから、これを実現する方法でコード内に実装しましょう。最初は6つすべてをループすることです。

123
00:08:29,250 --> 00:08:30,980
 

124
00:08:31,170 --> 00:08:34,820
最初の3人は新しい色をつけます。

125
00:08:35,040 --> 00:08:37,380
下の3つは隠すつもりです。

126
00:08:37,410 --> 00:08:40,380
そのために2つのループを持たせるのではなく、すぐにやります。

127
00:08:40,560 --> 00:08:43,980
だからvar Iはゼロに等しい。

128
00:08:43,980 --> 00:08:48,140
私はちょうど長さを四角形未満です。

129
00:08:48,300 --> 00:08:54,390
さらに、色には3つのアイテムがあるという事実を利用します。

130
00:08:54,390 --> 00:08:58,000
だから私たちは色Iならこのようなことをするつもりです。

131
00:08:58,440 --> 00:09:02,350
もし次の色があれば、これは最初の3つで起こります。

132
00:09:02,610 --> 00:09:11,020
私たちは背景が色と同じになるように四角形を描きます。

133
00:09:12,660 --> 00:09:18,540
したがって、最初の3つの場合、色は3つのアイテムしかないので、すべての四角形をループし、そのインデックスに色があるかどうかを確認します。

134
00:09:18,540 --> 00:09:22,740
 

135
00:09:22,770 --> 00:09:27,320
そしてもしあれば、我々は最初の3つの色を変えるつもりです。

136
00:09:27,390 --> 00:09:29,160
だから、それが確実に動作するようにしましょう。

137
00:09:29,160 --> 00:09:33,990
私は簡単にクリックすると、トップ3だけが変化していることがわかります。

138
00:09:33,990 --> 00:09:35,470
だから我々は近くにいる。

139
00:09:35,520 --> 00:09:38,550
私たちが今したいのは、下の三つを隠すことだけです。

140
00:09:39,000 --> 00:09:41,040
それで、他の人と一緒にやっていきます。

141
00:09:42,370 --> 00:09:48,970
正方形私は表示がnoneに等しいスタイルです。

142
00:09:49,600 --> 00:09:56,770
私が簡単モードをクリックすると、それをフルスクリーンでリフレッシュして作成すると、下の3つが失われ、上位3つの色が変化していることがわかります。

143
00:09:56,770 --> 00:10:00,010
 

144
00:10:00,640 --> 00:10:03,010
これがどれであるか把握してみましょう。

145
00:10:03,050 --> 00:10:08,850
百三十三の赤125緑と青の少し。

146
00:10:08,950 --> 00:10:10,190
そこに行く。

147
00:10:10,300 --> 00:10:13,200
もう一度試してみてください。

148
00:10:13,210 --> 00:10:19,030
私はこれらのいくつかをリフレッシュし、簡単モードをクリックするので、小さな問題が1つあります。

149
00:10:19,030 --> 00:10:21,010
ここでは3色しか生成していません。

150
00:10:21,140 --> 00:10:26,600
しかし、新しい色のボタンをクリックすると、今はどのような色になっているかがわかります。

151
00:10:26,740 --> 00:10:27,640
それは3つの項目です。

152
00:10:27,760 --> 00:10:32,330
私は新しい色をクリックして、次に色を見る。

153
00:10:33,070 --> 00:10:38,340
それは実際には6つのアイテムであり、それは私たちがどのモードにいるのかを把握していないからです。

154
00:10:38,350 --> 00:10:40,440
そのコードがリセットボタンに表示されます。

155
00:10:40,510 --> 00:10:44,520
私たちは色がランダムな色を生成することと等しいと言っています。

156
00:10:44,680 --> 00:10:46,370
最終的にはそれを修正する必要があります。

157
00:10:46,600 --> 00:10:52,090
しかし、それを行う前に、私たちのハードボタンを手に入れて、6つの四角形に戻し、それぞれに独自の色をつけてそれを行うようにしましょう。

158
00:10:52,090 --> 00:10:54,700
 

159
00:10:54,850 --> 00:11:00,000
私はちょうどこのコードのいくつかを取って、ここには常に悪い兆候であるそれを複製するつもりです。

160
00:11:00,490 --> 00:11:03,250
それで、私たちはこれを少しだけリファクタリングするつもりです。

161
00:11:03,280 --> 00:11:04,870
だから最初にやりたいこと。

162
00:11:04,870 --> 00:11:09,380
ハード・ボタン・イベント・リスナーの色にすべてコピーするだけです。

163
00:11:09,400 --> 00:11:16,000
それは同じ色の表示テキストの内容が同じである6色の色を選ぶことになるだろう。

164
00:11:16,000 --> 00:11:18,880
そして、私たちはこのループのすべてをループします。

165
00:11:18,880 --> 00:11:20,590
我々は2つの異なることをする必要があります。

166
00:11:20,590 --> 00:11:24,200
1つ目は、すべての四角に新しい色を割り当てることです。

167
00:11:24,460 --> 00:11:29,980
しかし、我々は潜在的に3つが底に隠れていないことを確認する必要もあります。

168
00:11:30,430 --> 00:11:36,910
だから私たちは今、ifステートメントを取り除くつもりで、すべての四角形を背景色にして色を付けることにします。

169
00:11:36,910 --> 00:11:38,990
 

170
00:11:39,430 --> 00:11:43,880
すべての四角形にはブロックが表示されます。

171
00:11:44,230 --> 00:11:49,960
これは技術的に最後の3つだけが必要で、表示ブロックになるようにすべてをリセットしているので、これは少し無駄です。

172
00:11:49,990 --> 00:11:51,710
 

173
00:11:51,850 --> 00:11:54,940
しかし、それは私たちが後で焦点を当てることができる本当に小さなことです。

174
00:11:55,000 --> 00:12:02,440
ですから、この作業がリフレッシュされていれば、行36に構文エラーがあることがわかります。

175
00:12:02,440 --> 00:12:03,150
 

176
00:12:03,670 --> 00:12:05,600
そしてここに余分な中括弧があります。

177
00:12:05,710 --> 00:12:10,210
だから今すぐ保存してリフレッシュすると、いつものように6色になります。

178
00:12:10,210 --> 00:12:12,190
私が簡単にクリックすると、3つが得られます。

179
00:12:12,310 --> 00:12:15,260
私が激しくクリックすると、今度は6に戻ります。

180
00:12:15,370 --> 00:12:18,780
私はここに新しい色をつけて、それが働いていることを確かめましょう。

181
00:12:18,850 --> 00:12:23,280
ハードモードになると簡単にハードなので簡単です。

182
00:12:23,380 --> 00:12:25,510
新しい色をもう一度クリックしてみましょう。

183
00:12:25,570 --> 00:12:29,570
簡単に戻って、簡単にハードに戻ってください。

184
00:12:29,650 --> 00:12:29,930
大丈夫。

185
00:12:29,920 --> 00:12:32,320
そして、これを再生し、それが動作するかどうかを見てみましょう。

186
00:12:32,320 --> 00:12:37,410
だから、ピックカラーは196 170 57です。

187
00:12:37,450 --> 00:12:42,240
だから、たくさんの青と緑の多くを読んでいる。

188
00:12:42,460 --> 00:12:44,970
だからそれは赤と緑の多くは黄色です。

189
00:12:45,070 --> 00:12:46,650
だから、それはその1つまたはその1つになることはありません。

190
00:12:46,660 --> 00:12:52,120
これは本当に素早くこの1つになるだろうし、うまく動いているようだ。

191
00:12:52,380 --> 00:12:55,880
私が簡単にクリックすると3色に戻ります。

192
00:12:56,050 --> 00:13:01,750
私たちが直面している最も重大な問題は、私がイージーモードになっているときに、私は再び3つではなく6つの色を生成し、6つのうちランダムな色を選んで表示されないそれを修正するには問題がある。

193
00:13:01,750 --> 00:13:07,960
 

194
00:13:07,960 --> 00:13:11,350
 

195
00:13:11,350 --> 00:13:15,730
私たちがしなければならないことは、私たちが行っているモードを追跡する変数を持つことだけです。

196
00:13:15,730 --> 00:13:19,650
簡単またはハードまたは3または6の正方形の数。

197
00:13:19,840 --> 00:13:21,530
だからここでそれをやる。

198
00:13:21,640 --> 00:13:29,620
 

199
00:13:29,880 --> 00:13:39,220
私たちは、四角形の数と呼ばれる変数を持っていて、それは6から始まり、ここでそれを宣言して、色が等しく、numberのランダムな色を生成し、それを正方形または正方形の数にしましょうと言うでしょう。

200
00:13:39,490 --> 00:13:40,180
 

201
00:13:40,240 --> 00:13:41,080
 

202
00:13:44,170 --> 00:13:47,020
それはちょっと簡単ですし、保存してください。

203
00:13:47,140 --> 00:13:50,120
そして、それをいくつかの場所で置き換える必要があります。

204
00:13:50,170 --> 00:13:57,970
だから私たちが簡単モードをクリックすると、麻痺の四角形を3にして、四角形のないランダムな色を生成します。

205
00:13:57,970 --> 00:14:00,040
 

206
00:14:00,430 --> 00:14:09,010
 

207
00:14:09,100 --> 00:14:17,290
 

208
00:14:17,290 --> 00:14:18,850
また、ハードボタンをクリックすると、いくつかの四角形が6になりますので、麻痺した四角形は6になり、次にランダムな色の四角形が生成されます。その後、リセットボタンをクリックすると、ここにいくつかの場所があります。

209
00:14:18,850 --> 00:14:24,540
私たちはそこにNahmの正方形である正しい数の色を生成したいと思います。

210
00:14:24,580 --> 00:14:28,970
それで、私たちが戻ってリフレッシュするなら、それは私たちのためにそれを世話するべきです。

211
00:14:29,530 --> 00:14:33,080
私たちは簡単なモードに行き、このモードで勝利しましょう。

212
00:14:33,190 --> 00:14:35,280
だから、ほとんど赤い青です。

213
00:14:35,320 --> 00:14:37,350
これじゃない。

214
00:14:37,660 --> 00:14:38,740
それじゃない。

215
00:14:38,740 --> 00:14:39,830
そこに行く。

216
00:14:39,880 --> 00:14:47,140
そして私が再び演奏をクリックすると、色を入力するときに3色しか表示されないようにしましょう。

217
00:14:47,140 --> 00:14:55,240
色を選んだ色を見たら、色の配列の内側にあることがわかります。

218
00:14:55,450 --> 00:14:56,880
だから私たちはこれ以上心配する必要はありません。

219
00:14:57,040 --> 00:14:57,970
私たちのロジックは今働きます