1
00:00:00,170 --> 00:00:06,330
在這部影片中有我想要做，然後我要談談我們如何可以重構這一點一些小的改動。

2
00:00:06,330 --> 00:00:09,570
所以，第一個變化是，當我們贏得這場比賽。

3
00:00:09,840 --> 00:00:11,860
因此，讓我們在這裡奪冠。

4
00:00:11,880 --> 00:00:16,320
在那裡，我們去我得到這個正確的消息，我再次點擊播放。

5
00:00:16,710 --> 00:00:18,080
它仍然說是正確的。

6
00:00:18,300 --> 00:00:22,030
我們希望這樣的重置這是一個非常快速的變化。

7
00:00:22,320 --> 00:00:30,730
所有我們需要做的是找到一個運行，當我們再次點擊播放，然後我們需要改變，我們這裡的跨度，使它只是空的代碼。

8
00:00:30,750 --> 00:00:33,760
所以，讓我們發現，使這個全屏。

9
00:00:34,410 --> 00:00:38,570
所以，當我們點擊了復位按鈕是在這裡。

10
00:00:39,360 --> 00:00:44,190
所有我們需要做的是改變我們顯示我們稱之為信息顯示。

11
00:00:44,190 --> 00:00:48,090
因此，我們將做到這一點到這裡隨便找個地方。

12
00:00:48,090 --> 00:00:57,960
消息顯示文本窗口的文本內容等於空字符串。

13
00:00:58,360 --> 00:01:00,330
讓我們來看看如何繼續下去。

14
00:01:00,540 --> 00:01:01,730
刷新。

15
00:01:01,810 --> 00:01:03,740
OK，讓我們只要按一下，直到我們贏了。

16
00:01:04,050 --> 00:01:05,680
行，所以在這裡說，正確的。

17
00:01:05,790 --> 00:01:09,440
如果我點擊發揮再次證明消失。

18
00:01:09,660 --> 00:01:16,290
我想令對方稍有變化的是，這個按鈕應該只能說再次，一旦用戶贏得比賽。

19
00:01:16,320 --> 00:01:20,760
因此，我將刷新頁面，它說，新的顏色是如何，我們希望它的工作。

20
00:01:20,760 --> 00:01:23,910
然後，如果我贏了就問我，如果我想再次發揮。

21
00:01:24,120 --> 00:01:30,080
然後，如果我點擊再次發揮我們要改變按鈕文本回到新的顏色。

22
00:01:30,090 --> 00:01:35,280
所以，真正細微的差別，但我只是想，如果用戶只是獲得了再次顯示播放。

23
00:01:35,850 --> 00:01:44,240
因此，進入我們的代碼，我們需要找到用戶贏得比賽是在這裡，當用戶點擊拾取顏色的地方。

24
00:01:44,370 --> 00:01:56,650
因此，當用戶點擊正確的顏色，我們改變復位按鈕的文字說的文字內容，但在隨後的復位按鈕，用戶點擊我們要改變我們所希望做的是。

25
00:01:56,790 --> 00:02:05,040
這點文字內容回到新的顏色，我們也可以寫一個復位按鈕。

26
00:02:05,040 --> 00:02:09,540
但它更容易，因為我們的事件偵聽器復位按鈕內做到這一點。

27
00:02:10,050 --> 00:02:15,270
如果我們刷新快，直到我們得到正確的一個應該是不錯的。

28
00:02:15,360 --> 00:02:16,440
我們要重新播放。

29
00:02:16,680 --> 00:02:17,480
當然。

30
00:02:17,490 --> 00:02:26,900
現在，它可以追溯到新的顏色，每一次它只是說，新的顏色一遍又一遍，如果我贏了那就是它說再次發揮唯一的一次。

31
00:02:26,910 --> 00:02:34,350
所以，一個人真正次要的事情，但我覺得它真的分散注意力的是，當我點擊這些按鈕之一，它周圍有這個惱人的輪廓。

32
00:02:34,680 --> 00:02:36,990
而這實際上是我們的瀏覽器這樣做。

33
00:02:36,990 --> 00:02:38,560
我們可以將其關閉。

34
00:02:38,610 --> 00:02:41,940
我不知道，如果你可以看到在屏幕上投，但有一個藍色的輪廓。

