1
00:00:00,180 --> 00:00:01,330
よろしくお願いします。

2
00:00:01,530 --> 00:00:03,330
先に進んで始めましょう。

3
00:00:03,330 --> 00:00:05,160
RGはゲームアプリケーションを推測しています。

4
00:00:05,220 --> 00:00:10,270
私は最初にh timファイルを作成し、C Sを作成してこの単純なグリッドを作成します。

5
00:00:10,290 --> 00:00:14,460
 

6
00:00:14,820 --> 00:00:19,980
 

7
00:00:19,980 --> 00:00:25,110
 

8
00:00:25,110 --> 00:00:26,340
だから、我々は背景色とフォントでそれをスタイルするつもりはなく、この小さなものは今ここでは6つの四角で単純に始まり、それらの間に少しの間隔があるかもしれないが、丸みのあるコーナーを追加するようなことをやってみましょう。しかし、アニメーションを追加するつもりはありません。

9
00:00:26,420 --> 00:00:31,710
フェードインとフェードアウトは、6つの四角形を取得してから、迅速なイベントの基本ロジックを追加し、正しい色などを確認します。

10
00:00:31,710 --> 00:00:34,780
 

11
00:00:34,950 --> 00:00:37,970
だから最初に私は彼に私がここにあるファイルの端を作る必要があります。

12
00:00:37,980 --> 00:00:42,910
色のついたゲームを毎回呼び出すので、ここでチームに追加します。

13
00:00:43,110 --> 00:00:44,070
ボイラープレート。

14
00:00:44,430 --> 00:00:45,370
タイトルをつけてください。

15
00:00:45,420 --> 00:00:47,090
私はカラーゲームをします。

16
00:00:47,910 --> 00:00:50,450
6つの正方形を追加してみましょう。

17
00:00:50,610 --> 00:00:51,790
だから私はそれらをdivにするつもりです。

18
00:00:51,810 --> 00:00:57,090
それぞれが正方形のクラスを持つdivです。私たちは、その二乗されたクラスを使用して後でそれらをスタイルします。

19
00:00:57,510 --> 00:01:05,610
さて、私たちはdivクラスのスクエアを行い、その中に何かを入れる必要はなく、そのうちの6つを持っています。

20
00:01:05,610 --> 00:01:07,380
 

21
00:01:07,380 --> 00:01:12,660
そして、このクリーナーを作成するには、私たちが後でスタイルを変えることができる別のdivの代わりに、それらをすべて入れるつもりです。

22
00:01:12,660 --> 00:01:13,410
 

23
00:01:13,560 --> 00:01:15,490
私はそれをコンテナと呼ぶつもりです。

24
00:01:15,810 --> 00:01:18,210
それでは、何も前もってやるつもりはありません。

25
00:01:18,240 --> 00:01:22,510
最終的には、サイトを反応させ、グリッドを縮小させるために使用します。

26
00:01:22,530 --> 00:01:26,640
今のところ、それらをグループ化して、6つの正方形が浮かんでいるだけではありません。

27
00:01:26,850 --> 00:01:28,970
ここで6つの四角形があります

28
00:01:29,160 --> 00:01:33,270
私たちがブラウザゲームでこれを開くと、それは彼に向いています。

29
00:01:33,600 --> 00:01:36,420
私たちはいくつかの理由からもちろん何も見ません。

30
00:01:36,430 --> 00:01:42,360
私たちは6つの部門を持っていますが、そこには余白がありません。色がないので、何も見えません。

31
00:01:42,360 --> 00:01:43,390
 

32
00:01:43,710 --> 00:01:46,520
だから我々は非常に基本的にそれらをスタイリングすることから始めるつもりです。

33
00:01:46,710 --> 00:01:52,800
だから、スタイルシートを追加する必要があるので、私が作成していないスタイルシートを最初にリンクして、これをもう少し大きくします。

34
00:01:52,800 --> 00:01:53,700
 

35
00:01:53,820 --> 00:02:04,650
だから私はそれをカラーゲームと呼んでSSを参照して保存し、そのファイルをカラーゲームC

