1
00:00:00,440 --> 00:00:00,840
OK.

2
00:00:00,840 --> 00:00:01,770
Ben tornato.

3
00:00:01,770 --> 00:00:07,420
Così come ho detto in questo video inizieremo a lavorare su un clone di attacco domestico qui.

4
00:00:07,430 --> 00:00:13,220
Quindi la prima cosa che vogliamo fare è capire come aggiungere un cerchio che abbiamo già

5
00:00:13,680 --> 00:00:21,570
visto, ma vogliamo fare alcune cose in un cerchio quando l'utente preme qualsiasi tasto, in realtà nel mio caso lo sto solo

6
00:00:21,570 --> 00:00:23,520
facendo per i suoi figli.

7
00:00:23,750 --> 00:00:25,730
Funziona allo stesso modo per qualsiasi altra chiave.

8
00:00:25,800 --> 00:00:32,080
Quindi, quando un utente colpisce la chiave in una circonferenza e quindi dobbiamo anche capire l'animazione di quel cerchio.

9
00:00:32,610 --> 00:00:36,200
E infine vogliamo aggiungere quel cerchio a una coordinata casuale.

10
00:00:36,330 --> 00:00:41,890
Quindi, per iniziare, basta premere un tasto e aggiungere un cerchio al centro dello schermo.

11
00:00:42,570 --> 00:00:50,610
Quindi andiamo al documento japes paper e diamo un'occhiata all'interazione e guardiamo all'interazione con la tastiera.

12
00:00:51,690 --> 00:00:58,290
E so che sembra che non sapessi dove guardare qui, ma la prima volta che sono venuto qui mi ci è voluto molto

13
00:00:58,290 --> 00:01:05,580
più tempo per scoprire che ho passato la maggior parte di questi e ho cercato fondamentalmente la tastiera cercando di dire che molto probabilmente se

14
00:01:05,580 --> 00:01:11,820
lo stavo facendo di nuovo da solo e non mi fossi preparato per questo video mi ci sarebbe voluto molto più tempo

15
00:01:11,820 --> 00:01:16,920
per scoprire che avrei potuto fare una ricerca in ogni caso, quindi è sufficiente scorrere verso il basso

16
00:01:16,920 --> 00:01:18,810
e guardare solo alcuni degli esempi.

17
00:01:18,840 --> 00:01:26,190
Questo primo veloce qui per mettere a fuoco e quindi premere alcuni tasti e ti dice quale tasto è stato premuto

18
00:01:26,190 --> 00:01:27,910
e quando è stato rilasciato.

19
00:01:28,350 --> 00:01:32,860
Quindi adesso sto premendo K e poi lo rilascio.

20
00:01:33,150 --> 00:01:38,450
E se guardi il codice è davvero facile, basta abbassare la chiave e Anchia.

21
00:01:38,520 --> 00:01:43,530
Quindi non c'è nessun documento sull'ascoltatore di eventi non ci sono Jay queery ascoltatori di eventi dietro

22
00:01:43,530 --> 00:01:46,670
le quinte ci sono documentati agli ascoltatori di eventi che accadono.

23
00:01:46,920 --> 00:01:52,680
Ma per la sceneggiatura cartacea dobbiamo solo scrivere questa linea super semplice, così possiamo prendere

24
00:01:52,680 --> 00:01:57,210
che in realtà basta copiare questo tasto per la nostra app.

25
00:01:57,360 --> 00:01:59,070
Vogliamo che il suono suoni immediatamente.

26
00:01:59,070 --> 00:02:06,240
Quindi quando premo il tasto non quando sono rilasciato, pensando che è un po 'più lento, è un po' come un pianoforte che

27
00:02:06,240 --> 00:02:12,090
quando si suona un pianoforte o il rumore il suono che viene generato viene generato proprio quando si preme

28
00:02:12,090 --> 00:02:14,880
il tasto o subito dopo non quando tu rilasci.

29
00:02:15,240 --> 00:02:16,290
Così farà la chiave giù.

30
00:02:16,290 --> 00:02:21,440
L'ho copiato e inizieremo creando una nuova cerchia, quindi abbiamo bisogno di questo codice.

