1
00:00:00,440 --> 00:00:00,840
ESTÁ BEM.

2
00:00:00,840 --> 00:00:01,770
Bem vindo de volta.

3
00:00:01,770 --> 00:00:07,420
Então, como mencionei neste vídeo, realmente começarei a trabalhar em um clone de ataque para animais de estimação aqui.

4
00:00:07,430 --> 00:00:13,220
Então, a primeira coisa que queremos fazer é descobrir como adicionar um círculo que realmente já

5
00:00:13,680 --> 00:00:21,570
vimos, mas queremos fazer algumas coisas em um círculo quando o usuário atinge qualquer chave no meu caso, eu só estou

6
00:00:21,570 --> 00:00:23,520
fazendo isso para seus filhos.

7
00:00:23,750 --> 00:00:25,730
Funciona da mesma maneira para qualquer outra chave.

8
00:00:25,800 --> 00:00:32,080
Então, quando um usuário atinge a chave em um círculo e então também precisamos descobrir a animação desse círculo.

9
00:00:32,610 --> 00:00:36,200
E, finalmente, queremos adicionar esse círculo a uma coordenada aleatória.

10
00:00:36,330 --> 00:00:41,890
Então, para começar, vamos tocar uma tecla e adicionar um círculo ao meio da tela.

11
00:00:42,570 --> 00:00:50,610
Então, vamos para os documentos do papel e dê uma olhada na interação e analise a interação do teclado.

12
00:00:51,690 --> 00:00:58,290
E eu sei que parece bem que não sabia por onde procurar aqui, mas na primeira vez que cheguei

13
00:00:58,290 --> 00:01:05,580
aqui, demorou muito mais para descobrir que acabei de passar pela maioria desses e procurei o teclado, basicamente, tentando dizer isso provavelmente

14
00:01:05,580 --> 00:01:11,820
Se eu estivesse fazendo isso de novo sozinho e não estive preparado para esse vídeo, levaria muito mais

15
00:01:11,820 --> 00:01:16,920
tempo para achar que eu talvez fizesse uma pesquisa de qualquer maneira, então é para

16
00:01:16,920 --> 00:01:18,810
baixo e apenas veja alguns exemplos.

17
00:01:18,840 --> 00:01:26,190
Este primeiro rapidamente aqui para se concentrar e, em seguida, pressione algumas teclas e diz-lhe qual a chave pressionada

18
00:01:26,190 --> 00:01:27,910
e quando foi lançado também.

19
00:01:28,350 --> 00:01:32,860
Então, agora estou pressionando K e depois solto.

20
00:01:33,150 --> 00:01:38,450
E se você olhar para o código é realmente fácil apenas com a chave para baixo e a Anchia.

21
00:01:38,520 --> 00:01:43,530
Portanto, não há nenhum documento no ouvinte do evento, não há ouvintes do evento Jay que são

22
00:01:43,530 --> 00:01:46,670
por trás dos bastidores documentados nos ouvintes do evento acontecendo.

23
00:01:46,920 --> 00:01:52,680
Mas para o roteiro em papel, só precisamos escrever esta linha super simples para que possamos aceitar

24
00:01:52,680 --> 00:01:57,210
que, na verdade, apenas copie isso, fará a chave para o nosso aplicativo.

25
00:01:57,360 --> 00:01:59,070
Queremos que o som seja reproduzido imediatamente.

26
00:01:59,070 --> 00:02:06,240
Então, ao pressionar a tecla não quando eu for solto, pensando que é um pouco mais lento, é como um piano que quando

27
00:02:06,240 --> 00:02:12,090
você atingiu um piano ou o ruído, o som que é gerado é gerado diretamente quando você pressiona a

28
00:02:12,090 --> 00:02:14,880
tecla ou logo depois, não quando você liberta.

29
00:02:15,240 --> 00:02:16,290
Então, faça a chave para baixo.

30
00:02:16,290 --> 00:02:21,440
Eu copiei isso e nós começaremos apenas fazendo um novo círculo, então precisamos desse código.