36
00:02:04,650 --> 00:02:10,110
Ssにします。まず最初に私たちの体全体に背景色を追加するだけです。

37
00:02:10,140 --> 00:02:17,600
今のところ背景色と私が使用しようとしている色は16進コードです。

38
00:02:17,730 --> 00:02:23,960
それは2 3 2 3 2 3であり、それが接続されていることを確認してください。

39
00:02:24,120 --> 00:02:24,510
うん

40
00:02:24,630 --> 00:02:26,810
正しい背景色が得られます。

41
00:02:26,820 --> 00:02:31,730
次のステップでは、私たちの四角形のスタイルを開始します。

42
00:02:32,040 --> 00:02:38,100
私たちは、このVSSを写真ポートフォリオサイトに使用するのと同じ戦略を使用し、その応答性のある正方形の画像のグリッドを使用します。

43
00:02:38,100 --> 00:02:40,410
 

44
00:02:40,410 --> 00:02:41,640
彼らはすべて黒と白だった。

45
00:02:41,670 --> 00:02:43,400
ここで同じアイデアを使用できますか？

46
00:02:43,410 --> 00:02:49,770
したがって、我々がこれを行う方法は、それぞれがコンテナの内側にあり、それぞれコンテナの30％を占めるということです。

47
00:02:49,770 --> 00:02:51,870
 

48
00:02:51,870 --> 00:02:55,000
だから、容器はこれらの正方形の周りを右に進むだけです。

49
00:02:55,020 --> 00:02:58,100
正方形の周りに全身ではありません。

50
00:02:58,140 --> 00:03:02,360
彼らは30％を占めており、両者の間にはマージンがあります。

51
00:03:02,540 --> 00:03:04,180
1。 6 6％。

52
00:03:04,320 --> 00:03:07,770
つまり、すべてがコンテナの100％になります。

53
00:03:08,040 --> 00:03:13,880
それで最初の広場を30％にする。

54
00:03:14,460 --> 00:03:22,140
私たちがそれを残して、彼に背景を与えることができれば、それらを紫色にして保存して、私たちはまだ何も見ません。

55
00:03:22,140 --> 00:03:24,060
 

56
00:03:24,150 --> 00:03:29,820
それが起こった理由は私たちの人生がページ上にあるかどうかを調べると、私はあなたを見せます。

57
00:03:29,850 --> 00:03:31,400
彼らはまだ空です。

58
00:03:31,410 --> 00:03:32,610
私たちは何をする必要があります。

59
00:03:32,640 --> 00:03:38,480
前回の画像と画像には何らかのコンテンツが含まれていましたが、これらのdivは空です。

60
00:03:38,640 --> 00:03:42,280
だから、いくつかのスペースを追加して、パディングボトムを使用するつもりです。

61
00:03:42,330 --> 00:03:49,000
パディングトップを使用することもできますが、パディングボトムも30％になります。

62
00:03:49,410 --> 00:03:50,680
だから私はリフレッシュする場合。

63
00:03:51,080 --> 00:03:51,940
OK。

64
00:03:52,290 --> 00:03:57,480
私たちは現在、6つの四角形を持っていますが、それらはすべて私たちが望むものではないラインにあります。

65
00:03:57,480 --> 00:03:59,280
私たちは彼らが同じ行にいてほしい。

66
00:03:59,610 --> 00:04:03,420
そのため、イメージグリッドで行ったことも左に浮動させる必要があります。

67
00:04:03,420 --> 00:04:06,480
だから、左に浮かんでリフレッシュしないでください。

68
00:04:06,750 --> 00:04:09,400
そして今、我々はこの大規模なグリッドをここに終わらせます。

69
00:04:09,670 --> 00:04:12,990
ああ、先に進み、何が起こっているのかを見ることができるようにしてください。

70
00:04:13,020 --> 00:04:19,590
だから我々はマージン1を持つつもりです。 6 6パーセントと保存します。

71
00:04:19,790 --> 00:04:25,630
今ここにグリッドがあり、このグリッドが画面全体を占めていることがわかります。

72
00:04:25,670 --> 00:04:27,530
だから私はそれを少し変えるつもりです。

