1
00:00:00,650 --> 00:00:02,670
さて、このビデオに戻ってきます。

2
00:00:02,670 --> 00:00:05,040
私たちはいくつかの新機能について研究します。

3
00:00:05,040 --> 00:00:08,190
最初のものは、私がゲームに勝つときです。

4
00:00:08,460 --> 00:00:09,410
それは私に正しいと伝えます。

5
00:00:09,630 --> 00:00:15,440
そして、私はまだ新しい色を得るために、また私がまだ勝っていなければ、再びプレーをクリックすることができます。

6
00:00:15,530 --> 00:00:19,460
しかし、何らかの理由で私が持っている色が好きではないので、新しい色が欲しいです。

7
00:00:19,680 --> 00:00:21,750
その新しい色のボタンをクリックすることもできます。

8
00:00:21,930 --> 00:00:27,300
 

9
00:00:27,300 --> 00:00:32,770
だから、基本的には、新しい色を選んでゲームをリセットするボタンが必要です.6色のランダムな色から新しいランダムな色を選んでください。最後は簡単で簡単なモードに戻ります。

10
00:00:32,940 --> 00:00:35,870
このボタンは同じことをします。

11
00:00:36,040 --> 00:00:42,240
しかし、ゲームに勝った場合はテキストが変わり、再びプレイしたいのかと尋ねられたので、もう一度プレイをクリックすればリセットされます。

12
00:00:42,240 --> 00:00:44,150
 

13
00:00:44,220 --> 00:00:48,540
しかし、新しい色をクリックしてリセットすることもできます。

14
00:00:48,570 --> 00:00:49,840
それが我々が焦点を当てるものです。

15
00:00:50,010 --> 00:00:55,590
そして、私は先に進んでボタンを追加し、そのストライプを追加して、ストライプに新しい色や再生のためのこのボタンが含まれるようにします。

16
00:00:55,590 --> 00:01:00,290
 

17
00:01:00,870 --> 00:01:02,890
それには、すでに持っているメッセージが含まれています。

18
00:01:03,060 --> 00:01:04,970
そして、私たちが後でやる2つのボタン。

19
00:01:05,250 --> 00:01:11,590
だから私たちが最初にやる必要があるのは、すでにdivを持っているだけです。ストライプのIDを与えてから、それを使うことができます。

20
00:01:12,750 --> 00:01:14,240
 

21
00:01:14,550 --> 00:01:19,560
そして、私たちはすでに正しいものを表示するか、もう一度やり直すように私たちのスパンを内部に持っています。

22
00:01:19,590 --> 00:01:27,990
ここでは、ボタンを追加するだけで、このボタンは新しい色を言うことから始まり、新しい色を保存することができます。

23
00:01:28,780 --> 00:01:29,820
 

24
00:01:30,160 --> 00:01:33,140
それはあなたが期待するほど悪く見えます。

25
00:01:33,330 --> 00:01:39,330
白い背景色を追加して、このdivにすべてを配置しましょう。つまり、divはストライプです。

26
00:01:39,330 --> 00:01:40,210
 

27
00:01:40,590 --> 00:01:45,220
私たちのC Sに行きましょう。私たちはIDであるStrypeを選択します。

28
00:01:45,360 --> 00:01:48,970
だから私たちは後書きでストライプを使う必要があります。

29
00:01:49,260 --> 00:01:54,580
背景色を白く設定します。

30
00:01:54,660 --> 00:02:02,460
高さを30ピクセルに設定し、高さの高いdivが比較的背の高いdivで、テキストをcenterに設定します。

31
00:02:02,460 --> 00:02:09,030
 

32
00:02:09,300 --> 00:02:13,330
そして、今私がリフレッシュすると、白いdivがすべての方法を渡る。

33
00:02:13,350 --> 00:02:15,220
それはそれより少し高めです。

34
00:02:15,240 --> 00:02:17,230
私たちはここに何かを入れるボタンを持っています。

35
00:02:17,400 --> 00:02:23,640
私が勝ったり、失ったり、間違った答えを得ると、あなたはそれを見ることができないスパンがあります。

36
00:02:23,640 --> 00:02:27,290
そして、そのスパンからのテキストが白であるからです。

