DE ACUERDO.
Entonces, como mencioné, vamos a hacer un ejercicio rápido y va a ser muy decepcionante
en lo que respecta al producto final, pero es bueno solo para practicar con paperchase.
Entonces realmente 4 simples líneas de código que necesitas.
Todo lo que quiero es una grilla de círculos y las medidas exactas no importan. Lo que tengo aquí es
un círculo que comienza en cero cero y cada 100 píxeles.
Estoy dibujando otro círculo.
Creo que ese radio es 10 hasta el 1000.
Entonces esto es 1000 1000 aquí.
Por lo tanto, realmente no importa solo obtener 100 ish círculos en la pantalla, obviamente, sin hacerlo manualmente uno por
vez ese es el punto.
Entonces, ¿cómo puedes hacer eso?
Eso depende de usted.
Tendrá que descubrir cómo generar esas coordenadas xey que están aumentando.
Y siéntete libre de hacerlos todos morados o de cualquier color.
En realidad no es el punto o hacerles otra forma.
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
que a medida que X aumenta, el color se vuelve más rojo.
Recuerdo bien, supongo que realmente no recuerdo que no te he dicho esto, pero ese papel JSE
puede hacer colores RGV hexadecimales.
Entonces puede generar un color en el que incremente el componente rojo o ese componente verde.
Pero como mínimo, solo estoy buscando una grilla de círculos de al menos 100.
Y si tu quieres.
También podría aleatorizarlos para que estén por todos lados.
Solo quiero que obtengas muchos círculos en la página.
DE ACUERDO.
Así que toma un momento pausa un video.
Prueba esto por tu cuenta.
Te recomiendo que te pierdas.
Los documentos son un poco.
Prueba algunas cosas.
Mire los ejemplos y luego regrese y revisaremos la solución.
Todo bien.
Estupendo.
Así que esto es lo que tenía antes, donde lo dejé y voy a deshacerme de casi todo este código.
Entonces ya no queremos esa línea.
Cualquiera de eso.
Vamos a ver.
Resolvemos ese círculo gigante que realmente no necesitamos.
Vamos a querer mantener ese código para que sepamos cómo hacer un círculo, pero no queremos uno gigante.
Entonces, lo que queremos hacer aquí es usar un ciclo.
Así que queremos usar un círculo para hacer un círculo aquí y luego un círculo aquí aquí, básicamente, agregará
10 o 100 en realidad a la coordenada x para que podamos comenzar haciendo eso.
Así que haremos un ciclo y comenzaremos en cero loops por ahora.
Igual a cero.
Es menos divertido y esto puede ser cualquier cosa.
Lo hice como 1000.
Y en realidad me permite obtener X, así que es más claro.
Y cada vez que pasa.
En lugar de hacer X plus plus que podríamos usar para hacer un círculo, cada píxel hará saltos de
100 y luego todo lo que hará será copiar este código y hacer un círculo, pero lo modificaremos un poco si lo
dejamos.
Esto nos haría 10 círculos en el mismo punto, la misma raza.
Entonces, no lo que queremos, hagámoslo con X coma, y ​​y se fijará como 0.
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.
esa actualización, puedes ver aquí obtenemos 10 círculos que atraviesan cada 100 píxeles y obtenemos uno nuevo.
Y si echamos un vistazo a
Entonces, lo que queremos hacer es básicamente repetir eso de nuevo.
Así que tenemos nuestra primera vez.
Necesitamos una de estas filas 10 veces bajando.
Y la mejor manera de hacerlo es usando otro ciclo.
Entonces queremos tomar lo que tenemos aquí y simplemente repetir todo esto para poder hacer otro ciclo.
Y esta vez lo haremos por la coordenada y.
Entonces, ¿por qué debería subir y decir 1000 y más es igual a 100 también?
Y te explicaré exactamente cómo funciona esto.
Creo que los bucles anidados pueden ser un poco confusos
si simplemente cambiamos 0 para que sean y Ahora eso es todo lo que tenemos que hacer.
Así que vamos a actualizar para ver si obtenemos esa grilla.
Así que no es lo más emocionante, pero rápidamente agregamos un montón de círculos.
Así que echemos un vistazo a este ciclo anidado.
Así que dibujé un pequeño diagrama la primera vez que X comienza en cero.
Así que lo haré así, donde tenemos x e y.
DE ACUERDO.
Déjame capitalizarlo así que X comienza en cero.
Y luego, mientras X es 0, hacemos esta palabra de bucle Y comienza en cero.
Así.
Y luego la próxima vez a través de este ciclo y X todavía es cero.
Pero esta vez, ¿por qué es 100?
Porque agregamos cien y luego x sigue siendo cero e Y es 200.
Entonces X es cero.
¿Por qué es 300 y así sucesivamente?
Haré un punto punto punto y le digo a X que es cero.
¿Por qué 1000 es en realidad porque tenemos menos de lo que solo va a llegar a 900 y luego X
cambia a ser 100 y luego Y cambia para volver a cero.
Entonces, básicamente, para cada x estamos generando 10 y.
Entonces eso termina con nosotros teniendo 100 o 100 iteraciones.
Por lo tanto, es un poco confuso, pero ayuda si avanzas esta X comienza en cero y comienza en cero, pero luego
X se queda en 0 y y sube a 100 de 200.
Y estamos dibujando un círculo en cada uno de esos intel.
¿Por qué entonces se restablece y luego X va y se incrementa?
DE ACUERDO.
Así que, en mi opinión, es algo confuso.
Lo último que podemos hacer es un pequeño cambio.
En realidad no necesitamos guardar esto en una variable todo el tiempo.
Podemos cambiar esto de esta manera y es un poco más eficiente cuando no estamos reasignando una variable
constantemente porque nunca hacemos nada con esos círculos otra vez.
Solo los estamos haciendo una vez.
Entonces, en lugar de volver a escribir y volver a inicializar una variable cada vez que pasamos por
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.
Aquí vamos.
DE ACUERDO.
Así que esto fue un poco una diversión aquí, pero aún así es bastante importante.
Otra vez la motivación detrás de ti haciendo eso.
Espero que lo hayas hecho
Pero la motivación era que simplemente obtuvieras práctica combinando loops de habilidades de JavaScript con papel sí y viendo que todo lo
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
para hacer ese círculo De acuerdo, en el próximo video realmente se mostrará el show y comenzará
a trabajar realmente en nuestro clon de ataque de teclado.