73
00:04:27,530 --> 00:04:29,400
我々はそれが巨大であることを望んでいません。

74
00:04:29,690 --> 00:04:35,270
そして、私たちができることは、このdiv IDコンテナを提供したコンテナを使用することです。

75
00:04:35,450 --> 00:04:43,910
だから、私たちがdivのスタイルをコンテナのアイデアでスタイルすると、このように選択してから、最大幅を指定することから始めることができます。

76
00:04:43,910 --> 00:04:48,770
 

77
00:04:48,770 --> 00:04:51,200
そして、私は600ピクセルに行ったと思う。

78
00:04:51,200 --> 00:04:52,510
私たちはその番号で遊ぶことができます。

79
00:04:52,540 --> 00:04:56,350
今、私がリフレッシュしたら、あなたはそれがはるかに小さいことを見ることができます。

80
00:04:56,690 --> 00:04:57,810
それはそれの一部です。

81
00:04:58,070 --> 00:05:00,030
そして、これもCenterを中心にしています。

82
00:05:00,350 --> 00:05:03,000
だから我々は2マージンになるだろう。

83
00:05:03,380 --> 00:05:04,420
0オート。

84
00:05:04,550 --> 00:05:09,860
このトリックはコンテナの上部と下部のゼロマージンを覚えていて、左右のオートはそれがどちらの側でも同じサイズになるようにします。

85
00:05:09,860 --> 00:05:13,100
 

86
00:05:13,130 --> 00:05:15,330
そして今、私たちはこの素晴らしいセンターグリッドを持っています。

87
00:05:15,500 --> 00:05:16,400
大丈夫。

88
00:05:16,400 --> 00:05:22,400
私たちのH-1にあるもう1つのことをやってみましょう。私はここでH1を持っていきます。それは素晴らしいRを言うつもりです。

89
00:05:22,400 --> 00:05:27,920
G. カラーゲームであり、我々はそのように始めるでしょう。

90
00:05:28,160 --> 00:05:31,110
コースをリフレッシュすると、見るのが大変です。

91
00:05:31,370 --> 00:05:37,440
ですから、それを白のH-1カラーの白にして保存しましょう。

92
00:05:37,820 --> 00:05:39,610
そしてそれから始めます。

93
00:05:39,620 --> 00:05:41,810
だから、いくつかのjavascriptを使ってみましょう。

94
00:05:41,810 --> 00:05:45,340
javascriptを設定して、これらのそれぞれに異なる色を設定します。

95
00:05:45,650 --> 00:05:50,830
それでは、新しいファイルを作ってみましょう。私たちはそれをカラーゲームと呼んでいます。

96
00:05:50,970 --> 00:05:53,360
J. S. 保存してください。

97
00:05:53,360 --> 00:05:58,870
そして、私がいつもやりたいことは、接続されているというアラートを追加しましょう。

98
00:05:58,880 --> 00:06:04,670
今度は、ソースをカラーゲームに置き換えてみましょう。

99
00:06:04,750 --> 00:06:10,290
はい、ページを更新して保存すると、接続アラートが表示されます。

100
00:06:10,790 --> 00:06:13,550
OK、そこでウィンドウのサイズを変更します。

101
00:06:13,550 --> 00:06:16,400
次に、異なる色を付けるコードを追加しましょう。

102
00:06:16,580 --> 00:06:18,770
最終的には最終的な結果が出ます。

103
00:06:18,770 --> 00:06:25,870
ページが読み込まれるたびに6つのランダムな色が選択され、各色がdivの1つに割り当てられます。

104
00:06:26,150 --> 00:06:30,350
私たちは無作為化された側面から始めようとしており、常に同じ6つの色を割り当てようとしています。

105
00:06:30,350 --> 00:06:31,250
 

106
00:06:31,400 --> 00:06:33,800
そして、それらをランダム化することに移ります。

107
00:06:33,800 --> 00:06:39,680
それでは私のカラーゲームに行きましょうはい、私は色のリストを作成することから始めるつもりです、そして、私はそれを色と呼んでいます。

108
00:06:39,680 --> 00:06:40,430
 

109
00:06:40,430 --> 00:06:41,190
それは配列です。