35
00:02:42,070 --> 00:02:43,190
這是非常有害的。

36
00:02:43,200 --> 00:02:54,290
因此，要擺脫我們去我們的樣式表，如果我們選擇我們的按鈕，這裡只是下來，我們可以只寫大綱沒有回去和刷新。

37
00:02:54,310 --> 00:02:57,810
現在，如果我們點擊我們沒有得到它周圍的藍色輪廓。

38
00:02:57,960 --> 00:03:00,260
所以，這就是我想要的遊戲邏輯的事情。

39
00:03:00,450 --> 00:03:03,500
現在，我們要花費一點點時間重構你的代碼。

40
00:03:03,630 --> 00:03:04,880
因此，讓我們回去。

41
00:03:04,980 --> 00:03:12,120
跳轉出來給我的第一件事，這裡是這段代碼，我們有一個硬鍵一個簡單的按鈕，並為每一個聽眾。

42
00:03:12,240 --> 00:03:14,370
而且他們在他們的工作非常相似。

43
00:03:14,370 --> 00:03:17,100
除其中的一個將與三個正方形工作。

44
00:03:17,100 --> 00:03:20,860
另一位工作有六個，但否則他們基本上做同樣的事情。

45
00:03:21,090 --> 00:03:23,720
因此，我們實際上可以減少重複。

46
00:03:23,880 --> 00:03:33,180
和而不是給每個人一個愛迪就是我們要做的是擺脫這些ID，並給他們一個類，他們將共享相同的類。

47
00:03:33,390 --> 00:03:37,660
因此類將被稱為模式。

48
00:03:37,770 --> 00:03:39,570
因此，我們將給予他們一流的模式。

49
00:03:39,600 --> 00:03:42,850
記住一個按鈕或任何項目可以有兩班。

50
00:03:42,870 --> 00:03:45,010
他們只需要用空格隔開。

51
00:03:45,030 --> 00:03:48,030
因此，這有類模式和類選擇。

52
00:03:48,420 --> 00:03:49,020
好。

53
00:03:49,160 --> 00:03:59,220
所以，現在我們就去這裡刪除這兩個按鈕，使按鈕稱為模式按鈕列表以及那將是查詢選擇的文件。

54
00:03:59,350 --> 00:04:03,090
保羅·達特模式。

55
00:04:03,160 --> 00:04:05,410
所以這給了我們兩個按鈕。

56
00:04:05,700 --> 00:04:08,360
然後我們通過模式按鈕將循環。

57
00:04:08,370 --> 00:04:13,020
因此，我們需要為VAR等於零。

58
00:04:13,290 --> 00:04:16,740
比模式按鈕驚人的少。

59
00:04:16,910 --> 00:04:25,380
什麼這也將讓我們做的是，如果在未來，我們要添加一個媒體或普通難度模式或超硬困難模式。

60
00:04:25,470 --> 00:04:34,800
我們沒有，因為我們選擇所有這些，然後使用循環與下面我們就來手工編寫一個每一個我們添加按鈕添加額外的聽眾。

61
00:04:35,100 --> 00:04:35,330
好。

62
00:04:35,340 --> 00:04:36,480
所以在這裡完成的循環。

63
00:04:36,570 --> 00:04:37,740
加上加號。

64
00:04:38,100 --> 00:04:50,590
而我們要做的就是添加一個模式按鈕我點添加事件偵聽器，點擊他們就會離開它在這個現在。

65
00:04:50,590 --> 00:05:01,100
我們再往前走之前，我究竟要註釋掉代碼只是讓我們可以告訴什麼是我們新的代碼運行，當我們點擊這些按鈕之一，我們想要的東西發生。

66
00:05:01,210 --> 00:05:05,580
我們希望發生的第一件事就是要應用的選定類。

67
00:05:05,680 --> 00:05:07,260
所以，現在它只有當我們徘徊。

68
00:05:07,300 --> 00:05:10,220
我們得到的顏色我想這是當我們點擊。

69
00:05:10,780 --> 00:05:23,510
因此，我們需要做的這個點類列表點添加選定的就是這樣這就是我們到這裡，除了我們在做給EASY按鈕和硬按鈕。

70
00:05:23,710 --> 00:05:27,070
我們可以把它只是做這個是指被點擊的東西。