31
00:02:21,630 --> 00:02:24,310
Mas nós só queremos um, então não precisamos mais dos loops.

32
00:02:24,390 --> 00:02:30,870
Se livrar disso e vamos fazer esse novo círculo na chave para baixo.

33
00:02:32,220 --> 00:02:38,430
Então, esse processo é bastante realista, onde você está pegando peças diferentes e você está apenas juntando-se

34
00:02:38,430 --> 00:02:39,360
a elas.

35
00:02:39,810 --> 00:02:42,440
Então eu encontrei isso nos documentos na chave para baixo.

36
00:02:42,840 --> 00:02:43,730
Você pode se livrar disso.

37
00:02:43,860 --> 00:02:49,940
E eu encontrei isso nos documentos também e precisamos alterar esse X e Y não estão definidos.

38
00:02:50,010 --> 00:02:55,410
Então, vamos fazer isso em 100 vírgulas 100 e vamos fazer a cor de philaranja.

39
00:02:55,740 --> 00:02:58,380
Então, em baixo, execute este código.

40
00:02:59,280 --> 00:03:04,410
E novamente é muito diferente do que vimos ou documentamos um ouvinte de eventos.

41
00:03:04,410 --> 00:03:07,260
E então, teríamos que adicionar algum elemento.

42
00:03:07,410 --> 00:03:19,470
Então, nós teríamos que fazer como o selector de consulta de documentos de documentos algum elemento como um div dot adicionar o ouvinte de eventos e então teríamos

43
00:03:19,470 --> 00:03:23,300
que dizer que ele clicava ou pressionava ou pressionava.

44
00:03:23,400 --> 00:03:25,160
É muito mais código.

45
00:03:25,290 --> 00:03:28,950
Isso é feito para nós com a Paperchase realmente simples.

46
00:03:29,010 --> 00:03:32,070
Então, na chave, vamos ver o que acontece.

47
00:03:32,310 --> 00:03:37,650
Eu vou pressionar a tecla e acabamos com um círculo e toda vez que pressionar 1 eu recebo outro círculo.

48
00:03:37,710 --> 00:03:39,210
Você simplesmente não pode vê-lo.

49
00:03:39,690 --> 00:03:45,270
Então, agora vamos trabalhar sobre isso, de modo que estamos adicionando um círculo a um lugar aleatório na tela.

50
00:03:45,720 --> 00:03:52,140
E a maneira como fazemos isso realmente me levou um pouco de trabalho para descobrir que

51
00:03:52,380 --> 00:04:01,120
poderíamos fazê-lo nós mesmos, onde geramos dois números, basicamente, de zero até a largura máxima da nossa tela e, em seguida, o

52
00:04:01,800 --> 00:04:06,170
outro número de zero até a altura máxima da nossa tela.

53
00:04:06,570 --> 00:04:12,270
E isso não é muito trabalho, mas temos que descobrir a largura e a altura

54
00:04:12,270 --> 00:04:19,180
e as dimensões que, se você vá para a Paperchase e se olharmos para onde você faz referência.

55
00:04:20,010 --> 00:04:23,220
E então, quando isso é aberto, veja.

56
00:04:23,550 --> 00:04:27,080
E novamente eu encontrei isso alguns dias atrás, levei um pouco.

57
00:04:27,090 --> 00:04:35,040
Mas se olharmos para você e olhamos para os limites e ou talvez seja o tamanho do tamanho da área visível e

58
00:04:35,040 --> 00:04:36,390
das coordenadas do projeto.

59
00:04:36,390 --> 00:04:46,860
Então, se fizéssemos algo como cônsul que registraram o tamanho da vista que novamente eu encontrei aqui e atualizei a

60
00:04:46,860 --> 00:04:56,240
página e vejo o que recebemos, temos altura e largura para que possamos atingir essa altura e largura.