31
00:02:21,630 --> 00:02:24,310
Ma ne vogliamo solo uno, quindi non abbiamo più bisogno degli anelli.

32
00:02:24,390 --> 00:02:30,870
Sbarazzati di questo e noi faremo quel nuovo cerchio sul tasto in basso.

33
00:02:32,220 --> 00:02:38,430
Quindi questo processo è piuttosto realistico in cui stai prendendo pezzi diversi e ti stai

34
00:02:38,430 --> 00:02:39,360
solo adattando.

35
00:02:39,810 --> 00:02:42,440
Così ho trovato questo nel documento sulla chiave giù.

36
00:02:42,840 --> 00:02:43,730
Puoi sbarazzartene.

37
00:02:43,860 --> 00:02:49,940
E ho trovato questo anche nei documenti e abbiamo bisogno di cambiare questo X e Y non sono definiti.

38
00:02:50,010 --> 00:02:55,410
Quindi facciamolo a 100 virgola 100 e facciamo diventare Phil color arancione.

39
00:02:55,740 --> 00:02:58,380
Quindi, esegui questo codice.

40
00:02:59,280 --> 00:03:04,410
E ancora è molto diverso da quello che abbiamo visto o abbiamo documentato un ascoltatore di eventi.

41
00:03:04,410 --> 00:03:07,260
E poi dovremmo aggiungere qualche elemento.

42
00:03:07,410 --> 00:03:19,470
Quindi dovremmo fare come il selettore di interrogazione dei punti del documento, un elemento come un punto div, aggiungere il listener di eventi e quindi dovremmo dirlo

43
00:03:19,470 --> 00:03:23,300
cliccando o premendo il tasto o il tasto su.

44
00:03:23,400 --> 00:03:25,160
È molto più codice.

45
00:03:25,290 --> 00:03:28,950
Questo è fatto per noi con Paperchase davvero semplice.

46
00:03:29,010 --> 00:03:32,070
Quindi, in basso, vediamo cosa succede.

47
00:03:32,310 --> 00:03:37,650
Vado a premere il tasto e finiamo con un cerchio e ogni volta che premo 1 ottengo un'altra cerchia.

48
00:03:37,710 --> 00:03:39,210
Non puoi vederlo.

49
00:03:39,690 --> 00:03:45,270
Quindi ora lavoriamo su questo in modo che stiamo aggiungendo un cerchio a un posto casuale sullo schermo.

50
00:03:45,720 --> 00:03:52,140
E il modo in cui lo facciamo in realtà mi ha messo un po 'di lavoro per

51
00:03:52,380 --> 00:04:01,120
scoprire che potremmo farcela da soli, dove generiamo due numeri praticamente da zero fino alla larghezza massima del nostro schermo e poi l'altro

52
00:04:01,800 --> 00:04:06,170
numero da zero in su fino all'altezza massima del nostro schermo.

53
00:04:06,570 --> 00:04:12,270
E non è troppo lavoro, ma dobbiamo capire la larghezza e l'altezza

54
00:04:12,270 --> 00:04:19,180
e le dimensioni che se vai in Paperchase e se guardiamo a dove fai riferimento.

55
00:04:20,010 --> 00:04:23,220
E poi quando questo è aperto in vista.

56
00:04:23,550 --> 00:04:27,080
E di nuovo ho appena trovato questo qualche giorno fa ho preso un po '.

57
00:04:27,090 --> 00:04:35,040
Ma se guardiamo te e guardiamo i limiti e forse è la dimensione delle dimensioni dell'area visibile e delle

58
00:04:35,040 --> 00:04:36,390
coordinate del progetto.

59
00:04:36,390 --> 00:04:46,860
Quindi, se facessimo qualcosa come console che registra la dimensione della vista che ho trovato qui di nuovo e aggiorna la

60
00:04:46,860 --> 00:04:56,240
pagina e vediamo cosa otteniamo otteniamo altezza e larghezza in modo che possiamo prendere quell'altezza e la larghezza.