71
00:05:27,220 --> 00:05:31,180
唯一的問題是，我們需要把它關掉原來的為好。

72
00:05:31,540 --> 00:05:47,320
要做到這一點，我們只是要硬編碼此一點，寫模式按鈕零點類列表斑點刪除選定的，然後我們會從另外一個刪除它為好。

73
00:05:47,800 --> 00:05:49,360
所以，因為只有兩個按鈕。

74
00:05:49,390 --> 00:05:50,550
這不是一個問題。

75
00:05:50,560 --> 00:05:57,690
我們正在做的是從兩個按鈕移除它只是為了安全起見，然後將它添加到我們剛剛點擊的那個。

76
00:05:57,700 --> 00:06:00,690
因此，如果我們測試了這一點，並刷新。

77
00:06:01,030 --> 00:06:06,630
你可以看到，它只是被添加到我們剛剛點擊了一個，它是從另一個去除。

78
00:06:06,640 --> 00:06:10,900
所以我們下一步需要做的就是在這裡加入了大量的邏輯，這些按鈕。

79
00:06:11,080 --> 00:06:30,420
因此，我們需要弄清楚有多少平方顯示挑選新的顏色，然後我們需要選擇一個新的挑顏色這是我們正在努力試圖單擊顏色。

80
00:06:30,670 --> 00:06:37,850
然後最後我們要更新網頁，以反映變化。

81
00:06:38,110 --> 00:06:59,650
因此，要做到這一切，我真的要做出一個新的功能和作用，我只是要叫它復位，這就是我們要去，因為我們重複這些步驟在一些地方使用的東西大量採摘新的顏色選擇從顏色數組的新挑顏色，然後更新頁面，以顯示新的顏色和位置更新此顯示。

82
00:06:59,650 --> 00:07:03,400
我們正在做這一切的時候，所以我打算乾脆把所有的功能。

83
00:07:03,400 --> 00:07:08,500
所以我們需要做的裡面這個功能實際上，我只是去把它從這裡往下複製。

84
00:07:08,530 --> 00:07:09,860
我們已經在這裡做到了這一點。

85
00:07:09,990 --> 00:07:15,200
我打算在複製到我們的重設，就像這一切。

86
00:07:15,430 --> 00:07:17,150
讓我們來看看發生了什麼。

87
00:07:17,350 --> 00:07:29,310
所以復位或生成隨機顏色，而不是依賴於麻木廣場變量，然後我們選擇一個新的顏色我們正在改變顏色顯示的內容。

88
00:07:29,530 --> 00:07:32,020
我們有這樣的文字內容等於新的顏色。

89
00:07:32,050 --> 00:07:37,060
而且，實際上是行不通的，因為這裡曾經是指復位按鈕。

90
00:07:37,390 --> 00:07:40,420
而這是在中心復位按鈕的事件中。

91
00:07:40,540 --> 00:07:43,240
我們現在是不是所謂的復位一個單獨的函數。

92
00:07:43,270 --> 00:07:45,720
因此，我們需要硬編碼，作為復位按鈕。

93
00:07:45,880 --> 00:07:49,140
然後，我們改變了信息顯示為空。

94
00:07:49,570 --> 00:07:54,660
然後，我們通過所有的方塊循環，我們正在更新他們的顏色。

95
00:07:54,970 --> 00:07:57,920
然後，我們改變的8背景：1回藍。

96
00:07:58,180 --> 00:08:02,170
如果我們只是調用，而不是在這裡我們只是運行復位。

97
00:08:02,170 --> 00:08:06,760
還有一個小問題，就是我們永遠更新麻木廣場。

98
00:08:06,880 --> 00:08:11,870
所以，當我點擊按鈕，方便你想改變的變量是三的平方。

99
00:08:11,920 --> 00:08:15,180
當我點擊硬鍵要改變它是6。

100
00:08:15,220 --> 00:08:22,960
因此，要做到這一點去分鐘就在這裡，如果語句添加了所有我們能做的就是如果文字內容編寫。

101
00:08:22,960 --> 00:08:27,880
所以被點擊，如果文本內容等於容易的按鈕。

102
00:08:28,250 --> 00:08:36,510
我們現在要做的是說麻木平方等於3 L的格數等於6。

