1
00:00:00,440 --> 00:00:00,840
DE ACUERDO.

2
00:00:00,840 --> 00:00:01,770
Dar una buena acogida.

3
00:00:01,770 --> 00:00:07,420
Entonces, como mencioné en este video, empezaré a trabajar en un clon de ataque de mascotas aquí.

4
00:00:07,430 --> 00:00:13,220
Entonces, lo primero que queremos hacer es descubrir cómo agregar un círculo que ya hemos

5
00:00:13,680 --> 00:00:21,570
visto, pero queremos hacer algunas cosas en un círculo cuando el usuario toca una tecla; en mi caso, solo lo

6
00:00:21,570 --> 00:00:23,520
estoy haciendo. para sus hijos

7
00:00:23,750 --> 00:00:25,730
Funciona de la misma manera para cualquier otra tecla.

8
00:00:25,800 --> 00:00:32,080
Entonces, cuando un usuario toca la tecla en un círculo y luego también tenemos que averiguar la animación de ese círculo.

9
00:00:32,610 --> 00:00:36,200
Y, por último, queremos agregar ese círculo a una coordenada aleatoria.

10
00:00:36,330 --> 00:00:41,890
Entonces, para comenzar, solo tocaremos una tecla y agregaremos un círculo en el medio de la pantalla.

11
00:00:42,570 --> 00:00:50,610
Así que vamos a los documentos en papel y echamos un vistazo a la interacción y miramos la interacción del teclado.

12
00:00:51,690 --> 00:00:58,290
Y sé que parece que no sabía dónde buscar aquí, pero la primera vez que vine aquí me llevó mucho más

13
00:00:58,290 --> 00:01:05,580
tiempo encontrar que simplemente revisé la mayoría de estos y busqué el teclado básicamente tratando de decir que lo más probable si estuviera

14
00:01:05,580 --> 00:01:11,820
haciendo esto de nuevo solo y no me hubiera preparado para este video, me hubiera llevado mucho más tiempo encontrar

15
00:01:11,820 --> 00:01:16,920
que podría haber hecho una búsqueda de todos modos, así que es un desplazamiento hacia abajo

16
00:01:16,920 --> 00:01:18,810
y solo mirar algunos de los ejemplos.

17
00:01:18,840 --> 00:01:26,190
Este primero es rápido aquí para enfocar y luego presionar algunas teclas y te dice qué tecla se presionó

18
00:01:26,190 --> 00:01:27,910
y cuándo se lanzó también.

19
00:01:28,350 --> 00:01:32,860
Así que ahora estoy presionando K y luego soltándolo.

20
00:01:33,150 --> 00:01:38,450
Y si miras el código, es muy fácil simplemente presionando la tecla y Anchia arriba.

21
00:01:38,520 --> 00:01:43,530
Así que no hay ningún documento en el detector de eventos, no hay auditores de

22
00:01:43,530 --> 00:01:46,670
eventos Jay queery que estén documentados en el evento.

23
00:01:46,920 --> 00:01:52,680
Pero para el script en papel solo tenemos que escribir esta línea súper simple para que podamos tomar

24
00:01:52,680 --> 00:01:57,210
eso en realidad solo copie esto lo que hará que la tecla para nuestra aplicación.

25
00:01:57,360 --> 00:01:59,070
Queremos que el sonido se reproduzca de inmediato.

26
00:01:59,070 --> 00:02:06,240
Así que al presionar la tecla no cuando estoy liberado, pensando que es un poco más lento, es como un piano que

27
00:02:06,240 --> 00:02:12,090
cuando golpeas el piano o el ruido, el sonido que se genera se genera justo cuando presionas la

28
00:02:12,090 --> 00:02:14,880
tecla o hacia la derecha, no cuando tu sueltas

29
00:02:15,240 --> 00:02:16,290
Así que haré la tecla abajo.

30
00:02:16,290 --> 00:02:21,440
Copié eso y comenzaremos por hacer un nuevo círculo, así que necesitamos este código.