61
00:04:56,380 --> 00:05:05,290
Então, você não possui altura de ponto de tamanho e, em seguida, cancele esse log com o qual o tamanho começa

62
00:05:06,030 --> 00:05:09,370
e podemos usar essa atualização e eu prosequi.

63
00:05:10,020 --> 00:05:16,880
Atualmente, a visão do tamanho é de seiscentos e noventa e dois por setecentos.

64
00:05:17,100 --> 00:05:20,700
Mas se eu redimensioná-lo, você verá que muda a próxima vez.

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

66
00:05:22,240 --> 00:05:26,430
Então podemos usar isso para gerar esses dois pontos que precisamos.

67
00:05:26,640 --> 00:05:32,770
Mas a outra coisa que podemos fazer é que realmente existe um método construído

68
00:05:32,760 --> 00:05:38,570
que descobri que isso nos tornará um ponto aleatório, então vou mostrar-lhe isso também.

69
00:05:38,580 --> 00:05:46,890
Então, ao invés de ter que fazer matemática aleatoriamente, o que nos dá algo entre 1 0 e 1 não inclusivo e então temos que

70
00:05:47,150 --> 00:05:50,340
multiplicar isso e deslocá-lo para cima ou para baixo.

71
00:05:50,380 --> 00:05:51,960
É uma espécie de dor.

72
00:05:52,170 --> 00:05:58,500
Então, o que faremos em vez disso é usar este bom papel, J S, que eu encontrei parece assim.

73
00:05:58,500 --> 00:06:07,680
Então eu vou fazer um máximo de pontos para que o ponto máximo para o qual possamos adicionar um círculo seja um novo tamanho de

74
00:06:08,340 --> 00:06:10,170
ponto de exibição de ponto.

75
00:06:10,560 --> 00:06:15,700
E então queremos com vírgula que tamanho ponto altura.

76
00:06:15,720 --> 00:06:19,400
Então, x e y são máximo X ou máximo y.

77
00:06:20,160 --> 00:06:25,740
Então, isso faz com que nossos pontos máximos e eu lhe mostraremos

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

79
00:06:34,440 --> 00:06:42,450
fizermos um ponto constante de alt log Max, vamos e vamos realmente adicionar nosso círculo ao ponto máximo.

80
00:06:42,720 --> 00:06:47,720
Então, em vez de fazer um novo ponto aqui no 100 Kamo 100, vamos dar-lhe o ponto máximo.

81
00:06:47,940 --> 00:06:48,510
ESTÁ BEM.

82
00:06:48,900 --> 00:06:54,350
Então vamos tentar isso agora e livrar-se desses para atualizar a página.

83
00:06:54,510 --> 00:06:55,870
Eu bati uma tecla.

84
00:06:55,950 --> 00:06:58,580
Veja que temos um aqui mesmo no canto inferior direito.

85
00:06:58,590 --> 00:07:06,390
E se eu redimensioná-lo e fazê-lo novamente e eu acertar uma chave agora recebemos nosso ponto máximo aqui.

86
00:07:06,390 --> 00:07:14,250
que a área visível nesta tela altera nossas mudanças máximas de pontos, então não estamos sempre gerando um número aleatório entre você sabe as

87
00:07:14,250 --> 00:07:19,890
dimensões da tela ou mesmo o tamanho da janela porque assim que a área visível Não é

88
00:07:20,010 --> 00:07:25,540
mesmo a janela inteira, mas apenas a área visível na tela altera nosso ponto máximo de mudanças.

89
00:07:25,530 --> 00:07:29,940
Então, isso é bom porque, à medida que essa janela muda à medida

90
00:07:30,250 --> 00:07:32,740
OK então, temos isso.

91
00:07:33,150 --> 00:07:39,540
Agora o que queremos fazer é assumir esse ponto máximo e vamos gerar um ponto aleatório.

92
00:07:39,660 --> 00:07:46,810
Então, vamos chamá-lo de ponto aleatório e há um ponto de ponto de método aleatório e isso nos dará