103
00:08:36,640 --> 00:08:43,030
然後，我們會打電話給其中會使用到麻木的廣場，你可以看到在我們的復位功能這裡的復位功能。

104
00:08:43,150 --> 00:08:47,410
我們使用了一些廣場撥打我們的生成隨機顏色的功能。

105
00:08:47,600 --> 00:08:51,970
因此，我們需要更新一些廣場，我們正在做的就在這裡它。

106
00:08:52,000 --> 00:08:57,010
實際上，有寫這個，有些人的忠實粉絲更短的方法。

107
00:08:57,010 --> 00:08:58,580
這就是所謂的三元操作符。

108
00:08:58,570 --> 00:09:01,720
所以我要把它先寫，然後我會談談它是如何工作。

109
00:09:01,720 --> 00:09:06,350
所以本文內容等於等於平等。

110
00:09:06,670 --> 00:09:10,870
簡單的問號。

111
00:09:11,000 --> 00:09:19,110
麻木廣場等於三結腸麻木平方等於六人。

112
00:09:19,120 --> 00:09:23,710
所以在這裡這一行做同樣的事情，因為這些四行就在這裡。

113
00:09:23,710 --> 00:09:25,430
這五行。

114
00:09:25,510 --> 00:09:27,360
因此，它被稱為三元操作符。

115
00:09:27,400 --> 00:09:28,950
有三個部分它。

116
00:09:28,960 --> 00:09:30,860
的第一件事是條件。

117
00:09:31,070 --> 00:09:42,080
所以，你可以閱讀，彷彿本文內容等於容易則不平方等於3，否則沒有廣場等於6。

118
00:09:42,250 --> 00:09:44,060
所以它只是一個寫這篇方式。

119
00:09:44,380 --> 00:09:46,280
我會保持這樣。

120
00:09:46,270 --> 00:09:55,970
通常，如果我們只是有快速一條線的if語句，我們正在一個值設置為兩種不同的可能的選擇是一個很好的用例的三元操作。

121
00:09:56,600 --> 00:09:59,420
我們仍然有，雖然這是我們從來沒有真正隱藏的問題。

122
00:09:59,420 --> 00:10:01,380
或顯示平方正確的號碼。

123
00:10:01,390 --> 00:10:03,940
所以，如果我刷新會發生什麼。

124
00:10:04,030 --> 00:10:04,950
我們開始困難模式。

125
00:10:04,950 --> 00:10:05,860
這工作正常。

126
00:10:05,870 --> 00:10:07,290
一切的工作原理相同。

127
00:10:07,450 --> 00:10:16,160
如果我點擊容​​易，雖然我們仍然有六個正方形在這裡，你會看到底部的三個就是不改變顏色，因為我們只生成三種顏色。

128
00:10:16,370 --> 00:10:21,890
所以我們需要做我們復位功能，而不是我們需要考慮這一點。

129
00:10:21,880 --> 00:10:28,000
所以，在這裡，而不是這個循環，我們正在改變方塊的顏色相匹配從顏色陣列的顏色。

130
00:10:28,210 --> 00:10:34,060
如果有colors數組中只有三個項目是我們真正需要做的是隱藏其他三個廣場。

131
00:10:34,270 --> 00:10:40,670
所以我打算寫與if語句，我只是要檢查是否有顏色漆。

132
00:10:40,670 --> 00:10:42,070
我還做別的事情。

133
00:10:42,110 --> 00:10:47,410
所以，如果有我們要繪製或更改正方形的背景顏色的顏色。

134
00:10:47,410 --> 00:10:57,200
我是那種顏色，否則，我們需要改變我的正方形顯示給沒有了。

135
00:10:57,320 --> 00:11:02,920
和需要的樣式來顯示就這樣。

136
00:11:03,100 --> 00:11:05,130
因此，這將然後隱藏它為我們。

137
00:11:05,360 --> 00:11:14,870
所以，如果我點擊EASY按鈕會發生什麼我的色彩搭配三個項目都是通過六個正方形和复核循環數組。

138
00:11:14,920 --> 00:11:19,790
如果存在匹配平方和為前三個會有顏色。

139
00:11:19,820 --> 00:11:22,890
因此，我們將背景色設置為從陣列的顏色。