61
00:04:56,380 --> 00:05:05,290
Quindi non hai altezza del punto e quindi cancelli il registro con le dimensioni iniziali e

62
00:05:06,030 --> 00:05:09,370
potremmo usare quell'aggiornamento e io prosequi.

63
00:05:10,020 --> 00:05:16,880
Attualmente la vista che la dimensione è di seicentonovantadue per settecento.

64
00:05:17,100 --> 00:05:20,700
Ma se lo ridimensiono vedrai che cambierà la prossima volta.

65
00:05:20,730 --> 00:05:21,930
Persecutee.

66
00:05:22,240 --> 00:05:26,430
Quindi possiamo usarlo per generare quei due punti di cui abbiamo bisogno.

67
00:05:26,640 --> 00:05:32,770
Ma l'altra cosa che possiamo fare è che c'è in realtà un metodo integrato

68
00:05:32,760 --> 00:05:38,570
che ho trovato che ci renderà punti casuali, quindi ti mostrerò anche questo.

69
00:05:38,580 --> 00:05:46,890
Quindi piuttosto che dover fare matematica a caso ci dà qualcosa tra 1 0 e 1 non inclusivo e quindi dobbiamo moltiplicarlo

70
00:05:47,150 --> 00:05:50,340
e spostarlo verso l'alto o verso il basso.

71
00:05:50,380 --> 00:05:51,960
È una specie di dolore.

72
00:05:52,170 --> 00:05:58,500
Quindi quello che faremo invece è usare questo bel documento J S way che ho trovato assomiglia a questo.

73
00:05:58,500 --> 00:06:07,680
Quindi creerò un punto massimo in modo che il punto massimo in cui possiamo aggiungere un cerchio sarà la nuova dimensione

74
00:06:08,340 --> 00:06:10,170
punto punto vista punto.

75
00:06:10,560 --> 00:06:15,700
E poi vogliamo con virgola quella dimensione punto altezza.

76
00:06:15,720 --> 00:06:19,400
Quindi xey sono massimi X o massimi.

77
00:06:20,160 --> 00:06:25,740
In questo modo creeremo i nostri punti massimi e ti mostrerò se

78
00:06:30,900 --> 00:06:31,560
eseguiamo

79
00:06:34,440 --> 00:06:42,450
un registro alt costante. Punto massimo ci andiamo e aggiungiamo effettivamente il nostro cerchio al punto massimo.

80
00:06:42,720 --> 00:06:47,720
Quindi, invece di fare un nuovo punto qui a 100 Kamo 100, gli daremo solo il punto massimo.

81
00:06:47,940 --> 00:06:48,510
OK.

82
00:06:48,900 --> 00:06:54,350
Quindi proviamolo ora e sbarazzati di quelli per aggiornare la pagina.

83
00:06:54,510 --> 00:06:55,870
Ho premuto un tasto.

84
00:06:55,950 --> 00:06:58,580
Vedi, ne prendiamo uno proprio qui nell'angolo in basso a destra.

85
00:06:58,590 --> 00:07:06,390
E se lo ridimensiono e lo faccio di nuovo e premo un tasto, ora otteniamo il punto massimo qui.

86
00:07:06,390 --> 00:07:14,250
su questa tela cambia le nostre modifiche al punto massimo in modo da non generare sempre un numero casuale tra le dimensioni

87
00:07:14,250 --> 00:07:19,890
dello schermo o anche le dimensioni della finestra perché non appena l'area visibile non è nemmeno

88
00:07:20,010 --> 00:07:25,540
l'intera finestra, ma solo l'area visibile sulla tela cambia le nostre modifiche al punto massimo.

89
00:07:25,530 --> 00:07:29,940
Quindi questo è bello perché come quella finestra cambia come l'area visibile

90
00:07:30,250 --> 00:07:32,740
OK, quindi abbiamo quello.

91
00:07:33,150 --> 00:07:39,540
Ora quello che vogliamo fare è prendere quel punto massimo e genereremo un punto casuale.

92
00:07:39,660 --> 00:07:46,810
Quindi chiameremo solo un punto casuale e c'è un punto punto del metodo casuale che ci darà un punto

