1
00:00:00,290 --> 00:00:00,650
DE ACUERDO.

2
00:00:00,690 --> 00:00:05,850
Entonces, como mencioné, vamos a hacer un ejercicio rápido y va a ser muy decepcionante

3
00:00:05,850 --> 00:00:11,030
en lo que respecta al producto final, pero es bueno solo para practicar con paperchase.

4
00:00:11,100 --> 00:00:14,920
Entonces realmente 4 simples líneas de código que necesitas.

5
00:00:15,150 --> 00:00:23,520
Todo lo que quiero es una grilla de círculos y las medidas exactas no importan. Lo que tengo aquí es

6
00:00:23,640 --> 00:00:28,410
un círculo que comienza en cero cero y cada 100 píxeles.

7
00:00:28,620 --> 00:00:29,750
Estoy dibujando otro círculo.

8
00:00:29,750 --> 00:00:33,720
Creo que ese radio es 10 hasta el 1000.

9
00:00:33,720 --> 00:00:36,540
Entonces esto es 1000 1000 aquí.

10
00:00:37,260 --> 00:00:43,680
Por lo tanto, realmente no importa solo obtener 100 ish círculos en la pantalla, obviamente, sin hacerlo manualmente uno por

11
00:00:43,680 --> 00:00:45,380
vez ese es el punto.

12
00:00:45,390 --> 00:00:46,830
Entonces, ¿cómo puedes hacer eso?

13
00:00:46,890 --> 00:00:48,240
Eso depende de usted.

14
00:00:48,270 --> 00:00:53,220
Tendrá que descubrir cómo generar esas coordenadas xey que están aumentando.

15
00:00:53,760 --> 00:00:57,440
Y siéntete libre de hacerlos todos morados o de cualquier color.

16
00:00:57,460 --> 00:01:00,250
En realidad no es el punto o hacerles otra forma.

17
00:01:00,270 --> 00:01:07,140
Así que intente hacer un cuadrado o un rectángulo o intente algo más divertido donde tenga los colores en un degradado de modo

18
00:01:07,410 --> 00:01:10,810
que a medida que X aumenta, el color se vuelve más rojo.

19
00:01:10,970 --> 00:01:16,410
Recuerdo bien, supongo que realmente no recuerdo que no te he dicho esto, pero ese papel JSE

20
00:01:16,410 --> 00:01:17,840
puede hacer colores RGV hexadecimales.

21
00:01:17,970 --> 00:01:23,610
Entonces puede generar un color en el que incremente el componente rojo o ese componente verde.

22
00:01:23,820 --> 00:01:28,670
Pero como mínimo, solo estoy buscando una grilla de círculos de al menos 100.

23
00:01:28,700 --> 00:01:29,260
Y si tu quieres.

24
00:01:29,270 --> 00:01:32,770
También podría aleatorizarlos para que estén por todos lados.

25
00:01:32,850 --> 00:01:34,940
Solo quiero que obtengas muchos círculos en la página.

26
00:01:35,010 --> 00:01:35,530
DE ACUERDO.

27
00:01:35,610 --> 00:01:37,540
Así que toma un momento pausa un video.

28
00:01:37,680 --> 00:01:39,020
Prueba esto por tu cuenta.

29
00:01:39,030 --> 00:01:40,380
Te recomiendo que te pierdas.

30
00:01:40,380 --> 00:01:41,400
Los documentos son un poco.

31
00:01:41,430 --> 00:01:42,370
Prueba algunas cosas.

32
00:01:42,390 --> 00:01:51,110
Mire los ejemplos y luego regrese y revisaremos la solución.

33
00:01:51,120 --> 00:01:51,480
Todo bien.

34
00:01:51,480 --> 00:01:52,570
Estupendo.

35
00:01:52,590 --> 00:01:58,780
Así que esto es lo que tenía antes, donde lo dejé y voy a deshacerme de casi todo este código.

36
00:01:58,950 --> 00:02:00,940
Entonces ya no queremos esa línea.

37
00:02:01,230 --> 00:02:02,940
Cualquiera de eso.

38
00:02:02,940 --> 00:02:03,930
Vamos a ver.

39
00:02:03,930 --> 00:02:07,330
Resolvemos ese círculo gigante que realmente no necesitamos.