140
00:11:23,020 --> 00:11:26,700
但過去的三種顏色我將是否定的。

141
00:11:26,740 --> 00:11:27,910
或者實際上是不確定的。

142
00:11:27,910 --> 00:11:29,240
不會有一個顏色那裡。

143
00:11:29,470 --> 00:11:31,010
所以這是假的。

144
00:11:31,270 --> 00:11:34,560
而發生的事情是那麼我們將顯示器設置為none。

145
00:11:34,820 --> 00:11:37,770
所以，我會告訴你如何工作的刷新。

146
00:11:38,230 --> 00:11:41,180
如果我點擊容​​易底部的三個消失。

147
00:11:41,170 --> 00:11:43,720
請點擊我們很容易得到三個新的顏色。

148
00:11:43,780 --> 00:11:44,840
讓我們玩遊戲。

149
00:11:44,840 --> 00:11:46,410
在那裡，我們走了。

150
00:11:46,450 --> 00:12:01,720
我們確實有一個問題，但它是，如果我點擊一個硬我們正在改變所有六個方格有一個新的複方新諾明顏色，但我們不是躲在底部的三個會做繞過這是我們給一個新的背景前右顏色的正方形。

151
00:12:01,720 --> 00:12:03,960
我要繼續前進，再告訴他們。

152
00:12:03,970 --> 00:12:09,470
所以，這將是正方形我以為風情展示等於塊。

153
00:12:09,590 --> 00:12:11,320
所以這就是我們如何把他們帶回來。

154
00:12:11,410 --> 00:12:13,140
而我們只是要做到這一點，以全部六個。

155
00:12:13,150 --> 00:12:14,170
沒什麼大不了的。

156
00:12:14,200 --> 00:12:19,320
因此，如果我們給他們一個背景顏色，我們只是要始終確保它們是可見光第一。

157
00:12:19,340 --> 00:12:24,590
因此，如果我們刷新他們去容易，我們有三個玩遊戲。

158
00:12:24,760 --> 00:12:26,160
我點擊辛苦。

159
00:12:26,380 --> 00:12:28,070
現在，我們送六呼叫者。

160
00:12:28,070 --> 00:12:30,520
來玩個遊戲。

161
00:12:30,520 --> 00:12:33,700
在那裡，我們去點擊容易，我們回去三種。

162
00:12:33,700 --> 00:12:34,280
好吧。

163
00:12:34,450 --> 00:12:37,390
所以你可以看到，我們在這裡清理了大量的代碼。

164
00:12:37,510 --> 00:12:39,480
這曾經是很多時間。

165
00:12:39,480 --> 00:12:41,360
它像長至少三次。

166
00:12:41,380 --> 00:12:46,120
和兩個不同的被點擊的聽眾，現在我們的代碼是比較通用的。

167
00:12:46,120 --> 00:12:54,040
如果我們想增加一個中等難度按鈕所有我們需要做的是在這裡改變這一行，我們將有一個諾特爾格數。

168
00:12:54,040 --> 00:13:09,160
也許我們需要5格，或者我們想要一個超高難度的水平，我們有10平方，我們只需要改變一些廣場和調用我們的復位功能讓我們可以用我們的復位功能未來的地方其實是當我們點擊復位按鈕。

169
00:13:09,430 --> 00:13:17,630
因此，所有我們需要做的還有取代一切，而不是重置按鈕點擊Lisner只有復位就這樣。

170
00:13:17,650 --> 00:13:19,500
因此，推動了我們的代碼了很多。

171
00:13:19,570 --> 00:13:22,650
我們剛剛擺脫了10行左右。

172
00:13:23,170 --> 00:13:26,280
因此，讓我們回去保存不帶括號。

173
00:13:26,600 --> 00:13:29,020
讓我們去瀏覽器，並確保它仍然有效。

174
00:13:29,020 --> 00:13:31,580
所以，讓我們玩遊戲。

175
00:13:31,850 --> 00:13:35,000
再次點擊播放，並將其重置就好了。

176
00:13:35,320 --> 00:13:40,750
讓我們在輕鬆玩點擊另一場比賽，並重置就好了。

177
00:13:40,750 --> 00:13:41,430
好吧。

178
00:13:41,530 --> 00:13:43,340
因此，我們提高我們的代碼頗有幾分。