31
00:02:21,630 --> 00:02:24,310
Pero solo queremos uno, así que ya no necesitamos los bucles.

32
00:02:24,390 --> 00:02:30,870
Deshágase de eso y haremos ese nuevo círculo en la tecla.

33
00:02:32,220 --> 00:02:38,430
Entonces, este proceso es bastante realista en el que se toman diferentes piezas y se las arregla

34
00:02:38,430 --> 00:02:39,360
de forma conjunta.

35
00:02:39,810 --> 00:02:42,440
Así que encontré esto en los documentos en la tecla.

36
00:02:42,840 --> 00:02:43,730
Puedes deshacerte de eso.

37
00:02:43,860 --> 00:02:49,940
Y también encontré esto en los documentos y necesitamos cambiar esta X e Y no están definidas.

38
00:02:50,010 --> 00:02:55,410
Así que hagámoslo a 100 comas 100 y hagamos Phil color naranja.

39
00:02:55,740 --> 00:02:58,380
Entonces, abajo, ejecuta este código.

40
00:02:59,280 --> 00:03:04,410
Y de nuevo es muy diferente de lo que hemos visto o hemos documentado un oyente de eventos.

41
00:03:04,410 --> 00:03:07,260
Y luego tendríamos que agregar algún elemento.

42
00:03:07,410 --> 00:03:19,470
Así que tendríamos que hacer como un selector de consulta de punto de documento, algún elemento como un oyente de evento de adición de punto div, y luego tendríamos que decirlo, haga

43
00:03:19,470 --> 00:03:23,300
clic o presione la tecla o la tecla hacia arriba.

44
00:03:23,400 --> 00:03:25,160
Es mucho más código.

45
00:03:25,290 --> 00:03:28,950
Esto se hace para nosotros con Paperchase realmente simple.

46
00:03:29,010 --> 00:03:32,070
Entonces, al presionar la tecla vamos a ver qué sucede.

47
00:03:32,310 --> 00:03:37,650
Voy a presionar la tecla y terminamos con un círculo y cada vez que presiono 1 obtengo otro círculo.

48
00:03:37,710 --> 00:03:39,210
Usted simplemente no puede verlo.

49
00:03:39,690 --> 00:03:45,270
Así que ahora vamos a trabajar en esto para que estemos agregando un círculo a un lugar aleatorio en la pantalla.

50
00:03:45,720 --> 00:03:52,140
Y la forma en que lo hacemos realmente me tomó un poco de trabajo para encontrar

51
00:03:52,380 --> 00:04:01,120
que podíamos hacerlo nosotros mismos donde generamos dos números básicamente desde cero hasta el ancho máximo de nuestra pantalla y luego el

52
00:04:01,800 --> 00:04:06,170
otro número desde cero hasta hasta la altura máxima de nuestra pantalla.

53
00:04:06,570 --> 00:04:12,270
Y eso no es demasiado trabajo, pero tenemos que averiguar el ancho y la

54
00:04:12,270 --> 00:04:19,180
altura y las dimensiones que si vas a Paperchase y si miramos a dónde hace referencia.

55
00:04:20,010 --> 00:04:23,220
Y luego, cuando está abierto, mira a la vista.

56
00:04:23,550 --> 00:04:27,080
Y de nuevo acabo de encontrar esto hace unos días, me tomó un poco.

57
00:04:27,090 --> 00:04:35,040
Pero si te miramos y miramos los límites y tal vez el tamaño del área visible y las

58
00:04:35,040 --> 00:04:36,390
coordenadas del proyecto.

59
00:04:36,390 --> 00:04:46,860
Entonces, si hicimos algo como cónsul que registra el tamaño de la vista que nuevamente acabo de encontrar aquí y actualizo la

60
00:04:46,860 --> 00:04:56,240
página y veo lo que obtenemos, obtenemos altura y ancho para que podamos tomar esa altura y ese ancho.

