Transcripciones
1. Promocional: Hola, me llamo Saran. En este curso, te mostraré cómo hacer un juego clásico de Flappy Bird simple, fácil de seguir, usando JavaScript y marco P5. Estaremos utilizando un editor en línea gratuito que se ejecuta en cualquier navegador web. Te mostraré cómo dibujar las formas básicas, y hacer que un objeto se mueva. Entonces dibujaré un pájaro, lo
haré caer al suelo simulando la gravedad. Haz saltar el pájaro, y haz que deje de saltar cuando esté muerto. Entonces crearía las tuberías móviles, y añadiría la detección de colisión a las tuberías. Por último, sumaré el sistema de puntuación y lo haré más difícil. Puedes seguirme para más tutoriales de juegos. Ahora abramos la siguiente lección, ¡y empecemos!
2. Fundamentos: En este primer video, hablaremos de los conceptos básicos del framework P5.js. Abra un navegador, y vaya a editor.p5js.org. En esta pantalla, tenemos el panel de codificación a la izquierda, y una vista previa a la derecha. Haga clic en el botón Ejecutar, para ejecutar el código. El resultado se mostrará a la derecha. Te recomiendo crear una cuenta de inmediato, porque puedes guardar los proyectos y evitar, accidentalmente, refrescar el sitio, lo que despeja el progreso que has realizado. Una vez que hagas eso, cambia el nombre del título a “Flappy Bird”, y guárdelo. Puedes navegar por tus proyectos guardados en el menú Abrir. Para que sea más fácil ver, partir de ahora
estaremos usando el tema oscuro. Aquí, tenemos dos funciones básicas: la función de configuración, y la función de dibujo. La función de configuración contiene código para asignar los valores iniciales. código dentro de los corchetes rizados se ejecutará sólo una vez al principio. En él, hay una función en el interior — CreateCanvas, que establece la pantalla de visualización en 400 píxeles de ancho, y 400 píxeles de altura. Podemos cambiar el ancho a 600. A continuación, haga clic en ejecutar, para ver el cambio. Volvamos a cambiarlo a 400. En la función de dibujo, hemos llamado a una función de fondo que pinta toda la pantalla con 220. 220 es un color gris claro en la escala de grises. Cámbialo a 0 para el color más oscuro, o 255, para el color más brillante. Para otros colores, podemos google “Selector de color RGB”, y escoger el color que queremos. En este caso, queremos un color de un cielo azul. Después, copie estos números RGB, y colóquelos dentro de los paréntesis de fondo. Cuando tocamos run, se llama al código en la función de configuración. Entonces se llama repetidamente a la función de sorteo, que significa que lo que esté dentro de la función de sorteo se está llamando 60 veces por segundo, o 60 FPS por defecto. Por ejemplo, si llamamos a una función print, paréntesis, frameCount, y hit run. Veremos que imprime el FrameCount a la ventana de la consola a continuación, a razón de 60 líneas por segundo. Podemos ralentizarlo configurando el FrameRate en 1 fotograma por segundo. Ahora en la consola, dibuja el cielo azul, e imprime el recuento de marcos cada segundo. 60 es la tasa por defecto. Entonces vamos a quitar eso. Hablemos del sistema de coordenadas. En la mayoría de los motores de juego 2D, el origen comienza en la esquina superior izquierda, donde la posición x es 0 y la posición y es 0. Mover a la derecha aumenta el valor x. Mover a la baja aumenta al valor y. Esto es lo contrario de lo que utiliza un sistema de coordenadas normal. Entonces, por favor, ten eso en cuenta. A continuación, dibujemos las formas básicas que usaremos en nuestro juego. El primero es un rectángulo. Haré un comentario aquí. No es necesario apuntar. Llamaríamos a una función rect la cual necesita 4 parámetros de entrada. posición x, posición y, su ancho, y su altura. Para dibujar un rectángulo de 60 x 30 en la esquina superior izquierda, llamamos rect x 0, y 0, ancho 60, y altura 30. El x e y en un rectángulo definen dónde debe estar la posición superior izquierda. Por lo que podemos decir que el pivote está en la esquina superior izquierda. Para mover el rectángulo hacia el centro. Cambiaremos la posición x a ancho/2, e y a altura/2. Ancho y altura resaltados en rosa son las variables constantes del lienzo —desde aquí. El siguiente forma es una elipse. Para dibujar una elipse, necesitamos especificar 4 parámetros. x, y, diámetro horizontal, y diámetro vertical. Si el diámetro horizontal y el diámetro vertical son iguales, es un círculo. Dibujemos un círculo en la parte superior del rectángulo. elipse, paréntesis, mitad del ancho, la mitad hasta la altura. El diámetro horizontal es de 50, y el diámetro vertical también es de 50. Corriéndolo. A diferencia de un rectángulo donde el pivote está en la esquina superior izquierda, un pivote de elipse está en el centro. A continuación, hablemos de cambiar de color. Para cambiar el color de este rectángulo, llamamos a una función de relleno antes de dibujar el rectángulo, Las pocas funciones utilizan los mismos tipos de parámetros que la función de fondo. Podría ser 1 número de escala de grises, o 3 números RGB. Si quiero llenar el rectángulo con un color verde, sería, relleno, rojo 0, verde 255, y azul 0. Después de dibujar el rectángulo, podría cambiar el color de relleno a rojo. Entonces rellena, rojo 255, verde 0, y azul 0. Para eliminar los contornos, utilice NoStroke en la función de configuración. Por último, hablemos de la animación. A pesar de que en la pantalla anterior, parece una imagen fija, la función de dibujo se está ejecutando 60 veces por segundo. Cambiemos la posición x a FrameCount. Porque el FrameCount sube por 1 en cada fotograma. Cuando se llama a la función de dibujo, el rectángulo ahora se mueve hacia la derecha, comenzando en 1. Y eventualmente viaja fuera de la pantalla. Ahora que hemos cubierto lo básico, en el siguiente video, vamos a crear un Flappy Bird. Gracias.
3. ave: En este video, usaremos clase en JavaScript. Para conocer más al respecto, recomiendo una lectura rápida desde la página web de W3Schools. Para que nuestro código sea fácil de organizar, crearemos una clase de pájaro en un nuevo archivo. Haga clic en el icono de flecha para mostrar la carpeta de boceto. A continuación, haga clic en Crear archivo, nombre un archivo “bird.js”. Vaya al archivo index.html, y agregue bird.js, como parte de los scripts. Este bird.js abierto, vamos a crear una clase de pájaro,
clase, Pájaro, y un par de corchetes. Necesitamos un constructor para crear un objeto de pájaro. constructor, paréntesis y corchetes. Aquí, inicializaremos la posición X e Y del ave. esto, punto, que se refiere a las variables dentro de la clase. Entonces x equivale a 1/3 del ancho de pantalla, esto.y equivale a la mitad de la altura de la pantalla. También necesitamos definir el tamaño del ave. Hagámoslo 5% del ancho de la pantalla, también, la clase pájaro debe manejar su propio dibujo. Por lo que crearemos una función de dibujo, que se llamará más adelante en el archivo de boceto. Y dibujemos un círculo usando la variable local x e y, elipse, esta x, esta y, su tamaño para el ancho, y su tamaño para la altura. Después ve al archivo de boceto, En la parte superior, crea una variable global llamada bird. En la configuración, inicializar el ave haciéndolo igual a nuevo Bird, paréntesis. Después en la función de dibujo, dibuja el pájaro, pájaro, dibujo de puntos. Ejecutarlo. Ahora le mostramos al pájaro. Terminemos esto cambiando su color. Voy a volver a usar el recolector de color, y escoger un color amarillo. Copia sus números RGB. Después agrega una función de relleno, pega el número en, y eso es todo. En el siguiente video, agregaremos física al juego. Gracias.
4. Gota: Hablemos un poco de la aceleración de los objetos en movimiento. Para hacer que un objeto se mueva, tenemos que cambiar constantemente su posición. Por ejemplo, tengo la velocidad establecida en 1,
y vamos a sumar la velocidad a la posición x. la nueva x, igual, la antigua x, plus, velocidad. Por lo que podríamos decir que este bloque se mueve a la velocidad constante de 1 píxel por fotograma. Ahora bien, si queremos moverlo cada vez más rápido, cuando pase el tiempo, podríamos aumentar la velocidad en cada fotograma, agregándole otra variable, a que podemos llamarle aceleración. Si la aceleración es igual a 1, significa que la velocidad comenzaría desde 1, luego 2, luego 3, y así sucesivamente. Podríamos simular un objeto cayendo usando este concepto. De vuelta a la clase Bird, vamos a simular la gravedad creando primero una velocidad en la dirección y. esto.vy es igual a 1. Después, antes de dibujar el ave, agregue la velocidad a la posición y. El nuevo y es igual al viejo y, más velocidad y Ahora se mueve hacia abajo a la velocidad constante. Presentaremos la aceleración. Establece vy en 0. A continuación, añadir ay es igual a 0.15. Antes de actualizar la posición y, aumentaremos la velocidad. El nuevo vy es el viejo vy, además ay. A pesar de que ay, es apenas 0.15, la velocidad se suma, y el pájaro está volando fuera de la pantalla. Necesitamos un piso en la parte inferior. Entonces cuando el pájaro golpea el piso, termina
el juego, y debe dejar de moverse. Vaya al archivo de boceto, cree una variable global, FloorY. Establezcamos el piso para que esté en el 90% de la altura de la pantalla — 0.9 * altura. Después dibuja el piso detrás del pájaro. Utilizamos rect, x es 0, y es FloorY, ancho es el ancho de la pantalla, y altura es la altura de la pantalla, menos FloorY. Hazlo marrón agregando una función de relleno por encima de él. Escoge un color marrón, y llama a relleno, luego los números de color. Por último, podríamos detener la forma de ave que pasara por el piso. Volver a la clase Bird, en la función de sorteo, pregunte si, la posición de y es mayor que FloOry desde el boceto. Si es cierto, se llamará al código entre corchetes, y queremos que deje de moverse. Por lo que tanto la velocidad como la aceleración deben ser 0. Por último, si va por debajo del piso, el ave debe aterrizar en la superficie del piso. El puesto de y debe ser igual a la FLOory. Y así es como dejar caer el pájaro al piso. En el siguiente video, estaremos trabajando en aletear sus alas. Gracias.
5. Flap: El pájaro debe saltar cuando reciba una entrada de un usuario. Podría ser a partir de un clic del ratón o presionando una barra espaciadora en el teclado. Te mostraré los dos caminos. En primer lugar, debajo de la función de dibujo, agregue nuestra propia función, llámenla — DoAction. Esta función manejará la parte de salto, luego agregará una función del sistema llamada MousePressing. Esta función se llamará cada vez que un usuario presione un botón del mouse. Cuando el usuario hace clic dentro de la pantalla, debe llamar a doAction. Debajo de eso, agrega otra función del sistema llamada KeyPressing. Esta función se llamará cada vez que un usuario presione cualquier tecla del teclado. Para comprobar si se pulsa la tecla de espacio. Pregunta si clave, ==, dos comillas simples, y pon un espacio dentro. Si es cierto, entonces llamamos a doAction. Ahora DoAction debería hacer saltar al pájaro. Implementemos la parte de salto en la clase Bird. Crea una nueva función llamada salto. Esta parte no es realista, pero cuando el pájaro salte, forzaremos su velocidad a ser 0. vy es igual a 0. Y luego, haz que se acelere hacia arriba contra la gravedad. ay es igual a -1.7. Volvamos al archivo de boceto, e implementemos la función de salto. Dentro de la doAction, poner pájaro, salto de punto. Ahora sale de la pantalla porque se mueve más rápido en la dirección opuesta. La aceleración debe, sin embargo, poco a poco, volver a su 0.15 original. Para ello, haremos otra variable constante — AMaX, configurarla en 0.15, establecer ay en aMax. Entonces por encima de la declaración if, preguntaremos si el ay actual es menor que el aMax. Esto es cierto siempre que el pájaro salta, porque ahora está del lado negativo, tenemos que aumentarlo. Entonces el nuevo ay, igual a viejo ay, más una tasa creciente, que por ahora hagámoslo 0.4. Seguiría sumando hasta que la declaración if sea falsa. Cuando es falso, queremos limitarlo al valor máximo. De lo contrario, establece el ay, a la AMaX. El pájaro ahora puede aletar sus alas. En el siguiente video, implementaremos la pantalla de muerte. Gracias.
6. Muerte: El pájaro, en el piso, no debe poder saltar. Crearemos una nueva variable llamada salud. Establezca en 1. Cuando el pájaro golpee el piso, no sólo
detendremos el movimiento, sino que también mataremos al ave, al establecer su salud en 0. Con esta variable, entonces podemos preguntar en el boceto, que sólo si el pájaro está vivo, puede saltar. salud punto pájaro, ==, 1. Ahora después de que golpea el piso, ya no puede saltar. Otro lugar para matar al ave es cuando va por encima de la pantalla. Preguntaremos, si la posición de y es menor a 0, entonces y debe estar en 0. Restablecer la velocidad de nuevo a 0. Y podría comenzar a acelerarse a la velocidad máxima — AmaX. Y finalmente, mátalo, la salud es igual a 0. Ahora cuando golpea la pantalla, ya no puede saltar más. A continuación, vamos a mostrar el texto en la pantalla cuando el pájaro está muerto. Acude al archivo de boceto, en la función de dibujo, podemos preguntar si el pájaro está muerto. Si la salud es 0, entonces llame a la función de texto. La función de texto tiene 3 parámetros — los textos como en cadena, posición
x y posición y. Queremos mostrar “GAME OVER” en el centro de la pantalla. Cambiemos el color del texto a negro. Por encima de la sentencia if, llame a la función de relleno, establezca en 0. El pivote predeterminado del texto está en la esquina inferior izquierda, lo que es difícil de hacer que se centre. No obstante, existe una función llamada TextAlign, que puede mover el pivote a las 9 posiciones. Utilizamos CENTER, CENTRO. Encima del texto. TextAlign, CENTRO, CENTRO. Por último, llame al TextSize, y establezca el tamaño en 30. Ahora cuando el pájaro esté muerto, haciendo clic en la pantalla o pulsando otra vez una tecla espacial, debería revivir el pájaro y reiniciar el juego. En la clase bird, vamos a crear otra función para restablecer todas las variables. Vamos a llamarlo reset. Esto restablecerá todo a los valores originales del constructor. Sólo los valores constantes como tamaño y AMaX que no cambian. Cualquier otra cosa, debe ir a la función de reinicio. Cortarlas, y ponlas en la función de reinicio. Después llama a reset al final de la línea. Por último, vaya al archivo de boceto. Y cuando el pájaro está muerto, el doAction debe restablecer los valores del ave. Cuando si la declaración es falsa, va a lo contrario. Dentro de ella, agrega pájaro, dot reset. Y eso es todo. El juego se restablece después de que el pájaro está muerto. En el siguiente video, crearemos una pipa. Gracias.
7. Tuba a tubos: Hay muchas variables en la pipa. En primer lugar, necesita tener una posición x para hacer un seguimiento en donde se encuentra horizontalmente. No necesita posición y porque siempre está en la parte superior. El pipa tiene un hueco medio por donde el pájaro puede pasar. Necesitamos saber dónde empieza la brecha, llamémoslo TopGap. Y la altura de la propia brecha, llamémoslo GapHeight. Por último, el ancho de la brecha. Llamemos a eso GapWidch. Crea un nuevo archivo, llámalo “pipe.js”, agrégalo al archivo de índice. En su interior, crea una clase Pipe. El tubo tiene el constructor que recibe la posición inicial de x. Crea una variable local x, y asígnala a la x dada, agrega el GapWidd, y configúrelo al 15% del ancho de pantalla, un GapHeight, configala al 30% de la altura de la pantalla. El último es TopGap. Entonces vamos a utilizar un mapa y una función aleatoria. La función de mapa tiene 5 parámetros — el número, el punto más bajo de ese número, el punto más alto de ese número, el nuevo bajo, y el nuevo máximo. Y la función aleatoria tiene 2 parámetros — el número más bajo que podría ser, y el número más alto que podría ser. En primer lugar, llamamos al azar para obtener un número aleatorio entre 0 y 1. Después usa esto como primer parámetro de la función de mapa. Dile al mapa que el primer parámetro tiene el punto más bajo en 0, al punto más alto en 1. Entonces queremos que el TopGap sea del 10% de la altura, a menos del 60% de la altura. Vamos a crear una función de dibujo. Escojamos un color verde para alimentar la tubería, llamemos a la función de relleno, y pongamos el color en ella. Dibuja la parte superior de la tubería usando rect, x es x, y es 0, que es el GapWidch, height es el TopGap. La parte inferior comienza con x. y está en un TopGap, más el GapHeight. ancho es el mismo — GapWidch. Y la altura es la altura de la pantalla, menos TopGap, menos GapHeight. Esto lo probaríamos usando solo una tubería por ahora. Vaya al archivo de boceto, cree una variable global — pipe. Asignarlo en la función de configuración. pipe es igual a nuevo Pipe, y poner 0 en el constructor. Dibujarlo detrás del piso, tubo dot draw. Y eso es todo. En el siguiente video, vamos a crear múltiples tuberías. Gracias.
8. Ilusión: Dentro de este marco de cámara, parece que hay infinitos objetos moviéndose de derecha a izquierda. A pesar de que en realidad, acabamos de mover el mismo objeto hacia el lado derecho cuando está fuera de la pantalla. Dado que sólo podemos ver 3 tubos en la pantalla en un momento dado, sólo
necesitamos 3 tubos para crear este efecto. Cambie el nombre de tubería a tuberías, y configúrelo en una matriz vacía. Pondremos 3 pipas en ella. Crear un bucle for. var i, igual a 0, i < 3, i++. Entonces para cada tubería, tuberías en i, equivale a un nuevo objeto de tubería. El primer tubo comenzará con el ancho de la pantalla. El siguiente tubo comenzará a la mitad del ancho de pantalla, veces i. copia este bucle, y utilízalo en la función de dibujo. Dentro del bucle, vamos a dibujar cada pipa, tuberías en i, dot draw. También podemos usar tubos de longitud de punto, para obtener el número de tuberías. deberíamos ver nada aquí porque las tuberías no se han movido jet. Vayamos a la clase de pipa. Después de dibujar la tubería, mueva la tubería hacia la izquierda, escribiendo la nueva x, es igual a la x antigua, menos 2. Entonces, cuando la tubería vaya más allá de cierto rango, vuelva al extremo derecho. Si x es menor que la mitad negativa del ancho, mueva la x de nuevo al ancho de la pantalla, más la mitad del ancho GapWidth. Después de que se mueve hacia el extremo derecho, también
debemos aleatorizar el TopGap, por lo que parece una tubería diferente. Copie el hueco superior y péguelo dentro de la sentencia if. Ahora parece que tenemos tuberías infinitas, con diferentes TopGaps entrando. A continuación, las pipas deben dejar de moverse tan pronto
como el pájaro esté muerto. Podemos enviar el objeto pájaro a la función de dibujo de las tuberías, que va a la función de dibujo, añadir pájaro al parámetro. Entonces pregúntale si el pájaro sigue vivo. Sólo cuando está vivo, la pipa puede moverse. Por último, la pipa debe tener una función para
reiniciarse cuando reiniciemos el juego, al igual que el pájaro. Y una función de reinicio, necesitamos almacenar la posición x original a otra variable. Entonces en el constructor, agrega x0, es igual a x, luego mueve x, junto con el TopGap, a la función de reinicio. Cuando la tubería se restablece, x se establece en x0, luego llame al reset en el constructor. Por último, cuando reiniciamos el ave dentro de la DoAction, deberíamos restablecer también todas las tuberías. Copiar el bucle for del dibujo de tuberías. Pase por cada tubería, y llame a la función de reinicio. Ahora los huecos se aleatorizan en cada juego. En el siguiente video, haremos que el pájaro golpee las pipas. Gracias.
9. colisión: El pájaro muere cuando choca con una pipa. Tenemos que estrecharlo hacia abajo donde el pájaro no debe ir en dirección x. Entonces si su x, más su radio, es mayor que la posición x de la tubería. Si el lado izquierdo de la ecuación va más allá de
eso, entra en la zona verdadera, vamos a reducirla más. Uso y. Si el x del pájaro, menos su radio, es menor que el x del tubo, más el GapWidd. Si ambas condiciones son verdaderas, podría golpear la tubería. Apuntemos esto primero. A continuación, tenemos que comprobar si el pájaro golpea ya sea la parte superior o la parte inferior de la tubería. Entonces si la y del pájaro, menos su radio, es menor que TopGap. Con esta condición, tenemos la parte superior. Entonces usa o, la y del ave, más su radio, es mayor que TopGap, más su GapHeight. Ahora la verdadera zona está en estas dos áreas. Apuntemos eso. Dentro del primero si, agrega otro si. Si también es cierto, entonces matamos al ave — fijamos su salud en 0. A continuación, si el pájaro muere por golpear el costado de la pipa, el ave debería caer al suelo. Pero si muere dentro de una brecha, ya sea por golpear la brecha superior, en la brecha inferior, el ave debería caer, y aterrizar en la brecha inferior. En primer lugar, vaya a la clase Bird, y agregue el piso valioso. Ponlo en FloorY. Cambio de caer a FloorY, a este piso de puntos. También aquí dentro. Cuando se llama al reinicio, el piso debe volver a floOrY. Entonces en la clase de pipa, cuando el pájaro muere, hay
que comprobar si muere dentro de la brecha. Si la x del pájaro es mayor que la x de la tubería y, la x del pájaro es menor que la x de la tubería, más la GapWidd. Si es cierto, el ave debe aterrizar en el hueco inferior. Apuntemos el código. Después de matar al ave, si muere aquí,
coloca el piso del pájaro, a la TopGap, más GapHeight. De lo contrario, se va a caer al FloorY. Y eso es todo. En el siguiente video, agregaremos el sistema de puntuación al juego. Gracias.
10. Partitura: El puntaje debe aumentar cuando el ave pase el extremo de la tubería, que es la x de la tubería, más su GapWidch. Y el hiscore debe mostrar la mejor puntuación que hayas hecho. Vamos a sumar el marcador y el hiscore dentro de la clase Bird. Cuando se restablece el pájaro, el marcador debe ser 0. El hiscore debe estar en el constructor ya que no se restablecerá a lo largo del juego. Para aumentar la puntuación, cada pipa debe tener una puntuación de 1. Añádalo a la función de reinicio. puntuación es igual a 1. Cuando el pájaro pasa la pipa, la pipa entrega el marcador
al pájaro. Pregunta si la x del pájaro, es mayor que la x de la tubería, más su GapWidch, que es el borde derecho de la tubería. y, si la tubería aún mantiene la puntuación de 1, que es mayor a 0. Disminuye la puntuación de la pipa, e incrementa la puntuación del pájaro. Cuando la tubería esté fuera de la pantalla, restablezca la puntuación a 1. Vamos a probarlo, dibujando la partitura en el boceto. En la función de dibujo, agrega una función de texto — muestra el texto. texto, puntuación, colon, un espacio, más puntaje de punto de pájaro, muéstralo a las 10, 10. Por encima de eso, cambiemos la alineación del texto a IZQUIERDA, TOP. Y cambia el TextSize a 16. Corriéndolo. Ahora que funciona, vamos a averiguar el hiscore. En la clase de aves, compararemos el puntaje con el hiscore. Si el puntaje es mayor que el hiscore, entonces es el nuevo puntaje alto. Volver al boceto, mostrar el hiscore, hiscore, colon, espacio, más punto de pájaro hiscore, muéstralo a las 10, 30. Ejecutarlo. y eso es todo. En el siguiente video, voy a hacer el juego más difícil. Gracias.
11. Toque final: Una de las cosas que podemos hacer para que sea más difícil es hacer que las tuberías se muevan más rápido cuando la puntuación aumente. En primer lugar, cree una variable global llamada PipeSpeed, y colóquela en 2. Ahora ve a la clase Pipe, y reemplaza 2 por el PipeSpeed. De vuelta en el boceto, poco a poco
aumentaremos el PipeSpeed usando la puntuación del pájaro. PipeSpeed es igual a 2, más la puntuación de ave, dividida por 10. Podrías hacerlo más rápido bajando este número. A continuación, congelemos el juego cuando se ejecute por primera vez. Agrega una variable global, nombra congelar. Asignarlo a verdadero. Entonces cada vez que se llama a la doAction, descongelamos el juego. congelar es igual a falso. Entonces en la clase de aves, no
debemos actualizar la posición cuando el juego se está congelando. Entonces envuélvalos dentro de la declaración if, y pregúntale si no se está congelando. Otro lugar para agregar, es en la clase pipa, necesitamos comprobar si el juego se congela antes de actualizar la posición x. Por lo tanto, add freeze equivale a false a la sentencia if, junto con un operador y. Ahora cuando iniciamos un juego, un juego se congela primero. Al hacer clic en él o presionar una tecla de espacio lo descongelará. En la pantalla congelada, podríamos mostrar una instrucción sobre cómo jugar el juego. Entonces, al final de la función de sorteo, pregunta si la congelación es verdadera, luego agrega un texto. Presione la tecla de espacio o haga clic para saltar. x es la mitad del ancho. y es el 70% de la altura de la pantalla. Hazlo centrado usando el TextAlign, CENTRO, CENTRO, y eso es todo. En el siguiente video, hablaremos sobre cómo compartirlo. Gracias.
12. COMPARTIR: Cuando estés contento con el resultado, vamos a compartir el juego final. Para obtener un enlace compartible, primero, asegúrate de que has iniciado sesión, y el proyecto se guarda. Después ve a Archivo -> Compartir. Usa el enlace de pantalla completa si quieres que otros vean el código detrás de él. Usa el enlace presente para conseguir un juego independiente. O un iFrame embebido para añadirlo a tu sitio web. Para conocer más sobre p5.js, echa un vistazo a mis últimos cursos en mi perfil. Por favor avísame en la sección de comentarios, qué temas quieres conocer más. Gracias.
Saran Siri, Instructor