110
00:06:41,360 --> 00:06:45,610
私たちの最終製品では、これは色のランダムなリストであることを忘れないでください。

111
00:06:45,680 --> 00:06:48,820
今のところ私は自分のものをいくつか追加します。

112
00:06:48,980 --> 00:06:52,050
だからG-Bと私はすべて赤で始める。

113
00:06:52,070 --> 00:06:59,790
だから2 5 5 0 0そしてこれを読みやすいように私は別々の行ですべてこれをやってみましょう。

114
00:06:59,900 --> 00:07:02,240
だから我々はこれらの6つを持っています。

115
00:07:02,420 --> 00:07:08,710
最初のものはすべて赤色になり、次に赤色になるものと黄色になるものがあります。

116
00:07:08,710 --> 00:07:09,670
 

117
00:07:09,830 --> 00:07:16,030
そして、次の1つは赤と緑です。

118
00:07:16,970 --> 00:07:27,790
その後、次の1つは赤または緑のゼロとなり、すべて青となり、その後も同様になります。

119
00:07:27,830 --> 00:07:40,130
だから0の緑色の255の青色を読んだ後、255の赤色の0の緑色の255の青色を行い、6つの色の配列を文字列として与えます。

120
00:07:40,130 --> 00:07:42,680
 

121
00:07:42,680 --> 00:07:48,770
そして、私たちがやりたいことは、これらの四角形の6つすべてを選択し、それらの色の1つをそれぞれの背景に割り当てることです。

122
00:07:48,770 --> 00:07:51,110
 

123
00:07:51,290 --> 00:07:58,640
最初にループするにはこれまで選択する必要があり、正方形とドキュメントを同じにして、ここでは多くの選択肢があります。

124
00:07:58,640 --> 00:07:59,710
 

125
00:07:59,720 --> 00:08:02,010
私はすべてのクエリセレクタを使用するつもりです。

126
00:08:02,390 --> 00:08:05,810
だから、最初のものだけではなく、6つすべてを確実に取得する。

127
00:08:05,990 --> 00:08:08,930
そして、我々はクラススクエアに基づいて選択するつもりです。

128
00:08:09,440 --> 00:08:13,930
divをしただけでコンテナdivがあることを覚えていれば、それを選択する必要はありません。

129
00:08:14,000 --> 00:08:23,030
これらの6つの四角形のdivを正方形にするだけで、4つのvarが0になるようにループします。

130
00:08:23,450 --> 00:08:35,310
私は四角形の長さよりも小さく、私はプラスではなく、ここで私たちは四角形を私はスタイルのドットの背景等価点を言うとこれは私たちは目を取って色にアクセスするために使用する興味深い部分です。

131
00:08:35,420 --> 00:08:43,010
 

132
00:08:43,010 --> 00:08:43,710
 

133
00:08:44,750 --> 00:08:49,990
どちらかはコルトです私は事実の後に追加している少し修正してここにいます。

134
00:08:50,130 --> 00:08:51,080
ちょっとしたメモ。

135
00:08:51,330 --> 00:08:58,650
あなたのスタイルの背景色にはもっと好都合ですので、このビデオで使用しているスタイルの背景を背景色ではなく大文字のCで背景色にしてください。

136
00:08:58,710 --> 00:09:04,180
 

137
00:09:04,350 --> 00:09:08,230
だから、いつもあなたはスタイリングアップされた背景を見て、それを背景色に変えます。

138
00:09:08,400 --> 00:09:13,590
その理由は、現在のスタイルではすべてのブラウザで動作しますが、バックグラウンドはFirefoxでは機能しないため、技術的にはスタイルで動作します。

139
00:09:13,590 --> 00:09:17,880
 

140
00:09:17,910 --> 00:09:23,160
 

141
00:09:23,160 --> 00:09:28,490
 

142
00:09:28,670 --> 00:09:29,200
その背景はChromeでうまく動作し、ゲームはうまくいきますが、Firefoxで何が起こっているのかについてたくさんの質問がありました。これは本当に主なスタイルの背景色です。

143
00:09:29,400 --> 00:09:34,320
また、Del