37
00:02:28,380 --> 00:02:34,950
ですから、あなたがやっていることについて考えているのは、私たちのストライプのdivに入り、テキストの色は黒でなければならないと言っていますが、残念ながらそれはうまくいきません。

38
00:02:34,950 --> 00:02:38,690
 

39
00:02:38,880 --> 00:02:45,390
 

40
00:02:45,390 --> 00:02:52,110
そして、これは特異性の問題です。なぜなら、この行では、ストライプのアイデアを持つものの中のすべてが黒のテキストカラーの黒でなければならないと言いますから、あなたはOKだと思います。私たちの初期のCSSの特異性の講義とIDは非常に具体的です。

41
00:02:52,170 --> 00:02:58,890
 

42
00:02:58,890 --> 00:02:59,710
 

43
00:02:59,790 --> 00:03:05,440
これは、IDストライプを使ってdivの色を黒に設定していますが、問題です。

44
00:03:05,970 --> 00:03:13,080
 

45
00:03:13,140 --> 00:03:17,820
 

46
00:03:17,820 --> 00:03:20,630
そして、ここではすべてのスパンを設定しているので、色が白であることがわかります。これを白に設定すると、より具体的になります。なぜなら、実際には親ではなく要素自体をターゲットにしていて色を継承しているからです。

47
00:03:21,090 --> 00:03:22,570
だから我々はいくつかの選択肢がある。

48
00:03:22,590 --> 00:03:25,960
私がやることは、実際には今のところこれを取り除くことです。

49
00:03:26,040 --> 00:03:31,710
 

50
00:03:31,710 --> 00:03:36,720
 

51
00:03:37,050 --> 00:03:42,960
私たちはもう色を白にするつもりはなく、リフレッシュすることができます。色が変わらないことはわかります。たとえすべてのスパンが白で、それはH1の内部にあり、H1テキストの色を継承しているためです。

52
00:03:42,990 --> 00:03:45,590
このスパンはここでも黒いのと同じように。

53
00:03:45,600 --> 00:03:51,720
それはあなたがここに黒色で見ることができるそれの周りのストライプdivから黒のテキストの色またはちょうど規則的な色の黒を継承しました。

54
00:03:51,720 --> 00:03:55,160
 

55
00:03:55,410 --> 00:03:56,770
そして、それは我々のストライクされたものです。

56
00:03:57,060 --> 00:03:57,660
OK。

57
00:03:57,810 --> 00:04:06,720
では、このボタンを使ってゲームをリセットし、イベントリスナーを追加する必要があります。

58
00:04:06,870 --> 00:04:09,750
それを行う前に、そのボタンを選択する必要があります。

59
00:04:09,960 --> 00:04:18,000
ここでボタンとIDを指定します。ここでは、IDはリセットと同じにして、Javascriptではなくリセットボタンを選択します。

60
00:04:18,000 --> 00:04:21,000
 

61
00:04:21,000 --> 00:04:31,980
したがって、var resetボタンは、クエリーセレクタがオクターブまたはリセットされたドキュメントと同じです。

62
00:04:31,980 --> 00:04:37,120
そして、いつものように簡単なテストイベントリスナーを追加したいと思います。

63
00:04:37,140 --> 00:04:40,680
リセットボタンはイベントリスナーを追加します。

64
00:04:40,860 --> 00:04:51,990
クリックして、私たちが行うすべてをクリックすると、それがリフレッシュされるような簡単なアラートのクイックリセットボタンができます。

65
00:04:52,070 --> 00:04:52,820
 

66
00:04:52,970 --> 00:04:57,590
私がこれをクリックすると、私は警告を受け取り、それは私たちが行くのが良いことを意味します。

67
00:04:57,590 --> 00:05:01,030
次のステップでは、実際にロジックをリセットしてリセットすることができます。

68
00:05:01,250 --> 00:05:03,890
だから私たちがする必要があるのは、擬似コードを書くことです。

69
00:05:03,890 --> 00:05:10,030
そのボタンをクリックすると、新しい色をすべて生成する必要があります。

70
00:05:10,040 --> 00:05:20,750
配列から新しいランダムな色を選択する必要があります。次に、ページ上の四角形の色を変更する必要があります。

71
00:05:20,750 --> 00:05:22,030
 