40
00:02:07,470 --> 00:02:12,780
Vamos a querer mantener ese código para que sepamos cómo hacer un círculo, pero no queremos uno gigante.

41
00:02:12,960 --> 00:02:15,500
Entonces, lo que queremos hacer aquí es usar un ciclo.

42
00:02:15,930 --> 00:02:23,070
Así que queremos usar un círculo para hacer un círculo aquí y luego un círculo aquí aquí, básicamente, agregará

43
00:02:23,070 --> 00:02:28,610
10 o 100 en realidad a la coordenada x para que podamos comenzar haciendo eso.

44
00:02:28,800 --> 00:02:34,080
Así que haremos un ciclo y comenzaremos en cero loops por ahora.

45
00:02:34,110 --> 00:02:35,360
Igual a cero.

46
00:02:35,650 --> 00:02:38,110
Es menos divertido y esto puede ser cualquier cosa.

47
00:02:38,130 --> 00:02:40,080
Lo hice como 1000.

48
00:02:40,140 --> 00:02:43,980
Y en realidad me permite obtener X, así que es más claro.

49
00:02:45,300 --> 00:02:46,780
Y cada vez que pasa.

50
00:02:46,800 --> 00:02:54,540
En lugar de hacer X plus plus que podríamos usar para hacer un círculo, cada píxel hará saltos de

51
00:02:54,870 --> 00:03:04,020
100 y luego todo lo que hará será copiar este código y hacer un círculo, pero lo modificaremos un poco si lo

52
00:03:05,220 --> 00:03:05,890
dejamos.

53
00:03:05,930 --> 00:03:09,960
Esto nos haría 10 círculos en el mismo punto, la misma raza.

54
00:03:09,960 --> 00:03:19,050
Entonces, no lo que queremos, hagámoslo con X coma, y ​​y se fijará como 0.

55
00:03:19,860 --> 00:03:27,260
Así que eso debería convertirnos en una línea de círculos, todos con una coordenada y de cero y un radio de 10.

56
00:03:27,330 --> 00:03:35,840
esa actualización, puedes ver aquí obtenemos 10 círculos que atraviesan cada 100 píxeles y obtenemos uno nuevo.

57
00:03:35,850 --> 00:03:38,640
Y si echamos un vistazo a

58
00:03:38,670 --> 00:03:42,790
Entonces, lo que queremos hacer es básicamente repetir eso de nuevo.

59
00:03:42,930 --> 00:03:45,670
Así que tenemos nuestra primera vez.

60
00:03:45,900 --> 00:03:49,700
Necesitamos una de estas filas 10 veces bajando.

61
00:03:49,980 --> 00:03:52,790
Y la mejor manera de hacerlo es usando otro ciclo.

62
00:03:53,070 --> 00:03:58,820
Entonces queremos tomar lo que tenemos aquí y simplemente repetir todo esto para poder hacer otro ciclo.

63
00:03:59,340 --> 00:04:02,990
Y esta vez lo haremos por la coordenada y.

64
00:04:03,060 --> 00:04:09,240
Entonces, ¿por qué debería subir y decir 1000 y más es igual a 100 también?

65
00:04:09,540 --> 00:04:12,130
Y te explicaré exactamente cómo funciona esto.

66
00:04:12,150 --> 00:04:14,520
Creo que los bucles anidados pueden ser un poco confusos

67
00:04:17,490 --> 00:04:21,560
si simplemente cambiamos 0 para que sean y Ahora eso es todo lo que tenemos que hacer.

68
00:04:21,990 --> 00:04:24,940
Así que vamos a actualizar para ver si obtenemos esa grilla.

69
00:04:25,080 --> 00:04:29,880
Así que no es lo más emocionante, pero rápidamente agregamos un montón de círculos.

70
00:04:29,910 --> 00:04:32,430
Así que echemos un vistazo a este ciclo anidado.

71
00:04:32,460 --> 00:04:37,210
Así que dibujé un pequeño diagrama la primera vez que X comienza en cero.

72
00:04:37,800 --> 00:04:43,610
Así que lo haré así, donde tenemos x e y.

73
00:04:44,220 --> 00:04:44,910
DE ACUERDO.