144
00:09:34,320 --> 00:09:37,450
Andersonがこれを指摘したディスカッションフォーラムの学生の一人と思うと、最近私はコーディングに戻るでしょう。

145
00:09:37,500 --> 00:09:45,300
それで、私たちは6つの正方形を持ち、私たちの目は0 1 2 3 4

146
00:09:45,300 --> 00:09:46,420
5から行くつもりで、それは各四角形をループします。

147
00:09:46,560 --> 00:09:51,890
そして、私が最初の広場に着くと、私はゼロをとり、ここにある色のゼロの背景色を与えます。

148
00:09:51,890 --> 00:09:53,300
 

149
00:09:53,340 --> 00:09:54,360
それは正しいでしょう。

150
00:09:54,630 --> 00:10:00,780
そして、我々は続けるつもりで、2番目のdivのために1つを取って、それに1のインデックスを持つ2番目の色を与えます。そして、終わりまでそれを続けます。

151
00:10:00,780 --> 00:10:03,330
 

152
00:10:03,330 --> 00:10:08,010
だから、我々は基本的には、ページ上にdivが配列からこれらの色を使って色付けされる順序であることを順番に考えている。

153
00:10:08,490 --> 00:10:10,420
 

154
00:10:10,680 --> 00:10:16,170
リフレッシュを保存すると、6つの基本的な色が得られます。

155
00:10:16,710 --> 00:10:20,740
赤い黄緑色のシアンブルーのマゼンタがあります。

156
00:10:20,970 --> 00:10:22,330
それで今は大丈夫です。

157
00:10:22,500 --> 00:10:24,730
私たちは後で色をランダム化することに焦点を合わせます。

158
00:10:24,870 --> 00:10:30,420
しかし、プレビューとして、0から255までの3つの異なる3つの数字を生成し、それらを組み合わせる必要があります。

159
00:10:30,420 --> 00:10:32,960
 

160
00:10:33,210 --> 00:10:36,180
したがって、ランダム化された3つの異なるチャネルだけです。

161
00:10:36,180 --> 00:10:40,340
そして、それらをrで1つの大きな文字列にします。 g Bとそれらのまわりの括弧。

162
00:10:40,590 --> 00:10:42,720
しかし、私たちは今、これらの色で行くつもりです。

163
00:10:42,720 --> 00:10:46,210
次は、ページが読み込まれるたびに実行する必要があります。

164
00:10:46,300 --> 00:10:49,640
私はここにあなたを示しているだけでなく、6色を選んだ。

165
00:10:49,740 --> 00:10:55,590
これらの色の1つは、目標であるか、私たちが探している色になるように選択されています。

166
00:10:55,590 --> 00:10:58,490
この場合、これは選択された色です。

167
00:10:58,500 --> 00:11:03,540
だから私たちもそれをやるつもりで、私たちはそれをハードコーディングするPortusを始めるつもりです。それから私たちはそれをランダム化します。

168
00:11:03,540 --> 00:11:04,310
 

169
00:11:04,410 --> 00:11:08,610
だから、我々は金色がシアン色であると言って始めようとしています。

170
00:11:08,790 --> 00:11:11,940
それは3の4番目のカラーインデックスです。

171
00:11:11,970 --> 00:11:20,070
だから、ここで変数var picked colorは色配列インデックス3と同じです。

172
00:11:20,800 --> 00:11:23,900
そしてそれはSuyinまたはこの色をRに選ぶでしょう。 G. B.

173
00:11:23,910 --> 00:11:31,380
0 2 5 5 2

174
00:11:31,380 --> 00:11:33,690
5 5そしてそれはストリングだと覚えているのは、私たちがやりたかったことは、ページを更新してここにここにあるように言うことです。

175
00:11:33,990 --> 00:11:38,030
明らかに同じ様式のスタイルではありませんが、私たちはそれをRと言いたいと思います。 G. B.

176
00:11:38,040 --> 00:11:45,960
5 5 5で、我々はH1を持っていたスコアキーパーの試合に戻って考えることができ、私たちはあなたを変えなければならない場合、少し変更しなければなりません。