72
00:05:22,280 --> 00:05:28,310
したがって、すべての新しい色を生成するためには、実際にその関数を既存の色にすることが実際にあります。

73
00:05:29,030 --> 00:05:33,940
つまり、色は6色のランダムな色を生成するようになりました。

74
00:05:34,580 --> 00:05:41,270
そして、私たちは新しいランダムな色を選ぶでしょう、そして、色が今私たちが定義したメソッドまたは関数を選択するのと同じ色を選ぶようにします。

75
00:05:41,270 --> 00:05:42,860
 

76
00:05:42,860 --> 00:05:48,890
私たちが実際にやるべきもう一つのことは、新しい表示色に合わせてこの表示色を変更することです。

77
00:05:48,890 --> 00:05:49,540
 

78
00:05:49,850 --> 00:05:52,040
 

79
00:05:55,250 --> 00:06:01,090
そこで、色の表示を変更して、選択した色に合わせて、単純なものにするようにします。

80
00:06:01,160 --> 00:06:08,870
 

81
00:06:12,890 --> 00:06:21,890
私たちが行う必要があるのは、カラー表示のドットテキストの内容が選択された色と同じです。ページを更新して新しい色をクリックしようとすると、6つの新しい色が生成されます。

82
00:06:21,890 --> 00:06:23,110
 

83
00:06:23,120 --> 00:06:25,400
私たちはそのコードを持っていないので、まだ見ていません。

84
00:06:25,580 --> 00:06:30,750
そして、それらのうちの1つを選んだ色としてピックしてから、ここで見ているものをピクト色に合わせて変更します。

85
00:06:30,770 --> 00:06:31,410
 

86
00:06:31,730 --> 00:06:36,220
それで、シーンの裏側に6つのランダムな色があります。

87
00:06:36,230 --> 00:06:42,230
最後の部分は、これらの6つの新しい色をページに反映させることです。

88
00:06:42,260 --> 00:06:49,070
ここでは、すべての四角形をループしており、色を背景にした四角形のスタイルを変更しています。

89
00:06:49,460 --> 00:06:50,440
 

90
00:06:50,450 --> 00:06:56,060
私はここでそのすべてを複製することから始めるつもりです。私たちはこれをリファクタリングします。

91
00:06:56,350 --> 00:06:58,340
しかし、ここにすべてを入れ始める。

92
00:06:58,370 --> 00:07:07,170
それで、すべての四角形の四角形をループしてIプラスを外に出すと、私たちがする必要があるのは、背景が色と同じになるように四角形を描くことだけです。

93
00:07:07,450 --> 00:07:12,600
 

94
00:07:13,020 --> 00:07:15,820
私は救います。

95
00:07:16,070 --> 00:07:21,660
リフレッシュして新しい色をクリックすると、60個のランダムな色が生成されます。

96
00:07:21,740 --> 00:07:22,820
それは1つを選ぶ。

97
00:07:22,820 --> 00:07:29,090
画像の色が反映されるように表示が更新され、6つの四角形すべてが新しい6色に一致するように変更されます。

98
00:07:29,090 --> 00:07:30,360
 

99
00:07:30,710 --> 00:07:34,730
だから、それを試して、私たちの以前の論理が同様に保持されているかどうかを見てみましょう。

100
00:07:35,240 --> 00:07:35,850
OK。

101
00:07:36,290 --> 00:07:39,130
だから、これはまともな量の赤です。

102
00:07:39,140 --> 00:07:41,460
非常に緑色で、まともな量の青色です。

103
00:07:41,840 --> 00:07:45,280
私たちが正しいとは思わないものをクリックしてみましょう。

104
00:07:46,160 --> 00:07:48,880
そして今、そのひとりを召しに行きましょう。

105
00:07:49,070 --> 00:07:50,940
だから、少し赤い青のように見えます。

106
00:07:50,960 --> 00:07:56,510
だから私はこれを推測するつもりだし、我々は正しいとそれはまだうまく動作しているように見えます。

107
00:07:56,540 --> 00:07:58,470
素早く新しい色を再現。

108
00:07:58,610 --> 00:08:00,320
我々はこれをリセットしたい。

109
00:08:00,320 --> 00:08:01,960
それは本当にマイナーな化粧品です。