61
00:04:56,380 --> 00:05:05,290
Entonces no tienes el tamaño de la altura de los puntos y luego cancelas el registro con el que comienzas ese

62
00:05:06,030 --> 00:05:09,370
tamaño y podremos usar esa actualización y prosequi.

63
00:05:10,020 --> 00:05:16,880
Actualmente la vista de ese tamaño es seiscientos noventa y dos por setecientos.

64
00:05:17,100 --> 00:05:20,700
Pero si cambio el tamaño, verá que cambia la próxima vez.

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

66
00:05:22,240 --> 00:05:26,430
Entonces podemos usar eso para generar esos dos puntos que necesitamos.

67
00:05:26,640 --> 00:05:32,770
Pero la otra cosa que podemos hacer es que hay un método integrado que

68
00:05:32,760 --> 00:05:38,570
descubrí que nos convertirá en puntos aleatorios, así que te mostraré eso también.

69
00:05:38,580 --> 00:05:46,890
Entonces, en lugar de tener que hacer matemática al azar, lo que nos da algo entre 1 0 y 1 no inclusivo,

70
00:05:47,150 --> 00:05:50,340
entonces tenemos que multiplicar eso y subirlo o bajarlo.

71
00:05:50,380 --> 00:05:51,960
Es una especie de dolor.

72
00:05:52,170 --> 00:05:58,500
Entonces, lo que haremos en su lugar es usar este bonito papel J S estilo que encontré se ve así.

73
00:05:58,500 --> 00:06:07,680
Así que voy a hacer un máximo de puntos, así que el punto máximo al que podemos agregar un círculo será el nuevo tamaño de punto

74
00:06:08,340 --> 00:06:10,170
de la vista de puntos.

75
00:06:10,560 --> 00:06:15,700
Y luego queremos con una coma de ese tamaño de altura de punto.

76
00:06:15,720 --> 00:06:19,400
Entonces, xey son máximo X o máximo y.

77
00:06:20,160 --> 00:06:25,740
Así que eso hace nuestros puntos máximos y te mostraré si

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

79
00:06:34,440 --> 00:06:42,450
un punto máximo de alt log constante allí vamos y realmente agreguemos nuestro círculo al punto máximo.

80
00:06:42,720 --> 00:06:47,720
Entonces, en lugar de hacer un nuevo punto aquí en 100 Kamo 100, solo le daremos el punto Max.

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

82
00:06:48,900 --> 00:06:54,350
Así que vamos a probarlo ahora y deshacernos de ellos para actualizar la página.

83
00:06:54,510 --> 00:06:55,870
Presiono una tecla.

84
00:06:55,950 --> 00:06:58,580
Mira, obtenemos uno aquí abajo, en la esquina inferior derecha.

85
00:06:58,590 --> 00:07:06,390
Y si cambio el tamaño y lo vuelvo a hacer, y presiono una tecla, ahora obtenemos nuestro punto máximo aquí.

86
00:07:06,390 --> 00:07:14,250
área visible de este lienzo, nuestro punto máximo cambia, por lo que no siempre generamos un número aleatorio entre las dimensiones de nuestra pantalla

87
00:07:14,250 --> 00:07:19,890
o incluso el tamaño de la ventana, ya que tan pronto como el área visible ni siquiera

88
00:07:20,010 --> 00:07:25,540
es toda la ventana, solo el área visible en el lienzo cambia nuestros cambios de punto máximo.

89
00:07:25,530 --> 00:07:29,940
Esto es bueno porque cuando esa ventana cambia a medida que cambia el

90
00:07:30,250 --> 00:07:32,740
OK, entonces tenemos eso.

91
00:07:33,150 --> 00:07:39,540
Ahora lo que queremos hacer es tomar ese punto máximo y vamos a generar un punto aleatorio.

92
00:07:39,660 --> 00:07:46,810
Así que lo llamaremos punto aleatorio y hay un método punto punto aleatorio que nos dará un punto aleatorio