177
00:11:45,960 --> 00:11:52,990
そして、かっこ0 2 5

178
00:11:53,010 --> 00:11:55,670
プレイヤー1人のプレイヤーが最初に2つの得点を返します

179
00:11:56,040 --> 00:12:02,310
我々はちょうど飛行機H-1を持っていた。そして我々がそれを更新したとき、それはそこにあったすべてのものを自動的に上書きした。

180
00:12:02,310 --> 00:12:02,840
 

181
00:12:03,030 --> 00:12:04,160
しかし、私たちはそれをしたくありません。

182
00:12:04,170 --> 00:12:10,320
私たちは、テキストを素晴らしい色のゲームにしておきたいと思っています。私たちの色はちょうどここに行きますが、H-1や別のものが別々の線になってしまうので、私たちはそれを望んでいません。

183
00:12:10,320 --> 00:12:13,970
 

184
00:12:14,040 --> 00:12:20,070
だから、スコアキーパーのゲームと同じようにスパンを使い、Rを追加するだけです。 G. プレースホルダとしてそこにいてください。

185
00:12:20,070 --> 00:12:21,180
 

186
00:12:21,180 --> 00:12:24,320
だから、私たちが検査すれば何も違って見えます。

187
00:12:25,110 --> 00:12:30,180
あなたは今、あなたが簡単にそれを選択し、テキストを操作することができることを意味するスパンを持っていることがわかります。

188
00:12:30,510 --> 00:12:33,250
そしてそれをもっと簡単にするためのアイデアを与えるつもりです。

189
00:12:33,510 --> 00:12:34,950
だから私たちはそれにidを与えます。

190
00:12:35,220 --> 00:12:37,850
それを単にカラー表示と呼んでみましょう。

191
00:12:39,040 --> 00:12:41,720
それから私たちはJavaScriptに行き、それを選択します。

192
00:12:41,890 --> 00:12:50,230
色の表示はドキュメントと同じですが、idで要素を取得するには、IDごとに要素を取得する必要があります。

193
00:12:50,230 --> 00:12:51,400
 

194
00:12:51,730 --> 00:12:53,940
そしてそれはカラー表示でした。

195
00:12:54,610 --> 00:12:57,330
そして私たちはこれを少しだけ保存して作っていきます。

196
00:12:57,610 --> 00:13:04,640
ファイルを保存してから、色の表示を更新して、この色を選択します。

197
00:13:05,050 --> 00:13:17,880
それで、それはカラー表示のテキストコンテンツになるでしょう、それと同じ色を選び、リフレッシュします。

198
00:13:17,920 --> 00:13:20,500
そして、ここで私達の色に終わります。

199
00:13:20,500 --> 00:13:21,030
すばらしいです。

200
00:13:21,130 --> 00:13:23,280
clickイベントのロジックを追加しましょう。

201
00:13:23,350 --> 00:13:28,660
だから私がこれらの四角形の1つをクリックすると、私たちがクリックした四角形がどの色であるかを知るためにいくつかのコードを実行します。

202
00:13:28,840 --> 00:13:30,470
 

203
00:13:30,640 --> 00:13:34,350
そして、その色をいったん取得すると、その色をpix色と比較します。

204
00:13:34,360 --> 00:13:35,430
これがここにあります。

205
00:13:35,740 --> 00:13:40,360
そして、それらが異なっているなら、私たちはその正方形の背景色を変えて、それが体の背景と同じ色になるようにします。

206
00:13:40,360 --> 00:13:42,740
 

207
00:13:43,030 --> 00:13:46,930
そしてそれらが同じであるなら、それはプレーヤーが1つを持っていることを意味します。

208
00:13:46,930 --> 00:13:48,570
そして、特別なことをする必要があります。

209
00:13:48,640 --> 00:13:52,930
そして、彼らが違うなら、それはプレーヤーが間違った色を選んだことを意味し、またそれを処理する必要があります。

210
00:13:53,680 --> 00:13:54,320
 

211
00:13:54,370 --> 00:13:58,580
クリックするだけで警告を発するプレーンなクリックイベントハンドラを追加しましょう。