110
00:08:02,030 --> 00:08:08,470
しかし、新しい色をクリックすると、黒色または暗い灰色に戻るように、ここで表示をリセットする必要があります。

111
00:08:08,510 --> 00:08:11,000
 

112
00:08:11,000 --> 00:08:16,670
私たちがしたいことのもう一つは、ここで見ることができるように、私たちはそれが再びプレーを言うことを望むとき、私はここで勝つでしょう。

113
00:08:17,030 --> 00:08:18,480
 

114
00:08:18,530 --> 00:08:20,350
これは緑が多いです。

115
00:08:20,540 --> 00:08:24,980
私は勝ち、それは私にもう一度遊ぶことを指示し、それは同じことをする。

116
00:08:24,980 --> 00:08:29,260
機能的には、それは本当に私たちと異なるテキストだけではありません。

117
00:08:29,300 --> 00:08:31,060
だからそれは簡単です。

118
00:08:31,100 --> 00:08:35,150
私たちがする必要があることは、コードがどこに勝つかをチェックすることです。

119
00:08:35,180 --> 00:08:36,240
それがここにあります。

120
00:08:36,620 --> 00:08:39,500
そして、そのボタンのテキスト内容を変更したいだけです。

121
00:08:39,740 --> 00:08:41,820
ボタンはリセットボタンと呼ばれていました。

122
00:08:41,930 --> 00:08:51,740
それで、テキストの内容が再び同じ色で表示されるようにリセットボタンを押すと、新しい色が表示されます。

123
00:08:52,790 --> 00:08:54,560
さあ、これを試してみましょう。

124
00:08:54,740 --> 00:08:58,750
ですから、これは赤が多く、緑が多く、青が少しあります。

125
00:08:58,790 --> 00:09:02,070
だから、たくさんの赤と多くの緑が私たちに黄色を与えます。

126
00:09:02,210 --> 00:09:04,100
だから、それらのいくつかを絞ってみましょう。

127
00:09:04,100 --> 00:09:08,180
そして少し青色が明るく明るくなります。

128
00:09:08,480 --> 00:09:13,590
だから、このようなもの、あるいはこの1つを試してみると、それは正しいとは言えません。

129
00:09:13,880 --> 00:09:17,230
これが私たちの答えです。

130
00:09:17,300 --> 00:09:20,120
そして本当の素早く、まったく同じことをします。

131
00:09:20,180 --> 00:09:23,570
私が言及した最後のことは、背景色を元に戻すことです。

132
00:09:23,570 --> 00:09:28,430
だから、リセットボタンの最後でこれを行うことができます。

133
00:09:28,520 --> 00:09:30,950
そのH-1を選択するだけです。

134
00:09:31,200 --> 00:09:34,610
ここで選択した1つの点です。

135
00:09:34,670 --> 00:09:37,090
それはダイヤルアップの背景です。

136
00:09:37,160 --> 00:09:40,600
UPSは同等です。

137
00:09:40,640 --> 00:09:47,600
そして、それは16進数です2 3 2 3 2

138
00:09:47,900 --> 00:09:49,560
3これはあなたが見ることができることを忘れている場合は、ボディの背景色を見てみましょう。

139
00:09:49,800 --> 00:09:55,410
または、間違った色を選んだ場合は、色を消すときにここに設定します。

140
00:09:55,580 --> 00:09:58,680
私たちは背景色をボディと同じに変更します。

141
00:09:59,150 --> 00:10:02,130
新しい色をリフレッシュしましょう。

142
00:10:02,330 --> 00:10:03,820
さあ、勝ちましょう。

143
00:10:04,010 --> 00:10:10,760
ちょうどただランダムに時間のために我々は再びプレイをクリックし、それは黒の背景に戻る。

144
00:10:10,760 --> 00:10:11,300
 

145
00:10:11,310 --> 00:10:13,060
または暗い灰色の背景。

146
00:10:13,570 --> 00:10:15,530
これですべてがこの動画のものです

147
00:10:15,530 --> 00:10:19,790
次に、簡単モードとハードモードを選択するためのボタンを追加します。

148
00:10:19,820 --> 00:10:22,590
そして、最後に、私たちは素敵に見えるようにスタイルを変えようとしています