74
00:04:44,910 --> 00:04:48,970
Déjame capitalizarlo así que X comienza en cero.

75
00:04:50,460 --> 00:04:55,840
Y luego, mientras X es 0, hacemos esta palabra de bucle Y comienza en cero.

76
00:04:56,280 --> 00:04:58,540
Así.

77
00:04:59,400 --> 00:05:03,460
Y luego la próxima vez a través de este ciclo y X todavía es cero.

78
00:05:03,660 --> 00:05:06,210
Pero esta vez, ¿por qué es 100?

79
00:05:06,210 --> 00:05:13,610
Porque agregamos cien y luego x sigue siendo cero e Y es 200.

80
00:05:14,130 --> 00:05:15,350
Entonces X es cero.

81
00:05:15,390 --> 00:05:18,090
¿Por qué es 300 y así sucesivamente?

82
00:05:18,280 --> 00:05:21,260
Haré un punto punto punto y le digo a X que es cero.

83
00:05:21,660 --> 00:05:31,800
¿Por qué 1000 es en realidad porque tenemos menos de lo que solo va a llegar a 900 y luego X

84
00:05:31,800 --> 00:05:37,590
cambia a ser 100 y luego Y cambia para volver a cero.

85
00:05:38,460 --> 00:05:44,690
Entonces, básicamente, para cada x estamos generando 10 y.

86
00:05:44,970 --> 00:05:49,500
Entonces eso termina con nosotros teniendo 100 o 100 iteraciones.

87
00:05:49,530 --> 00:05:56,400
Por lo tanto, es un poco confuso, pero ayuda si avanzas esta X comienza en cero y comienza en cero, pero luego

88
00:05:56,400 --> 00:06:00,210
X se queda en 0 y y sube a 100 de 200.

89
00:06:00,210 --> 00:06:03,370
Y estamos dibujando un círculo en cada uno de esos intel.

90
00:06:03,420 --> 00:06:07,590
¿Por qué entonces se restablece y luego X va y se incrementa?

91
00:06:07,890 --> 00:06:08,250
DE ACUERDO.

92
00:06:08,250 --> 00:06:12,060
Así que, en mi opinión, es algo confuso.

93
00:06:12,060 --> 00:06:15,000
Lo último que podemos hacer es un pequeño cambio.

94
00:06:15,000 --> 00:06:18,430
En realidad no necesitamos guardar esto en una variable todo el tiempo.

95
00:06:19,230 --> 00:06:26,070
Podemos cambiar esto de esta manera y es un poco más eficiente cuando no estamos reasignando una variable

96
00:06:26,070 --> 00:06:29,740
constantemente porque nunca hacemos nada con esos círculos otra vez.

97
00:06:30,120 --> 00:06:31,290
Solo los estamos haciendo una vez.

98
00:06:31,410 --> 00:06:37,650
Entonces, en lugar de volver a escribir y volver a inicializar una variable cada vez que pasamos por

99
00:06:37,650 --> 00:06:45,730
el ciclo, simplemente hacemos un nuevo círculo, le damos un color de relleno de color morado, o vamos a hacer amarillo, guardamos la actualización.

100
00:06:45,900 --> 00:06:46,560
Aquí vamos.

101
00:06:46,800 --> 00:06:47,220
DE ACUERDO.

102
00:06:47,370 --> 00:06:52,560
Así que esto fue un poco una diversión aquí, pero aún así es bastante importante.

103
00:06:52,560 --> 00:06:54,680
Otra vez la motivación detrás de ti haciendo eso.

104
00:06:54,690 --> 00:06:55,380
Espero que lo hayas hecho

105
00:06:55,400 --> 00:07:02,010
Pero la motivación era que simplemente obtuvieras práctica combinando loops de habilidades de JavaScript con papel sí y viendo que todo lo

106
00:07:02,070 --> 00:07:08,550
que tienes que hacer es llamar a una corta línea de código y ejecutar un montón de código detrás de las escenas

107
00:07:08,550 --> 00:07:13,620
para hacer ese círculo De acuerdo, en el próximo video realmente se mostrará el show y comenzará

108
00:07:13,620 --> 00:07:16,810
a trabajar realmente en nuestro clon de ataque de teclado.