93
00:07:46,800 --> 00:07:53,090
casuale tra 0 e 1 non inclusivo, proprio come Rande della mascotte tranne che con una linea.

94
00:07:53,130 --> 00:07:54,960
Otteniamo un oggetto punto.

95
00:07:55,480 --> 00:07:56,520
Quindi è fondamentalmente facendo questo.

96
00:07:56,520 --> 00:08:07,470
variabile che chiameremo solo punto ed è uguale a punti max volte punto casuale proprio così.

97
00:08:07,590 --> 00:08:19,060
Nuovi punti matematico punto casuale virgola math punto casuale e poi vogliamo prendere quella marca un'altra

98
00:08:19,120 --> 00:08:21,970
Quindi stiamo moltiplicando questi due punti insieme.

99
00:08:22,650 --> 00:08:32,310
È un po 'strano di matematica, ma fondamentalmente stiamo generando un punto tra 0 0 e 1 1, ma tecnicamente sarebbe

100
00:08:32,310 --> 00:08:36,770
il punto 9 9 9 9 e così via.

101
00:08:36,880 --> 00:08:45,640
Quindi diciamo che generiamo un punto come punto cinque virgola cinque, quindi la prossima cosa che facciamo è che abbiamo il

102
00:08:45,630 --> 00:08:50,500
nostro punto massimo che sarà sempre il massimo che potremmo fare.

103
00:08:50,550 --> 00:09:01,530
Quindi qualcosa come 12 80 per 720 o qualunque sia la dimensione della nostra finestra è 600 per 300 e poi li

104
00:09:01,870 --> 00:09:08,980
moltiplichiamo e finiamo con un nuovo punto che è in questo caso 300 virgola 150.

105
00:09:09,000 --> 00:09:15,000
Quindi è così che possiamo generare un punto massimo o casuale che esiste nell'area visibile.

106
00:09:15,010 --> 00:09:17,550
Sono attualmente area visibile della tela.

107
00:09:17,830 --> 00:09:23,660
OK, quindi ora cambiamo questo in modo che vada in punti.

108
00:09:24,900 --> 00:09:26,960
Diamo un'occhiata ora aggiorna.

109
00:09:26,980 --> 00:09:29,780
Colpisci qualsiasi tasto e finiamo con cerchi casuali.

110
00:09:29,790 --> 00:09:31,750
Ogni volta che premi un tasto.

111
00:09:32,340 --> 00:09:33,670
Ops.

112
00:09:34,140 --> 00:09:38,650
E se ridimensiono la finestra, facciamolo a metà strada.

113
00:09:39,720 --> 00:09:42,970
Ogni volta che preme il tasto lo vediamo ancora.

114
00:09:43,000 --> 00:09:47,730
Quindi non sta generando più punti qui che è bello.

115
00:09:47,760 --> 00:09:56,290
In modo che se la finestra si verifica per ridimensionare l'utente non deve aggiornare per ottenere una nuova nuova area visibile

116
00:09:56,380 --> 00:09:59,030
per ottenere tipi di numeri calcolati.

117
00:09:59,350 --> 00:09:59,850
Ok, bene.

118
00:09:59,860 --> 00:10:04,770
Ecco come generiamo un cerchio che vedi già, ma è come generiamo un cerchio quando

119
00:10:04,770 --> 00:10:06,870
l'utente tocca un tasto qualsiasi tasto.

120
00:10:07,200 --> 00:10:11,000
E abbiamo parlato di come fare un punto a caso nel prossimo video.

121
00:10:11,080 --> 00:10:16,740
Vedremo come possiamo fare alcune semplici animazioni cambiando prima i colori di questi punti e facendoli

122
00:10:16,750 --> 00:10:19,060
sfumare a colori diversi di tonalità differenti.

123
00:10:19,170 --> 00:10:21,450
E poi anche restringendoli.

124
00:10:21,580 --> 00:10:25,220
Quindi vedremo che il prossimo video e poi torneremo e aggiungeremo il suono.

125
00:10:25,330 --> 00:10:26,040
Nell'ultimo video