212
00:13:58,870 --> 00:14:03,100
イベントハンドラを四角形のすべてに追加するので、同じループを使用することができます。

213
00:14:03,100 --> 00:14:04,140
 

214
00:14:04,360 --> 00:14:13,660
ここでコメントを追加して最初の色を四角形に追加し、次の部分はクリックリスナ2つの四角形になります。

215
00:14:15,850 --> 00:14:18,720
 

216
00:14:18,760 --> 00:14:23,700
したがって、これらの正方形のもう1つは、イベントリスナーを追加します。

217
00:14:24,350 --> 00:14:28,720
Clickとコールバック関数の時間です。

218
00:14:29,860 --> 00:14:37,830
私たちが行うことは、かなり正方形のアラートであり、6人全員が警報を発することを確認するだけです。

219
00:14:37,860 --> 00:14:39,600
すべて正方形をクリックしてください。

220
00:14:39,610 --> 00:14:44,130
彼らが必要としているだけですべてうまく動作するように見える。

221
00:14:44,350 --> 00:14:55,950
だから私たちがする必要があるのは、クリックされた四角形の色をつかんで色を比較して色を選択することです。

222
00:14:55,960 --> 00:15:01,560
私たちが定義した可変絵柄の色が現れるので、その色を取得し始めます。

223
00:15:01,840 --> 00:15:06,450
正方形の上をクリックしたアイテムを参照することができます。

224
00:15:06,580 --> 00:15:10,460
だから私たちは、このスタイルの背景を言うことができます。

225
00:15:10,780 --> 00:15:15,060
ここで別の警告を出し、私たちが何を得るかを見てみましょう。

226
00:15:15,070 --> 00:15:18,310
それで私が赤いものをクリックすると、それは私に警告します。

227
00:15:18,310 --> 00:15:25,510
RG B 2 5 5 0 0をクリックした場合、1つのR G B 0 2 5 5 2 5 5を割り当てます。

228
00:15:25,720 --> 00:15:26,850
これは機能しています。

229
00:15:27,220 --> 00:15:34,630
今ここで行うことは、これを変数に保存することです。ちょうどそれをクリックした色と呼ぶことにします。

230
00:15:35,020 --> 00:15:41,260
 

231
00:15:42,390 --> 00:15:48,770
クイックの色を比較するためにIF文を書くつもりです。色が3倍であれば、色の素敵な韻を選んでください。

232
00:15:49,590 --> 00:15:55,690
そして、彼らが一致しない場合、または私たちは間違って警告します。

233
00:15:57,240 --> 00:16:00,170
それをリフレッシュしてみましょう。

234
00:16:00,290 --> 00:16:01,390
私はこれをクリックします。

235
00:16:01,410 --> 00:16:02,330
違う。

236
00:16:02,640 --> 00:16:03,210
違う。

237
00:16:03,210 --> 00:16:04,370
そして真のテスト。

238
00:16:04,400 --> 00:16:07,310
正しいと言えるものをクリックします。

239
00:16:07,350 --> 00:16:13,110
 

240
00:16:13,110 --> 00:16:18,600
私たちが持っているものにランダムな色を持たなくても、私たちのロジックは機能していますが、ハードコーディングされた6色の配列があり、各四角に色を割り当ててからピッキングしています。

241
00:16:18,600 --> 00:16:19,640
 

242
00:16:19,650 --> 00:16:25,050
このケースでは、シアンとこれは当然ランダムですが、私たちは私たちの答えである一つの色を選んでいます。

243
00:16:25,320 --> 00:16:30,570
ユーザーがその四角形または任意の四角形をクリックすると、すべての四角形にイベントリスナーが追加されます。

244
00:16:30,570 --> 00:16:34,110
指定された四角形の色と画像の色を比較します。

245
00:16:34,110 --> 00:16:35,010
私たちは一つのことをします。

246
00:16:35,130 --> 00:16:39,840
一致しない場合は、次の動画で別のことをします。一致した場合、実際に行ったことについて話し合うつもりです。

247
00:16:39,840 --> 00:16:40,700
 

248
00:16:40,710 --> 00:16:42,000
そして、彼らが一致しなければ私たちは何をしますか。