93
00:07:46,800 --> 00:07:53,090
um ponto aleatório entre 0 e 1 não inclusivo, assim como mascote Rande, exceto com uma linha.

94
00:07:53,130 --> 00:07:54,960
Obtemos um objeto pontual.

95
00:07:55,480 --> 00:07:56,520
Então, basicamente, está fazendo isso.

96
00:07:56,520 --> 00:08:07,470
variável que chamaremos de ponto e é igual a pontos máximos, pontos aleatórios, assim como isso.

97
00:08:07,590 --> 00:08:19,060
Novos pontos, matemática, ponto, comma aleatória, matemática, ponto, aleatório, e, em seguida, desejamos que isso faça outra

98
00:08:19,120 --> 00:08:21,970
Então estamos multiplicando esses dois pontos juntos.

99
00:08:22,650 --> 00:08:32,310
É um monte de matemática estranha, mas basicamente estamos gerando um ponto entre 0 0 e 1 1, mas tecnicamente seria

100
00:08:32,310 --> 00:08:36,770
o ponto 9 9 9 9 e assim por diante.

101
00:08:36,880 --> 00:08:45,640
Então, digamos que geramos um ponto como ponto cinco, cinco, então a próxima coisa que fazemos é que temos o

102
00:08:45,630 --> 00:08:50,500
nosso ponto máximo, que sempre será o máximo que poderíamos fazer.

103
00:08:50,550 --> 00:09:01,530
Então, algo como 12 80 em 720 ou seja qual for o tamanho da nossa janela é de 600 por 300 e então nós

104
00:09:01,870 --> 00:09:08,980
as multiplicamos e acabamos com um novo ponto que é, neste caso, 300 vírgulas 150.

105
00:09:09,000 --> 00:09:15,000
Então, é assim que podemos gerar um ponto máximo ou aleatório que existe na área visível.

106
00:09:15,010 --> 00:09:17,550
São atualmente a área visível da tela.

107
00:09:17,830 --> 00:09:23,660
Ok então, vamos mudar isso para que isso vá para pontos.

108
00:09:24,900 --> 00:09:26,960
Vejamos agora atualizar.

109
00:09:26,980 --> 00:09:29,780
Acerte qualquer tecla e acabamos com círculos aleatórios.

110
00:09:29,790 --> 00:09:31,750
Toda vez que você pressiona uma tecla.

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

112
00:09:34,140 --> 00:09:38,650
E se eu redimensionar a janela, vamos fazer a meio caminho.

113
00:09:39,720 --> 00:09:42,970
Toda vez que pressiono a tecla, ainda a vemos.

114
00:09:43,000 --> 00:09:47,730
Então, não está gerando mais pontos por aqui, o que é bom.

115
00:09:47,760 --> 00:09:56,290
Então, se a janela acontecer para redimensionar, o usuário não precisa atualizar para obter uma nova área visível nova para

116
00:09:56,380 --> 00:09:59,030
obter um tipo de números calculados.

117
00:09:59,350 --> 00:09:59,850
Certo, ótimo.

118
00:09:59,860 --> 00:10:04,770
Então é assim que geramos um círculo no qual você já vê, mas é como geramos um círculo quando

119
00:10:04,770 --> 00:10:06,870
o usuário atinge uma chave de qualquer chave.

120
00:10:07,200 --> 00:10:11,000
E falamos sobre como fazer um ponto aleatório no próximo vídeo.

121
00:10:11,080 --> 00:10:16,740
Veremos como podemos fazer algumas animações simples, alterando primeiro as cores desses pontos e fazendo com que

122
00:10:16,750 --> 00:10:19,060
elas se desvanecem em diferentes cores diferentes.

123
00:10:19,170 --> 00:10:21,450
E depois também reduzindo-os.

124
00:10:21,580 --> 00:10:25,220
Então, veremos que o próximo vídeo e depois vamos voltar e adicionar som.

125
00:10:25,330 --> 00:10:26,040
No último video