93
00:07:46,800 --> 00:07:53,090
entre 0 y 1 no inclusivo al igual que la mascota Rande excepto con una línea.

94
00:07:53,130 --> 00:07:54,960
Obtenemos un objeto puntual

95
00:07:55,480 --> 00:07:56,520
Entonces básicamente está haciendo esto.

96
00:07:56,520 --> 00:08:07,470
que llamaremos solo punto y es igual a puntos máx. Por punto aleatorio así como así.

97
00:08:07,590 --> 00:08:19,060
Nuevos puntos matemáticos punto aleatorio coma matemático punto aleatorio y luego queremos tomar esa otra variable

98
00:08:19,120 --> 00:08:21,970
Entonces estamos multiplicando esos dos puntos juntos.

99
00:08:22,650 --> 00:08:32,310
Son un poco extrañas las matemáticas, pero básicamente estamos generando un punto entre 0 0 y 1 1, pero técnicamente sería

100
00:08:32,310 --> 00:08:36,770
el punto 9 9 9 9 y así sucesivamente.

101
00:08:36,880 --> 00:08:45,640
Entonces digamos que generamos un punto como punto cinco punto cinco, entonces lo siguiente que hacemos es tener nuestro

102
00:08:45,630 --> 00:08:50,500
punto máximo que siempre será el máximo que podríamos hacer.

103
00:08:50,550 --> 00:09:01,530
Así que algo así como 12 80 por 720 o cualquiera que sea el tamaño de nuestra ventana es 600 por 300 y luego los

104
00:09:01,870 --> 00:09:08,980
multiplicamos juntos y terminamos con un nuevo punto que en este caso es 300 coma 150.

105
00:09:09,000 --> 00:09:15,000
Entonces, así es como podemos generar un punto máximo o aleatorio que existe en el área visible.

106
00:09:15,010 --> 00:09:17,550
¿Son actualmente el área visible del lienzo?

107
00:09:17,830 --> 00:09:23,660
OK, ahora vamos a cambiar esto para que vaya a los puntos.

108
00:09:24,900 --> 00:09:26,960
Echemos un vistazo ahora actualizar

109
00:09:26,980 --> 00:09:29,780
Presiona cualquier tecla y terminamos con círculos al azar.

110
00:09:29,790 --> 00:09:31,750
Cada vez que presionas una tecla.

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

112
00:09:34,140 --> 00:09:38,650
Y si cambio el tamaño de la ventana, hagámoslo hasta la mitad.

113
00:09:39,720 --> 00:09:42,970
Cada vez que presiono la tecla todavía la veo.

114
00:09:43,000 --> 00:09:47,730
Así que ya no está generando puntos aquí, lo que es bueno.

115
00:09:47,760 --> 00:09:56,290
De modo que si la ventana cambia de tamaño, el usuario no tiene que actualizar para obtener una nueva área

116
00:09:56,380 --> 00:09:59,030
visible para obtener los números calculados.

117
00:09:59,350 --> 00:09:59,850
Bien, excelente.

118
00:09:59,860 --> 00:10:04,770
Entonces, así es como generamos un círculo que ya ves, pero es cómo generamos un círculo cuando el

119
00:10:04,770 --> 00:10:06,870
usuario pulsa una tecla en cualquier tecla.

120
00:10:07,200 --> 00:10:11,000
Y hablamos sobre cómo hacer un punto al azar en el próximo video.

121
00:10:11,080 --> 00:10:16,740
Veremos cómo podemos hacer algunas animaciones simples cambiando primero los colores de estos puntos y haciendo que se

122
00:10:16,750 --> 00:10:19,060
desvanezcan en diferentes tonos de diferentes colores.

123
00:10:19,170 --> 00:10:21,450
Y luego también encogiéndolos.

124
00:10:21,580 --> 00:10:25,220
Veremos el siguiente video y luego volveremos y agregaremos sonido.

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