Introducción al desarrollo de juegos de Javascript: parte 1

1. 1 introducción: Alguna vez te has preguntado cómo construir juegos 2D simples que funcionen dentro del navegador, entonces esta clase está diseñada para ti. Dado que JavaScript está integrado en todos los principales navegadores, es perfecto para construir juegos basados en navegador. Esta clase te enseñará todos los conceptos que necesitas saber mientras construyes un juego al estilo Pong-, pon todo en práctica. Esta clase no está diseñada para profundizar demasiado o si tienes algún conocimiento existente de JavaScript, realmente te ayudará a medida que progresas. Trataremos de cubrir todos los conceptos principales que necesitas para construir juegos 2D básicos funcionan dentro del navegador, y para ello, comenzamos por configurar el HTML Canvas. El Canvas es una forma ideal de dibujar dentro del navegador. Es perfecto para dibujar nuestra zona de juego, cosas como la pelota, los charcos. También podemos usar JavaScript para mover estos en el Lienzo también. Pero trabajando con un Canvas, sin embargo, necesitamos un poco de conocimiento de fondo sobre el sistema de cuadrícula. Eso está todo cubierto en esta clase también. Pero no te preocupes, es realmente fácil de recoger. Echaremos un vistazo a todas las funciones básicas de dibujo como cómo dibujar texto, cómo líneas, cómo dibujar cuadrados y rectángulos, círculos, y cómo también podemos aplicar looping para poder repetir procesos que hacen un juego realmente suave. Echaremos un vistazo también a cómo podemos interactuar con nuestro juego y mover objetos usando el teclado. Por supuesto, ¿qué tipo de juego de Pong estaría completo? No manejamos la pelota rebotando en varios artículos. El balón necesita rebotar por todos los lados de nuestro juego. Tenemos que descifrar un marcador si golpea a un lado en particular. Necesitamos rebotar de las palas en movimiento. Todo esto está cubierto dentro de esta clase. No necesitas herramientas adicionales ni realizar compras para esta clase. Todo lo que necesitamos es un navegador web y un editor de texto gratuito. Si esto suena como algo que te excita y quieres aprender, salta a la clase y te veo en la primera lección donde comenzaremos configurando el HTML Canvas. 2. Comparte tu trabajo en Skillshare!: hora de tomar cualquier curso, es muy importante no tener el hábito de seguirlo solo por el simple hecho de marcar otra conferencia. Tómese el tiempo para procesar cada lección, revisar el código que escribe y piense en cómo podría abordar estas soluciones usted mismo. Con esto en mente, esta clase está basada en proyectos, y esto te da la oportunidad hacer algo realmente personal y único. No necesitas perderte demasiado y desviarte de la clase, e incluso puedes dar un paso atrás después de haber terminado la clase y volver y hacer algunos cambios de proyecto después. Esto realmente te dará una buena oportunidad de practicar lo que has aprendido fuera de la clase. Además, recuerda compartir tu proyecto también aquí en Skillshare y solo lo revisaré, pero también inspirará a otros estudiantes también. Para obtener más información sobre el proyecto de clase, dirígete a la pestaña Proyecto y Recursos donde no solo puedes subir tu proyecto, sino que también puedes ver otros proyectos de clase también. Con esto en mente, espero ver lo que creas y subes aquí en Skillshare. 3. Configuración de la lienzo en HTML: Ya que estamos creando un juego 2D, necesitamos una forma de crear diversas formas y diversos elementos y colocarlos en la pantalla. Para ello, estaremos haciendo un gran uso del lienzo HTML5. Canvas es solo un elemento HTML igual que un div o incluso una imagen. Tiene una etiqueta de apertura y cierre, y por sí sola en realidad no hace nada. Pero una vez que tengamos esto en su lugar, podemos hacer uso de la API canvas para dibujar gráficos. También podemos hacer mucho más para casos de uso excesivo como la manipulación de fotos cambiando los píxeles y animaciones, por nombrar algunos. Este curso estará más enfocado en un gráfico 2D. Muchas otras API y bibliotecas también están disponibles para manejar características 3D. Para acceder a estas características 2D, la API canvas tiene una interfaz disponible llamada CanvasRenderingContext2D. Esto no es algo que necesites memorizar. Pero solo debes saber por esto que tenemos acceso a las características de dibujo 2D en el lienzo usando JavaScript. Aquí, se puede ver una selección de algunas de las propiedades y métodos a los que tenemos acceso a los que nos permitirán dibujar en el lienzo. Verás algunos más de estos durante el curso. Vamos ahora al editor de texto y preparemos las cosas con un nuevo proyecto. Primero lo primero, necesitamos una nueva carpeta de proyecto para almacenar todos nuestros archivos dentro de. Déjame llamar a este juego, a lo que quieras pero quiero llamar a este juego y golpear, “Enter”. Abra Visual Studio Code. Si lo prefiere, puede utilizar un editor diferente si lo desea. Arrastra esto. Entonces necesitamos dos nuevos archivos para empezar. El primero en el que puedes hacer clic en el ícono Nuevo Archivo justo aquí, esto creará un nuevo archivo. Voy a llamar a esto el index.html. El segundo archivo que necesitamos va a ser para nuestro script, el script.js. Esto va a manejar todas nuestras funciones de dibujo en nuestro código de juego. Empecemos de nuevo en nuestro index.html. Dentro aquí, Visual Studio Code tiene un práctico atajo llamado html:5, que nos dará toda nuestra estructura HTML básica. El título es el mismo. No necesitamos mucho contenido dentro de la sección del cuerpo pero lo primero que necesitamos es el lienzo. Como se mencionó anteriormente, el lienzo tiene las etiquetas de apertura y cierre. Si guardamos esto y lo abrimos dentro del navegador, aún no verás ningún contenido en la pantalla. Si copiamos la página de índice de ruta, pegamos esto en, no ves ningún contenido dentro del navegador. Para ver realmente el lienzo, necesitamos dibujar cosas dentro de nuestro archivo JavaScript o también podemos agregar algún estilo dentro de aquí para hacer más visible nuestro lienzo. En el estilo, entonces todo que queremos hacer dentro de aquí es agarrar nuestro lienzo, establecer un color de fondo para hacer esto más visible. Puedes hacer de esto cualquier color que quieras pero voy a ir por un valor rgb. El rojo de 61 y 59 para el verde y el azul. Esto nos dará este color de fondo más oscuro. Ahora podemos ver el lienzo dentro del navegador. Se puede ver por defecto que es un lienzo bastante pequeño. Por defecto, el lienzo se renderizará como 300 píxeles de ancho y 150 píxeles de altura. Podemos anular esto dentro de nuestro guión. Para hacer esto en el centro, podemos hacer esto igual que lo haríamos con otros elementos HTML regulares. En primer lugar, establezca el tipo de visualización para que sea el valor de bloque. Entonces podemos establecer el margen para que sea cero en la parte superior e inferior y luego auto a la izquierda y a la derecha. Guardar y actualizar, y esto ahora aparecerá dentro del centro porque he dividido automáticamente el espacio de la izquierda y la derecha. Lo final que hay que hacer dentro de nuestra página de índice, justo debajo del lienzo es el enlace nuestro archivo script. Colocar la fuente que apunta a nuestro script.js. Entonces podemos pasar a este archivo para agregar algún contenido. Lo primero que tenemos que hacer dentro de aquí es realmente agarrar nuestro elemento canvas. Hacemos esto igual que lo haríamos con cualquier otro elemento HTML. Tenemos acceso a nuestros elementos usando cosas como querySelector, GetElementById, getElementByClassName, y podemos almacenar esto dentro de una constante llamada canvas. Para este acceso, el documento completo, voy a utilizar QuerySelector pasando en nuestro elemento canvas. Ahora esto almacena nuestra referencia a nuestros elementos dentro de esta variable o constante. Ahora podemos acceder a esto justo debajo. Comenzando por anular este valor predeterminado, tamaño de 150 por 300 píxeles. Agarra nuestro lienzo. Podemos establecer el ancho de este elemento para que sea cualquier valor que desee. Digamos 800. A continuación, la altura de 400. Esto ahora debería actualizarse dentro del navegador. Lo último que tenemos que hacer dentro de este archivo es acceder a las funciones de dibujo 2D lienzos con getContext. Podemos almacenar esto dentro de una constante llamada ctx, agarrar nuestros elementos del lienzo, y luego llamar a un método llamado getContext. Pasando en una cadena de 2D para darnos acceso a las características de dibujo 2D. El nombre constante de ctx depende de nosotros pero esta es una convención de nomenclatura común para acceder al contexto de renderizado, y esta constante ahora se puede utilizar para dibujar al lienzo cuando lo necesitamos. Usaremos este montón a lo largo de este curso. Este lienzo ya está listo para que nosotros dibujemos también. Pero justo antes de hacer esto, en el próximo video vamos a echar un vistazo a cómo podemos trabajar con cuadrículas y coordenadas, lo que realmente nos ayudará a entender las colocaciones de nuestros objetos en el lienzo. 4. Grids y Co-Ordinates: No vamos a llegar demasiado lejos retirados al Lienzo, si primero no entendemos algunas coordenadas básicas. Puede que ya entiendan algunos de estos, y no necesitamos profundizar demasiado, pero si no, ahora vamos a tomar un resumen rápido. Cuando lo dibujamos al Canvas, o de hecho, mayoría de los sistemas de cuadrícula 2D, tenemos dos direcciones que necesitamos saber. Este es el eje x y el y, x es horizontal de izquierda a derecha, e y es vertical de arriba a abajo. Significa que si quisieras localizar la esquina superior izquierda de esta cuadrícula, x e y, ambos serán cero, pero ¿qué pasa con algo como este cuadrado de muchas formas como esta? Si bien, ocupa múltiples espacios de cuadrícula, la ubicación inicial es la de arriba a la izquierda. Aquí es donde tenemos este punto rojo. Nuevamente desde la parte superior izquierda inicial de esta cuadrícula, recorreremos tres espacios en el eje x y hacia abajo dos espacios en el eje y, lo que nos da nuestra posición inicial. Después de esto, una vez que tengamos nuestra posición inicial en la esquina, podremos entonces establecer la altura y el ancho de cualquier forma que quieras. Esto es todo lo que realmente necesitas saber para empezar. Podemos entonces establecer el tamaño de los gráficos y hacer otras cosas cuando los creamos también. Esto es lo que vamos a tener que venir a continuación. 5. Dibujar en el lienzo: Para ayudar con el dibujo al lienzo, he creado una descarga para que utilices durante este curso y también en el futuro. Todo lo que necesitas hacer es ir a este enlace que puedes ver en pantalla, descargar el PDF, y mantenerlo en un lugar seguro. Ahora vamos a saltar a nuestro guión y echar un vistazo a cómo podemos usar algunos de estos. En el video de coordenadas anteriormente, miramos un ejemplo de dibujo de un cuadrado. Empecemos con esto. También tenga en cuenta que los cuadrados y rectángulos utilizan el mismo método de dibujo. Acabamos de cambiar el ancho o los valores de altura Para dibujar un rectángulo o un cuadrado usando el lienzo, lo que tenemos que hacer es primero acceder a nuestra variable de contexto, así ctx, y esto tiene un método disponible llamado FillRect. Esto llenará un rectángulo con un color sólido o incluso algo así como un degradado. Vamos a analizar en el año 4 valores diferentes. Al igual que miramos con el video de coordenadas anteriormente, los dos primeros valores es la ubicación donde queremos colocar este rectángulo. Dado que esto se basa en la parte superior izquierda del rectángulo o cuadrado, quiero comenzar este ejemplo mostrando esto arriba en la parte superior izquierda. El superior izquierdo será x, 0 e y, 0. Después analizamos en el ancho y la altura que queremos que sea la forma. Para hacer de esto un cuadrado, podemos analizar en algunos valores pares como 100. Esto colocará un cuadrado de 100 por 100 píxeles en la parte superior izquierda de nuestro lienzo. También podemos empujar esto a través del eje x o el eje y, cualquier valor que queramos. Si cambiamos el eje y por ser 50, esto empujará esto más abajo por el lienzo. Además del método FillRect, también podemos cambiar esto para que sea trazo, por lo que StrokeRect. En lugar de llenar un color sólido al igual que estamos viendo, trazo colocará un contorno alrededor de la forma. Esto nos dará un contorno de un rectángulo o un cuadrado. Para la mayoría de las cosas dibujamos al lienzo, tendremos un trazo o una alternativa de relleno. Sólo voy a cambiar esto de nuevo para que se llene. También podemos crear un rectángulo cambiando ya sea la altura o el ancho. Si cambiamos esto a ser 200, por ejemplo, esto nos dará un rectángulo. Por defecto, tendremos este color negro sólido. Podemos cambiar esto accediendo a una propiedad en este contexto llamado FillStyle, justo por encima de FillRect, de nuevo, acceda a nuestro contexto como lo haremos con todas estas características de dibujo. Podemos acceder al inmueble llamado FillStyle. FillStyle va a ser igual a una cadena y establecer esto igual a un color como el rojo. Si actualizamos el navegador, esto ahora actualizará el color de fondo. Si estuviéramos usando el StrokeRect en lugar de relleno igual que hemos visto antes, para hacer el contorno, también necesitaríamos actualizar esto para que sea StrokeStyle para que coincida. Esto cambiará el color del contorno para que sea rojo. Simplemente deshacemos estos dos cambios y dejemos como relleno. Como cabría esperar, estos rectángulos serán útiles dentro de nuestro juego. Podríamos usarlos para dibujar al jugador y también el pádel de la computadora, que se va a utilizar para golpear la pelota. Vamos a darle a esto un ir comenzando con los jugadores remar por encima de la izquierda. Para empezar, ya que tenemos un lienzo de altura de 400 pixeles, podemos empezar colocando esto en el centro cambiando el valor y a ser 200. El ancho del lienzo, vamos a establecer esto para que sea un valor de ocho y la altura de 80. Refrescar. Se esperaría que el pádel esté en el medio ya que hemos establecido este valor y en 200, que es la mitad de la altura. Pero como ya hemos aprendido, la posición inicial de las coordenadas x e y está en la posición superior izquierda de nuestra forma, lo que significa que la parte superior de la forma está en el centro del lienzo más que en el centro de nuestro rectángulo. Aquí es donde tenemos que empezar a pensar en las cosas con más cuidado. Para que el pádel esté correctamente en el centro del lienzo, necesitamos ahora deducir la mitad de la altura del pádel. Ya que sabemos que la altura del pádel es de 80 pixeles, podríamos deducir 40 de la posición inicial. Esto funciona, pero una mejor opción sería cambiar estos valores para hacer uso de variables. Entonces se utilizarían las variables para realizar este cálculo para nosotros, y también sería útil en el futuro si cambiáramos alguno de estos valores. Simplemente ambos, podemos crear algunas variables. El primero es el ancho del pádel usando los mismos valores, por lo que el ancho de ocho píxeles. Entonces el segundo es para la altura del pádel. La altura del pádel es de 80 pixeles, al igual que ya tenemos. Entonces podemos hacer uso de estos en nuestro método FillRect. El ancho del pádel, también la altura, y esto todavía debería funcionar exactamente igual. Pero ahora en lugar de codificar duro este valor de 160, lo que ahora vamos a hacer es calcular esto usando JavaScript. Podemos agarrar la altura del lienzo, que actualmente es de 400 pixeles, dividirlo por dos para conseguir el centro que actualmente nos da el valor de 200. Pero como sabemos, 200 no colocarán esto en el centro del lienzo. También necesitamos deducir la mitad de la altura del pádel, por lo que lienzo.altura dividida por 2. También me quitaré la altura del pádel dividida por dos. Lo que tenemos aquí es exactamente lo mismo que antes. Tenemos el valor de 200, para llevar 40. Esto es justo lo mismo que antes pero usando variables. Guardar y refrescar. Ahora, para el pádel de la computadora, que va a estar más a la derecha, y todo esto debería parecer bastante parecido, todo lo que tenemos que hacer es cambiar la posición x para estar más a la derecha. Podemos cambiar el FillStyle para que sea un color diferente también. Bajando, todo el código a partir de ahora tendrá un color diferente cambiando el FillStyle. Vayamos por el azul. Entonces usamos CTX.Fillrect. Como se mencionó, la única diferencia entre los jugadores pádel y el pádel de la computadora es que queremos empujar esto hacia el lado derecho. El pádel jugadores tiene la ubicación de partida x de cero, que está por encima a la izquierda. Lo que queremos hacer por la versión de la computadora es colocar esto sobre la derecha accediendo al lienzo.width, que actualmente es igual a 800. Pero dado que esta posición inicial se basa en la parte superior izquierda del rectángulo, esto realmente empujaría esto del borde del lienzo. Lo que tenemos que hacer es traer esto de vuelta deduciendo el ancho del pádel. Los últimos tres valores son exactamente los mismos que los anteriores. Esto va a empezar en el centro. Podemos usar esto, y también se ha fijado el ancho y la altura del pádel. Agarra los tres de estos, agrega estos justo después de la coma, dejándonos con dos palas ahora en su lugar en la pantalla. Lo siguiente que tenemos que dibujar es una pelota. Es posible que esté esperando un método llamado FillCircle o algo a lo largo de esas líneas. Pero para los círculos, usamos un método llamado arco. Nuevamente, en el contexto, llamar al método de arco. Esto se utiliza para crear un arco o una curva. Podemos formar un círculo girando esta curva todo el camino alrededor de vuelta a la posición inicial. A diferencia de un rectángulo, dado que un arco es curvo, la forma no tiene una esquina superior para ubicarlo. En cambio, lo ubicamos junto al centro. Para colocarlo en medio del lienzo, podríamos hacer algo como esto. Podríamos acceder al lienzo.width divide por 2. Esto está colocando esto en el centro del eje x. Entonces también lo mismo para la altura. aún no hemos terminado. A continuación viene el radio del círculo, que es la dimensión desde el centro del círculo hasta el borde muy exterior. Básicamente, la mitad del ancho del círculo. Vamos a colocarlo en como 50, separados por una coma. El siguiente valor en sentido horario es el ángulo inicial y final. Para iniciar esto de manera efectiva verticalmente a las 12:00 horas, comenzamos con la posición de cero. Para que la posición final gire esto todo el camino alrededor y cree un círculo, necesitamos rotar esto en 360 grados. Pero al usar el método de arco, esta rotación es en radianes, no grados. El equivalente a 360 grados en radianes es de 2 veces Math.pi. Así es como podemos hacer esto usando JavaScript. Ahora, si guardamos esto y actualizamos el navegador, actualmente estamos no vemos ningún círculo en el lienzo. Todavía no vemos nuestro círculo en el Lienzo, porque primero tenemos que declarar si queremos que este círculo sea un relleno o un trazo. Podemos hacer esto con ctx.fill. Este es un método, por lo que necesitamos los corchetes justo después. Refrescar. Esto ahora llenará nuestro círculo con un color de fondo sólido. Como cabría esperar, también podríamos usar el método de trazo para darnos el contorno de nuestro círculo. Voy a mantener esto como relleno. También cambia el color de relleno justo encima usando FillStyle y establece esto igual a gris. Desde 2 veces Math.pi es un círculo completo, probable que puedas adivinar que la mitad de este valor es un medio círculo, así que en lugar de cambiarlo por dos, solo podemos decir Math.pi. Esto será medio círculo. Nuevamente, si quieres que esto sea una línea, podrías cambiar esto para que sea trazo. También podrías reducir o aumentar el valor de Math.pi. Si dividimos el valor de Math.pi por 2, esto entonces nos dará un cuarto de círculo. Como se puede imaginar, este arco es un método bastante versátil. Pero como necesitamos una pelota, voy a reinstaurar esto para que sea 2 veces Math.pi, igual que lo teníamos antes. También podemos cambiar esto para que sea un color de relleno, y también un radio de bola más pequeño de 10 píxeles. Esta es solo una primera mirada básica al dibujo al lienzo. Como cabría esperar, hay mucho más por aprender, y muchas más cosas que puedes hacer. Empezaremos a mirar algunos de estos en el próximo video. 6. Texto, líneas y vías: Continuando con el video anterior, ahora vamos a descubrir algunas técnicas más que podemos utilizar para dibujar al Lienzo, para dibujar algunas líneas y también algún texto. Esto va a ser realmente útil para nuestro juego. Empezaré con dibujar textos al Lienzo que se va a utilizar para dibujar la partitura del usuario y para pedir también al usuario que inicie el juego. El dibujar textos en el Lienzo tenemos tanto un trazo textos, pero un contorno, y el FillText, o un color sólido. Empecemos por la parte inferior de nuestro guión. Accede al contexto y comenzaremos con FillText. Para FillText, lo primero necesitamos agregar es una cadena, que es el texto que queremos mostrar, así que hey, seguido las posiciones x y y donde queremos colocar esto. Vayamos por 150. Guardar y refrescar. Podemos casi ver este pequeño texto en el Lienzo pero es realmente difícil de ver porque el tamaño predeterminado es 10 píxeles con una fuente sans serif. Pero por supuesto podemos cambiar esto en nuestro JavaScript. En primer lugar, cambiemos el FillStyle para que sea igual a cualquier color como rojo y también para cambiar el tamaño y también la familia de fuentes. Podemos acceder ctx o fuente. Establezca esto igual a una cadena. Esto toma exactamente la misma sintaxis que haríamos con la propiedad CSS on para que podamos pasar en una cadena del tamaño de píxel. Vamos por 30 y luego la familia de fuentes de Helvetica. Refresca y esto surte efecto. Lo que sería bueno tener es la puntuación del jugador muestra a ambos lados del Canvas. Si tuviéramos el marcador del jugador en medio de la mitad izquierda y el marcador de computadora en medio de la mitad derecha. Para simular esto para el marcador del jugador, efectivamente necesitamos empujarnos en un cuarto del ancho del Canvas. Para simular una puntuación solo podemos colocar en cualquier valor dentro de aquí, como tres, y luego empuja más de un cuarto del ancho. Primero podemos agarrar el Lienzo, ese ancho y dividir esto por 4. El marcador de computadora, esto necesita ser tres cuartas partes del camino a través del Canvas y podemos duplicar esto. Cambia el marcador por ahora. Pero en lugar de dividir el Lienzo por 4, vamos a multiplicar esto por 0.75, empujando nuestro texto tres cuartas partes del camino a través del Canvas. Por último, también podemos almacenar estos dos valores en variables para que podamos acceder a ellos y utilizarlos posteriormente en el curso. Back to the top, usando LET para que podamos actualizarlos a medida que el juego avanza. La primera variable es la puntuación del jugador. Tenemos un valor inicial de 0, seguido de nuestro puntaje informático. Estas variables ahora se pueden utilizar dentro de nuestro método FillText. Eliminar el valor codificado, y este es el marcador del jugador. El segundo es el puntaje de computadora. Algo más que Canvas nos da es la capacidad de dibujar usando líneas. Tenemos dos métodos útiles disponibles llamados herramienta de movimiento y herramienta de línea. Echemos un vistazo a estos. CTX.moveto y CTX.LineTo. El primero de mover a se utiliza para moverse a la posición inicial y luego line a es lo que realmente dibuja una línea en el Lienzo hasta la posición final que fijamos. Moverse a es como levantar el bolígrafo algún papel y moverlo a una posición determinada. Line to se utiliza para dibujar realmente la línea. Para lo que voy a usar esto es dibujar una línea central verticalmente en el Lienzo y también el círculo central también. En primer lugar, empecemos con esta línea vertical y necesitamos primero mover la posición de la pluma para estar en el centro del Lienzo y en la parte superior. Los valores para esto, en primer lugar, para x es la mitad del ancho del Lienzo y la posición y es 0, ya que queremos mantener esto en la parte superior. Muévete dependiente para estar en esta posición justo aquí. Ahora, necesitamos usar la línea a método. En realidad dibuja una línea a la ubicación final, que está en la parte inferior, pasando en la ubicación final por lo que esto sigue en el centro del Lienzo para que podamos agarrar Ancho de lona dividido por 2 y la posición final y está abajo en la parte inferior. Este es el lienzo.Altura. Esto entonces establecerá donde queremos dibujar nuestra línea a pero en realidad coloca en el Canvas, necesitamos usar el método de trazo, por lo que ctx.stroke y hay una línea de arriba a abajo. Esto es realmente bueno, pero si miramos de cerca, también tenemos una línea no deseada adicional alrededor de esta pelota. Esto sucede porque por el momento no tenemos ninguna separación entre todos estos caminos de Canvas y los gráficos que hemos creado. Por ejemplo, justo arriba, hemos dibujado un círculo usando el método de la película. Hemos dibujado esto, como cabría esperar con este color gris, pero luego el código sigue funcionando todo el camino hacia abajo y también dibuja el mismo círculo usando el método de trazo también. Es por ello que la pelota tiene un relleno y también un contorno desde el trazo hasta. Cuando esto sucede, podemos separar cada una de estas secciones utilizando un método llamado start path. Llamaremos a esto justo por encima nuestra sección de línea con ctx.beginpath. Begin path efectivamente despejará todos los caminos existentes arriba y comenzará un nuevo a partir de esta línea. Guardar y refrescar y ahora nuestra línea se ha retirado del círculo, dejando sólo la línea vertical que pretendíamos así como esta línea sólida. También podemos cambiar esto para que sea una línea discontinua también. Podemos hacer esto justo antes de dibujar nuestra línea con ctx.setlinedash. Establecer guión de línea es un método que toma en una matriz dentro de esta matriz de JavaScript, establecemos el tamaño para que tanto los guión como también los huecos entre cada uno de ellos. Si hicimos algo así, 10, 10, 20, 20, y 30, esto establecerá todos los valores para nuestros guión y espacios por lo que tenemos el tamaño del primer guión, el tamaño del primer espacio, el tamaño del segundo guión, el tamaño del segundo espacio, y luego el tamaño del tercer guión y luego se repetirá hasta el final de la línea. Diez píxeles para la primera línea y luego 10 píxeles para el primer hueco y luego pasamos a 20 y luego 30. Para mantener esto sencillo, solo voy a pasar en un solo valor de 6 y esto se asegurará de que cada uno de nuestros espacios y también nuestros guión esté en igual valor. Lo último que hay que dibujar va a ser un círculo central. Sabemos dibujar un círculo usando el método de arco. Pero esta vez también estableceremos una línea discontinua hasta la parte inferior y comenzaremos una nueva sección con ctx.beginpath. Para nuestro círculo, ctx.arc. Al igual que nuestra posición de bola de partida, necesitamos colocar esto en el medio del Lienzo con lienzo.Ancho dividido por 2 y también lo mismo para la altura a. Agarra esto, pega estos en. El tercer valor es el radio y como tenemos una bola de 10, hagamos de esto un valor de 20. Para el círculo, la posición inicial es 0 y un círculo completo es 2 veces math.pi. En realidad dibuja el círculo que necesitas llamar al método de trazo dejando nuestro círculo central ahora en su lugar sobre el lienzo. Esto es la mayor parte de lo que necesitamos para nuestros juegos en funciones de dibujo y la gran parte de usar variables como esta es en el futuro podemos actualizar estos valores para mover nuestros objetos en el Lienzo. 7. Bucle: Looping va a ser una parte realmente importante de mover las cosas dentro de nuestro juego. Si lo piensas en la actualidad, actualmente estamos dibujados cosas como una pelota y también los pedales a la pantalla. Pero lo que tenemos que hacer es actualizar estos valores para moverlos a una dirección diferente, y luego necesitamos redibujar continuamente y repetir esto usando un bucle. Esto es lo que vamos a echar un vistazo ahora. Abajo en la parte inferior de nuestro script, lo primero que hay que hacer es crear una función que desea llamar repetidamente bucle. Puedes darle a esto cualquier nombre de tu elección, voy a seguir con bucle éste. El propósito de esta función es dibujar repetidamente autográficos como el balón y las paletas después de que se mueven de posición. Para llamarlo, podemos usar un método JavaScript llamado setIntervalo. SetIntervalo repetirá nuestra función de bucle después de varios milisegundos. A esto lo llamamos al fondo, esto va a tomar dos cosas, lo primero es lo que queremos repetir, y en nuestro caso es nuestra función de bucle. Pasaremos esto, seguido un retraso de tiempo en milisegundos. Vamos a fijar esto actualmente en 15, y puedes aumentar esto para el juego más lento y reducirlo para un juego más rápido. Esta función de bucle eventualmente repetirá muchas partes de nuestro código que tenemos arriba, pero por ahora vamos a colocar en un simple registro de consola para que podamos comprobar que esto está funcionando. Entonces cualquier texto dentro de aquí, dale a esto un guardado, y ahora podemos entrar a la consola y revisar nuestro setIntervalo está llamando a nuestra función, inspeccionar, saltar a la consola, y ahora si actualizamos, podemos ver esto se llama cada 15 milisegundos. Empecemos reemplazando este registro de consola por nuestra pelota. Para dibujar nuestra pelota podríamos cortar y pegar el código que usamos para dibujar nuestra bola que es el método ctx.arc. O en su lugar, podríamos envolver esto en una función y llamar a esto directamente. Justo encima de esto creará una nueva función llamada DrawBall. Esto va a envolver todo nuestro código justo debajo. Abre los soportes rizados así, y luego podemos cortar y pegar y mover esto directamente dentro de nuestra función. Ahora, podemos llamar a nuestra función DrawBall desde el interior de nuestro bucle, reemplazar el registro de la consola, pasar nuestra función DrawBall, y llamaremos a esto cada 15 milisegundos y actualizaremos el navegador. Un par de cosas a destacar aquí, lo primero que notarás es que nuestra pelota ahora es demasiado grande. Parece que tenemos un conflicto entre los caminos que estamos dibujando de nuevo, que se puede arreglar con CTX.BeginPath. Voy a agregar esto dentro de nuestra función DrawBall, actualizar y esto ahora soluciona nuestro primer problema. El siguiente número es que la pelota en realidad no se está moviendo todavía. Esto se puede esperar porque aunque hemos dibujado repetidamente esta pelota cada 15 milisegundos, siempre la dibujamos en la misma ubicación. En la función DrawBall, siempre dibujamos esto al centro, y podemos cambiar estos dos valores con algunas variables que podemos actualizar. Para el ancho, que es la exposición, sustituimos esto por BallX, y BALly por la posición Y. Todavía sí queremos que ambas variables estén inicialmente en el centro del lienzo. En primer lugar, BallX, será igual al ancho del lienzo dividido por 2. Coloca esto inicialmente en el centro, y luego para BaLy justo debajo, dividiremos la altura del lienzo por 2. Como esperaríamos si guardamos y actualizamos, aún no vemos ninguna actualización porque en realidad necesitamos actualizar los valores de BallX y Bally cada vez que se repite el fotograma. Podemos hacerlo de nuevo en nuestra función DrawBall después de que esto haya sido dibujado. En cuanto pasemos al siguiente bucle, actualizaremos el valor de ambas variables , más igual a 2. Además es igual, agregaremos el valor de dos a nuestra variable BallX y luego actualizaremos la variable, BaLy es igual. Vamos a mantener esto corto ya que no tenemos tantos problemas en el eje y, por lo que el valor de uno está bien. Refresca esto. Ahora veremos el balón viajando en el lienzo. Esto ahora se está actualizando, pero aún tenemos este sólido rastro en el lienzo ya que la posición anterior de la pelota necesita ser removida. Podemos arreglar esto con un método de lienzo llamado ClearRect, que borrará todos los dibujos existentes del lienzo antes de volver a dibujar nuestra pelota hacia abajo a nuestro bucle, colocar esto en al principio, justo antes de que nosotros repetido para llamar a nuestra función, pasando ClearRect, que está disponible en el contexto. Si queremos sí tener la opción de solo despejar piezas pequeñas o una sección particular del lienzo, en nuestro caso limpiaremos el lienzo completo. Primero, pasamos en la ubicación inicial que está en la parte superior izquierda, que es la coordenada de 0, 0, y luego despejamos el ancho completo y la altura completa. En primer lugar, pasando en lienzo.width, separado por una coma, lienzo.height, y nuevamente reemplace esto por valores pequeños. Si solo quieres quitar una pequeña parte del lienzo al navegador, la pelota ahora se mueve como se esperaba sin salir de este sólido rastro. Ir al balón, ahora se mueve como esperamos, y no vemos nada más ahora en el lienzo ya que lo limpiamos con ClearRect. Estamos limpiando el lienzo cada vez, llamamos a esta función de bucle. Lo que tenemos que hacer es agarrar nuestras funciones de dibujo desde arriba y también trasladarlas a nuestro bucle. Además, los beneficios adicionales de que todas estas funciones de dibujo estén en el bucle es que muy pronto vamos a actualizar la posición del pádel con un teclado, y esto también actualizará la posición en el lienzo en cada bucle. Pero por ahora, iremos hasta donde dibujamos nuestras formas, y haremos lo mismo que hicimos con el balón, que es envolver todo el código relevante en una función independiente. Por lo que se puede llamar desde el interior de nuestro bucle. En primer lugar, la función de dibujo fue el pádel jugador, que está aquí justo debajo de nuestras variables. Corta esto y crea una nueva función llamada DrawPlayerPaddle, pega esto de nuevo en nuestra función. segundo es dibujar un pádel de computadora, y esto es para toda la sección azul. Corta esto, y crea nuestra nueva función llamada DrawComputerPaddle. Nuevamente, pegue en nuestro código, función DrawBall sigue en su lugar. El siguiente fue FiltText, y esto es para dibujar la partitura sobre el lienzo. Así que corta esto, crea una nueva función llamada DrawScore, y luego pega esto de nuevo en el cuerpo. Las siguientes dos secciones son para dibujar nuestras líneas al lienzo. Éste era para la línea central y también el círculo en el medio. Colocaremos ambos en una sola función llamada drawCanvas. Pega esto en. Ahora podemos llamar a todas estas nuevas funciones desde nuestro bucle: DrawPlayerPaddle que fue la primera, seguida de DrawComputerPaddle, DrawScore, y finalmente drawCanvas. Probemos esto, veamos el navegador. Ahora después de que limpiemos nuestro rectángulo junto con el balón, todas las demás funciones de dibujo están funcionando ahora. Como cabría esperar, esta es una parte realmente importante de nuestro juego y un gran paso en la dirección correcta. Próximamente en la próxima lección, echaremos un vistazo a cómo podemos usar el teclado para mover a los jugadores remar hacia arriba y también hacia abajo al balón. 8. Moving objetos con el teclado: Ahora llegamos a la parte divertida donde realmente podemos hacer que las cosas se muevan en el Lienzo usando controles como el mouse o el teclado. El objetivo de este video es escuchar cuando el usuario presiona el botón de arriba o abajo en el teclado, entonces vamos a mover a los usuarios pádel. Podemos hacer todo esto con JavaScript regular. Por el momento, tenemos a este jugador pádel por encima de la izquierda. Si vamos a la función de empate jugador paddle , que controla esto, justo aquí, podemos ver con la ubicación de las coordenadas x y. Aunque esto ha terminado a la izquierda porque tenemos el valor x para ser 0 y el valor y se establece para estar en el centro. Para actualizar nuestra paleta con el teclado, necesitamos reemplazar este valor y por una variable. Para mantenerlo posicionado en el centro más que en la parte superior izquierda, todavía podemos mantener esta altura de venda dividida por 2. Pero la altura del Canvas dividida por 2 puede ser reemplazada por una variable llamada posición del jugador. Será necesario crear una posición en la parte superior con el resto de nuestras variables. Usamos let ya que esto necesita ser actualizado. Posición de juego y establece esto igual a la altura del lienzo dividido por 2. Para empezar, esto dejará a nuestro jugador en el centro del Lienzo, igual que antes. Pero ahora tenemos una variable que podemos actualizar. Esto también se comprobará en cada bucle ya que llamamos a nuestra función desde nuestro bucle. Con esta variable ahora configurada, podemos empezar a escuchar eventos de un teclado, mover nuestra posición de jugador. Justo debajo de esto, lo que tenemos que hacer es escuchar un evento de teclado con addEventListener. Esto es solo un documental JavaScript regular.AddeVentListener . Vamos a escuchar para un evento de usuario. El evento que queremos escuchar es una tecla que se está presionando hacia abajo, que luego activará una función que voy a llamar a MovePaddle. Función MovePaddle. Dado que esto no es evento, necesitamos acceder a la información del evento para averiguar exactamente qué clave ha presionado el usuario, necesitamos pasar en la información del evento a nuestra función. Comience, comenzaremos con un registro de consola pasando en el valor de e. Podemos ver exactamente qué información de eventos tenemos para nuestro evento key down. Saltar a la consola, refrescar. Esto no hará nada para empezar hasta que el usuario haya presionado la tecla. Empecemos con la tecla arriba, que luego imprimirá toda la información de nuestros eventos de teclado. Aquí hay mucha información que no necesitamos. Pero lo principal que sí necesitas para este proyecto es esta propiedad de código. Se puede ver que esta es una cadena de Flecha Arriba. Si ahora cerramos esto hacia abajo y presionamos la flecha hacia abajo, el código que necesitas para éste es Flecha hacia abajo. Podemos acceder a e.code y comprobar si cada uno de estos es igual a la flecha hacia arriba o a la flecha hacia abajo, entonces podemos establecer el valor de la posición del jugador. Eliminemos el registro de la consola ya que sabemos lo que estamos buscando ahora y reemplacemos esto por una instrucción de conmutador JavaScript. El valor contra el que queremos comprobar, como acabamos de ver, es e.code. Ya que solo somos lista actual ahora para la flecha hacia arriba que se presiona o la Flecha hacia abajo, podría reemplazar esto con un if else enunciados si lo prefieres. Pero quiero usar una declaración switch para que podamos extender esto más adelante para usar el teclado para iniciar el juego. Para empezar, el primer caso que tenemos que escuchar es Arrow Up. Asegúrate de que esto coincida con la cadena exactamente como vemos dentro de la consola. Cada palabra comienza con un capital. Si se ha presionado la flecha hacia arriba con una necesidad de actualizar la posición del jugador deduciendo un valor. Porque recuerda, el valor de y en la parte superior es 0. Esto se actualiza a medida que la posición del jugador se mueve hacia abajo pasando nuestra variable de posición del jugador. Para ello, haremos uso del operador de asignación de resta, que restará nuestros valores particulares como 15 de nuestro valor actual y luego reactualizará esta variable. Cada uno de nuestros casos necesita ser seguido con una cláusula de break. Salir de nuestra declaración de switch si este caso está siendo emparejado. También sólo tenemos que colocar en un colon dentro de aquí. Nuestro segundo caso está justo debajo. Éste va a ser para el caso de Arrow Down : Esta vez actualizaremos la posición del jugador con el operador de asignación de adiciones, que sumará 15, y luego reasignaremos nuestro nuevo con el valor actualizado. Vamos a salir de esto si éste es cierto. Dado que nuestra posición de jugador se utiliza dentro de nuestra función cuando dibujamos el pádel, ahora deberíamos poder actualizar esto cuando presionamos las teclas arriba y abajo. También podemos mover cualquier otra cosa en el lienzo usando la misma técnica. En un futuro video, veremos cómo mover el pádel de la computadora hacia arriba o hacia abajo, pero éste debe hacerse automáticamente. A continuación, cubriremos cómo manejar la pelota rebotando en nuestros objetos. 9. Detectar colisiones y rebotar: ¿ Qué tipo de juego tendríamos si la pelota no rebotara los lados o también las palas? Bueno, esta es una difícil porque implica algunos ejercitarse porque todas nuestras coordenadas actuales están basadas en las líneas centrales de cosas como el balón y también el pádel. Pero haremos todo lo posible para averiguar las cosas y pasaremos a esto ahora. Si localizamos esta función de bola de sorteo, sabemos que estas dos líneas de código al final son las encargadas de mover nuestra pelota. Cada vez que se dibuja el balón al lienzo, vamos a mover el valor de bola X y también el valor de la bola Y. además, sabemos cómo cambiar la dirección. Si ahora actualizamos esto, esto se cruzará en una dirección positiva. También podemos cambiar la dirección cambiando cualquiera de estos valores para que sea un número negativo. Esta va a ser la base rebotar en nuestras paredes y también del pádel. Para ello, en lugar de tener nuestros valores codificados como este, actualicemos esta función para hacer uso de variables en su lugar. Mover x a la ubicación x y mover y a la dirección y. Esto hará que la actualización estos valores dinámicamente sea mucho más fácil para que podamos revertir la dirección cuando haya una colisión. En la parte superior, configuremos estos como variables. En primer lugar, muévete x, y por ahora mantengamos los mismos valores codificados que teníamos antes. Muévete y esto era igual a uno. Pero puedes actualizar estos para que sean valores diferentes si quieres. También una variable más para el radio de bola, que es un valor inicial de 10. Necesitaremos mucho esto cuando estemos calculando las colisiones. Esto se debe a que la pelota está posicionada desde el punto central del círculo, pero cuando se sube a la parte superior por ejemplo, también necesitamos tener en cuenta el radio de la pelota. También podemos actualizar nuestras funciones para hacer uso del radio de bola justo debajo. Volver abajo para dibujar pelota. Aquí estamos configurando el radio de bola para que sea también algunos píxeles, o podemos actualizar esto para usar nuestra variable. Ahora, a la función para comprobar si hay una colisión. Vamos a configurar una función en la parte inferior justo encima de nuestro bucle. Voy a llamar a mi función colisionar. Entonces esta función va a ser la encargada de revisar cuatro cosas diferentes. Lo primero es rebotar por arriba y abajo. También queremos comprobar si hay contacto ya sea a la izquierda o a la derecha de nuestro juego, por lo que necesitamos comprobar el marcador en el eje x. Esto se aplica a ambas partes. También queremos comprobar si hay contacto con los jugadores pádel. También, lo mismo para el pádel de la computadora también. Bueno. Ahora sabemos lo que queremos hacer dentro de esta función, y podemos llamar a esto justo debajo dentro de nuestro bucle. Esto significa que revisaremos todos los puntos de colisión en cualquier marco dado de nuestro bucle. Verificaremos si hay contacto cada vez que algo se mueva. Ahora sí tenemos un poco de trabajo para hacer dentro de esta función de colisión. Justo antes de empezar a trabajar nuestros cuatro puntos de contacto, voy a dibujar una pelota temporal sobre el lienzo. Podemos mover esto alrededor, y asegurarnos de que tengamos los puntos de contacto correctos. En primer lugar, comenzaremos un nuevo camino. No interfiere con ningún otro dibujo. El estilo de relleno. Puedes hacer de esto cualquier color que quieras solo para que destaque, voy a ir por el morado. Entonces ctx.arc para dibujar nuestra pelota sobre el lienzo. Cualquier ubicación por ahora, cualquier ubicación aleatoria está bien, 10 píxeles en la x e y como en el radio de la bola. Para hacer nuestro círculo el ángulo de inicio puede ser cero, y luego 2 veces Math.pi. Hacer dibujar esto, lo final que tenemos que hacer es ctx.fill, guardar, y hay una pelota en la esquina superior de nuestra pantalla. Ok. El primer punto de contacto que queremos revisar es la parte superior e inferior del lienzo. Empezando por el fondo. Vamos a mover nuestra pelota temporal hacia abajo al fondo del lienzo y asegurarnos de que tengamos el punto de colisión correcto. El eje x no importa por ahora, pero sí necesitamos cambiar la dirección y. Pero antes que nada, pasaremos en el lienzo.altura, guarde esto. Como se puede ver, esto empujará esto del borde del lienzo, por lo que necesitamos tirar de esta mitad del radio de bola hacia atrás. Ya tenemos esto almacenado como variable, por lo que podemos deducir esto de nuestra altura de lienzo. Ahí vamos. Este es el punto de colisión en la parte inferior del lienzo que queremos tener en cuenta. Ahora, podemos hacer uso de esto en una declaración if. Queremos comprobar si algo es cierto. El cheque que quieres hacer es si el balón y, que es la ubicación en el punto central de la pelota, es mayor que la ubicación del balón que acabamos de dibujar; si la pelota ha ido más allá abajo que este punto actual, entonces se considera que está fuera del lienzo, y luego necesitamos rotar la dirección. Justo antes de hacer esto, probaremos que esto está funcionando bien con el registro de consola de hit bottom. Saltar a la consola y refrescar el navegador. En cuanto el punto de contacto llegue al fondo del lienzo o se apague, queremos que nuestro log de consola funcione dentro de aquí. Rebotar esta pelota es bastante simple. Actualmente cuando comienza el juego, el balón va en una dirección positiva o hacia abajo, pero podemos revertir esto cambiando esto para que sea un número negativo, igual que hemos visto al inicio de este video. Ahora, en esto y como estamos trabajando en la dirección y, podemos reemplazar nuestro log de consola actualizando la variable. Mover y, que es la ubicación actual, es igual a una versión negativa de movimiento y La cual efectivamente revertirá lo positivo a un negativo y una negativa a una positiva. Salvemos esto y probemos esto. Refresca, y deberíamos ver un rebote fuera del fondo. Por supuesto que todavía sale la esquina del lado derecho del lienzo, pero esto está bien. Ahora podemos ver que nuestro rebote está todo funcionando. Bueno. Ahora tenemos que dar cuenta de la colisión en la parte superior del lienzo también. Dentro de la declaración if agregaremos una o condición. En esta ocasión queremos comprobar si la pelota y ubicación está apenas tocando la parte superior del lienzo. No queremos comprobar si esto es igual a cero porque entonces si lo fuera, por el radio de bola, esto estaría medio apagado y medio en el lienzo. También queremos deducir el radio de bola. Comprobamos si esto es menor o igual cero. Si lo es, debe rebotar por la parte superior del lienzo. Actualmente, cuando recargamos el navegador, la pelota se mueve en dirección hacia abajo. Pero para las pruebas, podemos mover la dirección y de para que sea un número negativo, y esto hará que el balón mueva en dirección ascendente. Esto es lo básico de cómo podemos rebotar una pelota. Realmente es en su mayoría un caso de solo revisar nuestros puntos de contacto son correctos, y también asegurarnos de que contemos el radio de la bola también. Ahora pasaremos a agregar una condición para comprobar si el balón golpea el lado izquierdo o derecho de nuestro lienzo, y posteriormente, esto aumentará los puntajes. Este todo estará basado en la ubicación ball x para el lado izquierdo y derecho de nuestro juego. Vuelve a bajar a nuestra función, que es chocar. Entonces justo debajo de nuestros comentarios, también queremos colocar en una declaración if. En primer lugar, para comprobar si la pelota es chocada por el lado izquierdo. Actualmente, nuestra pelota temporal es exactamente donde queremos que esté el punto de contacto, que está configurado para ser un valor de 10. Todo esto funciona bien porque nuestro radio de bola está establecido en 10. Queremos comprobar si la ubicación almacenada dentro de la variable de bola x es menor o igual al radio de la bola. Efectivamente, si el balón está a la izquierda donde está ahora, queremos luego pasar un marcador a la computadora. Proporcionaremos una forma de hacerlo más adelante, pero por ahora, solo pegue en un registro de consola de puntuación de computadora. Entonces debajo de esto, una sección else-if. Esto va a ser para nuestro cheque para ver si el jugador ha anotado moviendo el balón hacia el lado derecho. Para éste pasamos en la ubicación de la bola X. queremos asegurarnos de que la pelota esté tocando el lado derecho del lienzo. Nuevamente, la posición x verticalmente está en el centro de la pelota. También queremos comprobar si la bola x más el radio de la bola es mayor que igual al ancho completo de nuestro lienzo. Podemos agarrar esto con el ancho del lienzo. Después colocando un registro de consola para la puntuación del jugador, prueba esto en la consola. Es un poco más grande. Tienes un typo en la línea 85. Esto solo quiere estar juntos, no hay espacio en el medio. Probemos esto ahora. Si el balón se mueve hacia la derecha, vemos que hay un marcador de jugador. Si subimos a nuestra ubicación x en la parte superior, puede simplemente ser un número negativo. Entonces podremos probar el puntaje informático. Aquí vamos. Esto ahora todo funciona como se esperaba. Las cosas realmente están empezando a tomar forma ahora con nuestro juego. A continuación, echaremos un vistazo a otra sección importante, que es rebotar la pelota de las palas en movimiento. 10. Contacto con padel: De manera similar para rebotar por los lados de nuestro lienzo, ahora también tenemos que dar cuenta de la pelota golpeando nuestras palas en movimiento también. Esto implica un poco más de trabajo porque tenemos que dar cuenta no sólo de la pelota golpeando la parte delantera del pádel, sino que también necesitamos revisar la ubicación de la pelota está entre la parte superior e inferior de la remar también. Empezando con el pádel de nuestro jugador, para comprobar que estamos trabajando las cosas correctamente, podemos usar esta pelota temporal, colocar esta en la parte delantera del pádel y comprobar que tenemos el punto de contacto correcto. Salta a la función collide y en la parte superior, tenemos este arco que está creando esta pelota temporal. Eliminar este valor y colocar esto en la cara del pádel, tenemos que mover esto a través en el eje x, el radio de la bola, más el ancho de la paleta que se almacena en la variable de ancho del pádel. Refresca y en primer lugar, podemos ver este movimiento a través, y solo para confirmar esto podemos mover esto al centro ajustando el eje y igual a la altura del lienzo dividido por 2. Ahí vamos. Ahora tenemos el punto de contacto correcto para nuestro pádel. Podemos utilizar este punto de contacto ahora para comprobar si el balón es menor o igual a este valor X. Nuevamente, configuramos una declaración if así. Bajar a nuestro comentario, que es revisar el contacto del jugador pádel. El enunciado if va a comprobar si la posición del balón X es menor o igual a la posición X que acabamos de establecer, que es el radio de bola más el ancho del pádel en este extremo. Básicamente comprobando si esta posición de bola es donde está ahora o menor que. Usando nuestra variable de movimiento X, entonces podemos revertir esto estableciendo esto igual al equivalente negativo. Recuerda aquí aunque todo lo que estamos haciendo es revisar la ubicación X, por lo que la pelota debe rebotar en cualquier lugar verticalmente desde arriba a abajo siempre y cuando esté en línea con la cara del pádel. Refresquemos esto y pongamos a prueba esto. Ahora deberíamos ver un rebote antes de que golpee la parte posterior del lienzo. Bien, así que todo esto ahora funciona bien. A continuación, queremos restringir este rebote para que solo ocurra cuando la pelota está entre la parte superior e inferior del pádel. Ya tenemos una variable en nuestro juego llamada posición de jugador, que está configurada para estar inicialmente en el centro del lienzo que para nosotros ahora sería 200. Cuando se presionen las teclas arriba y abajo, el punto central al pádel actualizará la variable de posición del jugador para que siempre sepamos dónde está esto. Por ejemplo, digamos que actualmente está al 100, a continuación tenemos que comprobar dónde está la pelota en relación al pádel. Ahora podemos usar 70 como posición de bola. Quita este valor del pádel y podemos ver la diferencia es de 30 pixeles, y este es un número positivo. En otro ejemplo, aquí podemos ver la posición de la pelota es un 125. Nuevamente, quítate esto de la posición del jugador, pero esta vez el resultado es un número negativo de 25. Pero ¿por qué importa este cálculo? Bueno, importa porque si este número está dentro de la altura del pádel, debe haber un contacto. Tendríamos la mitad de la altura del Pádel ya que estamos trabajando desde la línea central y también necesitamos tener en cuenta el radio de bola también. Aquí es donde las cosas pueden volverse un poco más complejas. Aquí hemos sumado el radio o deducido, dependiendo de qué lado del balón esté encendido, valores positivos y negativos. En la diapositiva anterior, también tuvimos los mismos números positivos y negativos que tener en cuenta también. Esto significa que podríamos escribir algún código complejo para dar cuenta de esto o podríamos hacer nuestra vida mucho más fácil cambiando cada comparación para ser positiva o podemos hacerlo con un método matemático llamado absoluto. Para ver cómo funciona matemática. absolutos, saltemos a la consola y pongamos a prueba esto. Colocando un registro de consola con el valor de matemáticas, delta abs pasando en un número positivo como dos. Ahora si actualizamos y entramos en la consola, podemos ver que tenemos el valor de dos así como se esperaba en la consola. No obstante, si cambiamos esto para que sea un valor negativo, solo voy a mover esto fuera del bucle para que no siga repitiendo. Refrescar, también podemos ver que el valor sigue siendo un número positivo de dos. Independientemente de si pasamos en un número positivo o un número negativo, siempre obtenemos el equivalente positivo mostrado. El punto aquí es que podemos utilizar estos métodos absolutos para asegurarnos que el cálculo entre la pelota y el pádel sea siempre positivo, lo que significa que siempre podemos comparar este valor con un positivo acción de sumar el radio de la bola en lugar de tener que trabajar fuera si queremos sumar o deducir esto. Al código y veamos cómo se ve esto. Podemos quitar nuestro registro de consola, y luego saltar a nuestra declaración if en la parte superior. Actualmente solo revisamos la exposición, pero ahora también necesitamos revisar la posición Y con el operador “AND”. Ahora vamos a comprobar si la pelota está entre la parte superior y la parte inferior. Pasando en matemáticas a abs. Siempre obtenemos un número positivo. Lo que queremos hacer es comprobar si la posición Ball Y, quitarle la posición del jugador. Recuerda que esto nos va a dar este valor entre el balón y el pádel, pero siempre va a ser un número positivo a diferencia en los toboganes. Entonces verificamos si este valor es menor o igual a la altura del pádel, dividido por 2 más el radio de bola. El motivo por el que podemos sumar el radio de la bola, y no tenemos que preocuparnos por quitarnos dependiendo de qué lado se es porque siempre estamos convirtiendo esto a ser un número más, por lo tanto, siempre estamos agregando el radio de la bola. Vamos a darle un ahorro a esto y probar esto dentro del navegador. En primer lugar, la pelota puede ir a juego automático, y si ahora movemos el pádel en su lugar, ahora deberían causar un punto de contacto entre la pelota y el pádel. Sé que esto puede parecer difícil, pero sin esta conversión positiva, no necesitaríamos duplicar esto para que el balón esté ya sea encima o por debajo de la línea central del pádel. Ahora con esto trabajando, lo siguiente que hay que hacer es revisar el punto de contacto para el pádel de la computadora. Este va a ser bastante similar, así que podemos copiar la declaración full if en sección del jugador y pegar esto justo debajo del comentario de la computadora. En primer lugar, la exposición tiene que estar de más a la derecha. Ahora tenemos que comprobar si la posición de la bola es ahora mayor, añadir el radio de bola para dar cuenta de esto. la derecha de los mayores o iguales, necesitamos comprobar si el balón está más allá la cara del pádel del equipo. Podemos hacer esto revisando el lienzo, ancho, para llevar el ancho del pádel. Esta debe ser la posición X cuidada y para la posición y, esto va a ser bastante similar. Queremos también comprobar si esto está entre la parte superior e inferior del pádel en lugar comprobarlo contra la posición del jugador, queremos comprobar esto contra la posición de la computadora. Por supuesto que éste no ha sido creado todavía así que subamos a la cima donde creamos nuestras variables y podemos duplicar nuestra posición de jugador y cambiar esta para que sea la posición de la computadora. Nuevamente, establecer que esto esté en el centro del lienzo está completamente bien para el inicio de nuestro juego. El puesto informático también se actualizará en un futuro video. Para limpiar esto, ahora podemos volver a bajar a la función de colisión y quitar nuestra bola temporal, ya no necesitamos esto. Va a ser bastante difícil probar si el pádel de la computadora está funcionando ya que no podemos mover esto hacia el balón. Pero una cosa que podemos hacer sólo para revisar las cosas y comprobar que tenemos un rebote, es cambiar la posición de movimiento Y para ser un valor de cero. Esto moverá la pelota horizontalmente a través de nuestro juego, fuera del pádel de jugadores. Excelente, por lo que el rebote ahora está funcionando fuera de ambas de nuestras palas. Ahora cambia de nuevo, Negativo 1 ya que sabemos que esto está funcionando. Lo hemos logrado a través de una de las partes más difíciles de nuestro juego. Puede ser un poco difícil de tomar, pero esto realmente es una parte esencial para que nuestro juego funcione correctamente. No es perfecto. No hemos contabilizado ciertos casos de filo, como si el balón golpea la parte superior o al fondo mismo del pádel, pero no queremos ir demasiado profundo en este curso. A continuación, en el próximo video, echaremos un vistazo a cómo rastrear las puntuaciones, tanto para el jugador como también para la computadora. 11. Seguimiento de patrones: Ya usamos el método FiltText para dibujar nuestra puntuación en el Canvas y nuestras puntuaciones también se almacenan en variables. También sabemos cuando el jugador o la computadora anota al golpear el balón por el lado izquierdo o derecho de nuestro Canvas. El siguiente paso lógico sería actualizar estas variables cuando esto suceda, para luego actualizar el puntaje en pantalla, estas variables donde la puntuación del jugador y también la computadora anotan hacia abajo en la nube Función, localicemos esto dentro de nuestro script. Justo aquí. Actualmente nos registramos en la consola cuando un jugador o la computadora ha anotado. Dentro de nuestra declaración if else if, podríamos actualizar directamente nuestras variables de puntuación dentro de aquí, pero en su lugar voy a llamar a una función. Esta función también comprobará otras cosas como si el juego ha terminado y también colocará la pelota de nuevo en el centro. Vamos a reemplazar estos dos registros de consola una función que vamos a crear pronto llamada score. También deberá darse cuenta de cuál de nuestros jugadores ha anotado la función de puntuación. Para nuestra primera, pasaremos en la computadora como cuerda, y para nuestra segunda, si el jugador ha anotado, pasaremos en el jugador a esta función. Por supuesto, necesitamos crear esto y simplemente soplar nuestra función de nube, crear nuestra función llamada score. Dentro de aquí, vamos a tomar en el jugador. Recuerda que esta variable de jugador va a ser igual ya sea a nuestra computadora o a nuestro jugador. Podemos comprobar cuál de estos ha sido aprobado con una declaración if. Si la variable player es igual a la computadora, haremos algo dentro de aquí, que es actualizar nuestras variables. Recuerda al inicio, miramos la puntuación del jugador y la puntuación de la computadora, y Aquí actualizaremos ambas variables por el valor de una. Éste es para la puntuación de la computadora. Aumenta con plus-plus. De lo contrario actualizamos en el marcador del jugador. al navegador y vamos a probar este hacia fuera. Dejaremos que la pelota se desmaye y el pádel. Podemos ver que la puntuación de la computadora va subiendo muy rápido. El motivo por el que esto sucede es porque cada vez se mueve la pelota o cada vez que tenemos un nuevo cuadro dentro de nuestro bucle, estamos comprobando si el balón está detrás del jugador o el pádel del equipo. Ya que estamos continuamente detrás del pádel, el marcador seguirá aumentando. Para arreglar esto, podemos volver a poner la pelota en el centro de nuestro juego para que podamos empezar de nuevo. El modo en que podemos hacer esto dentro de nuestra función de puntuación es restablecer la ubicación de la bola con BallX es igual al lienzo.width dividido por 2, colocar esto en el centro. También haremos lo mismo por la ubicación de BAlly. Esta vez esto se basa en la altura del lienzo, también dividido por 2. Vamos a probar esto. Refresca, deja pasar la pelota detrás del pádel, esto se fija a uno, luego la pelota se coloca de nuevo en el centro para que nuestro juego continúe. Esta es una forma sencilla de rastrear las puntuaciones de nuestro juego. En la próxima sección, vamos a echar un vistazo a cómo podemos sumar una puntuación máxima para que sepamos cuándo ha terminado el juego y también mostraremos al ganador en el Canvas. 12. Terminar el juego: El primer paso para terminar nuestro juego es establecer cuántos puntos queremos ser el máximo. Para ello, necesitamos una variable en la parte superior llamada ganadora total. Const WinningTotal y mi valor va a ser igual a tres por lo que el primer jugador en llegar a tres va a ser el ganador y podemos actualizar esto dentro de nuestra función de puntuación. Volvamos a nuestra función. Aquí tenemos que comprobar si nuestro puntaje de computadora o puntuación de jugador es igual a este total ganador. Al colocar una declaración if para comenzar, comprueba si el puntaje de computadora es igual a nuestra nueva variable que está ganando total. Si es así, vamos a hacer algo, si no, pasaremos en una cláusula else-if y en esta ocasión comprobaremos si el marcador del jugador también es igual a nuestro total ganador. Lo que queremos hacer dentro de aquí, vamos a terminar el juego creando una función EndGame. Obviamente, aún no hemos creado esto, pero se llama EndGame. Al igual que cuando creamos nuestra función de puntuación, que tomó en el jugador, también vamos a hacer lo mismo para la función EndGame. Esta es la izquierda, esta función sabe cuál fue el ganador. Esta, esta fue la computadora entonces también pasaremos la palabra clave return para salir de las declaraciones. De manera similar, la declaración else-if también llamará a nuestra función EndGame pero pasando en el jugador. También regresa de esto si esto es cierto y la razón por la que la función EndGame necesita saber cuál de estos jugadores fue el ganador es porque vamos a cambiar los colores dependiendo de cuál fue el ganador. Como se puede ver, tenemos el color rojo para el reproductor y el color azul para la computadora. Esto se reflejará dentro de nuestro texto final del juego. Vamos a crear esta función justo debajo. Recuerda que esto se está pasando ya sea la computadora o el jugador, que almacenará dentro de un ganador y luego pasará en una declaración if else. El apartado if podemos comprobar si el ganador es igual a la computadora. Sólo hay que quitar estos corchetes no tenemos estos en la sección else. Si el ganador es igual a la computadora, que es el color del azul, entonces vamos a cambiar el color del texto para mostrar los resultados para que sean de color azul. CTX.fillStyle es igual al azul y luego en la sección else, cambiamos FillStyle para que sea igual al color rojo para que coincida con nuestro jugador. Ahora la razón por la que estamos cambiando este color de texto es porque vamos a mostrar algún texto en el lienzo cuando el juego haya terminado. Esto simplemente va a hacerle saber al jugador si ha ganado o si la computadora ha ganado. Justo antes del texto, estableceremos la línea de texto para que sea igual al centro. Coloca esto en el medio del lienzo y luego creamos nuestros textos con una función llamada FillText. Abre el retrotick para que podamos insertar una variable porque también necesitamos insertar la variable del ganador dependiendo si el equipo o el jugador ha ganado. Digamos que el ganador es, un colon, luego usando el símbolo del dólar y las llaves rizadas en JavaScript, podemos insertar la variable de ganador. Este será el ganador es jugador o el ganador es computadora. Después de los backticks, agrega una coma entonces podemos colocar esto en el centro del lienzo. En primer lugar, la exposición, que es el lienzo.width dividido por dos. En la posición Y está lienzo.altura dividida por dos. Auto-navegador y podemos probar esto. Refresca y vamos a sacar esto del camino para llegar al valor de tres. Eso es uno, dos, y tres. Se puede ver de inmediato que sí vemos inicialmente nuestro texto, pero desaparece rápidamente y el juego continúa. El motivo por el que esto sucede es porque nuestro bucle sigue funcionando. No hemos hecho nada para detener nuestro intervalo establecido. Una vez que el jugador o la computadora llega a la puntuación de tres, seguimos dibujando el texto muy brevemente al lienzo pero en la siguiente iteración de nuestro bucle, estamos ejecutando este método de texto claro, que es borrar todos los textos de la pantalla y luego redibujó todas nuestras funciones de juego. ¿ Cómo evitamos que este bucle se ejecute? Bueno, el intervalo establecido se puede detener mediante un método llamado intervalo claro. Esto implica almacenar una referencia a este intervalo cuando lo creamos y luego usar esta referencia para detenerlo posteriormente con intervalo claro. Esta referencia se puede almacenar dentro de una variable y como todo el resto de las variables, esta estará en la parte superior. Llama a esto GameLoop y luego en la parte inferior, establece esta variable para que sea igual a nuestro intervalo para que GameLoop sea igual a nuestro setInterval. Aquí, todavía estamos llamando a setInterval igual que antes pero esto va a devolver un ID único que se almacena dentro de esta variable. Podemos ver esto si registramos esto en la consola, saltamos al navegador y actualizamos en la consola y podemos ver el valor de uno. Si tuviéramos varios intervalos en ejecución, cada uno de estos identificadores devueltos será único. De vuelta a nuestra función EndGame, esta variable ahora se puede pasar a ClearInterval para evitar que el bucle se ejecute. Haremos esto justo en el inicio mismo de nuestra función. Pasar cualquier método que sea ClearInterval, que tome en nuestro ID, nuestro intervalo de tienda de referencia llamado GameLoop. Ahora podemos probar esto, refrescar, esperar a que esto llegue a un valor de tres. Bueno. Podemos ver de inmediato al juego se congela y aún tenemos el texto en la pantalla. Para mejorar en esto, sería mejor despejar el balón, despejar las palas, y también estas líneas punteadas en el fondo. Incluso sólo el marcador en el ganador en el lienzo. Esto es algo que ya sabemos hacer desde nuestro bucle donde despejamos nuestro lienzo, nosotros ClearRct. Copiemos esto y coloquemos esto dentro de nuestra función EndGame. Esto solo será el método ClearInterval, borrará todo el resto del Canvas. Ya que sucede antes de dibujar nuestro texto, todavía deberíamos ver el texto en la pantalla pero sería útil si también pudiéramos ver la partitura en la parte superior. Bueno, esto es bastante simple. También sabemos dibujar el marcador con esta función justo aquí. Después de que limpiemos nuestro Canvas, actualízate y lo intentaremos una vez más. Genial, el lienzo se ha aclarado todavía vemos el texto. Seguimos viendo el marcador final en la parte superior también. Con esto todo ahora funcionando, a continuación, pasaremos a comenzar y reiniciar nuestro juego. 13. Comienza y reinicia el juego: En lugar de que nuestro juego comience inmediato tan pronto como se carga el navegador, sería bueno activar esta acción con el teclado usando algo así como la barra espaciadora. Ahora vamos a echar un vistazo a cómo hacer esto y también cómo reiniciar nuestro juego una vez que esté terminado. Utilizaré la barra espaciadora para iniciar el juego, pero puedes cambiar a una clave diferente si lo prefieres. Mira dentro de nuestras declaraciones de switch. escucharemos la flecha hacia arriba y la flecha hacia abajo. Podemos crear un nuevo caso para escuchar nuestra clave elegida para comenzar el juego. Entonces caso, esta vez como una cuerda. La clave que voy a escuchar es la barra espaciadora, poner dos puntos, y luego vamos a llamar a una función para iniciar el juego llamado inicio del juego. En la cláusula break, si esto es cierto, y justo antes de crear esta función, también tendría más sentido ahora cambiar el nombre de esta nueva parte de la función para ser otra cosa, ya que hace otras cosas en lugar de simplemente mover a nuestro jugador hacia arriba o hacia abajo. Quiero ir por una tecla manejada presionada. Recuerda que también necesitamos cambiar esto en nuestro oyente clave abajo justo arriba. Por supuesto, necesitamos crear esta función de inicio del juego. Establezca esto justo debajo. Si pensamos en esto, ¿qué quieres que haga este juego? Bueno, ya que actualmente no podemos refrescar el juego y actualmente comienza sin hacer nada, queremos ahora mover este bucle, que lo llamamos justo abajo en la parte inferior a nuestra función. En lugar de que este juego comience de inmediato, podemos cortar esto y colocar esto en nuestra función de inicio del juego, por lo que esto solo sucederá cuando se presione la barra espaciadora. Probemos esto. Si actualizamos, aún no vemos que ningún juego comience. Golpea la “Barra espaciadora” o tu clave elegida y ahí vamos. En lugar de esta pantalla vacía, también debería haber algunas instrucciones al principio. Hágale saber al usuario que necesita presionar la barra espaciadora para comenzar. Esto no necesita entrar en una función ni nada más, solo podemos agregar esto en la parte superior de nuestro script. Pero esto solo va a ser algunos textos y usamos FillText, pero primero vamos a establecer el color con FillStyle igual al rojo. Puedes cambiar esto si lo prefieres. CTX.Font establecerá esto como una cadena o 30 píxeles para el tamaño de fuente con un estilo de Helvetica. Coloca esto en el centro con línea de texto, luego dibuja nuestro texto con el método llamado FiltText y pasa en una cadena. No necesitamos insertar ninguna variable, por lo que las cotizaciones regulares bien entonces el texto del espacio de prensa para jugar. Para las posiciones x e y, esto es ancho del lienzo dividido por dos, y también divide la altura por dos. Vamos a probar esto. Ahí está nuestro texto. Presiona “Espacio” y nuestro texto también se borra porque si recuerdas abajo en la parte inferior, el lienzo se borra antes de cada uno de nuestros bucles. De vuelta a nuestra función de inicio del juego, también hay algunas otras cosas que hay que ir dentro de aquí también. El primer paso en la parte superior es restablecer cualquier puntaje. El marcador del jugador igual a 0 y el equipo anota también 0. El uso de intervalo claro también eliminará cualquier temporizadores existentes que se almacene dentro de nuestra variable de bucle de juego . Vamos a probar esto. Refresca, presiona “Espacio” para comenzar, y todo se ve bien. Todas las puntuaciones se actualizan, pero hay un pequeño problema si seguimos presionando la barra espaciadora durante el juego. Se puede ver arriba en la parte superior, si presionamos ahora la barra espaciadora, el marcador se restablece cada vez que iniciamos el juego. Esto no es un problema si realmente queremos comenzar el juego, pero si el jugador presiona accidentalmente esto durante el juego, se va a reiniciar. Podemos ayudar a esto haciendo un seguimiento de esto con una variable. Deja que el juego se ejecute inicialmente sea un valor de false, así que cambiaremos esto para que sea cierto a medida que el juego se está ejecutando, lo que luego evitará que la barra espaciadora reinicie nuestro juego. Tenemos que pegar esto en algunos lugares diferentes. En primer lugar, buscamos nuestra función, que es endgame. Como te imaginas, ya que este es el final del juego, también podemos establecer esta variable de ejecución de juego para que sea igual a false en la función de inicio del juego. Ahora en la parte superior, queremos realizar un cheque para ver si esta variable de juego en ejecución es igual a true. Pase esto dentro de un if declaraciones, si juego se ejecuta. No necesitamos decir igual a verdad o algo así. Si el valor de la ejecución del juego es igual a true, se ejecutará el código dentro de estas llaves. O también podemos colocar esto en una sola línea y quitar las llaves rizadas y luego volver fuera de esta función. Básicamente si la ejecución del juego es igual a true, entonces saltaremos a esta función sin ejecutar el resto del código a continuación. Esto evitará que el juego se reinicie. Si no lo es, si es igual a false, entonces queremos seguir adelante y ejecutar el código a continuación. También diríamos en nuestro juego corriendo variable para ser ahora igual a verdadero. Por lo tanto, esto evitará que esta función se ejecute por segunda vez, si se presiona la barra espaciadora durante el juego. Podemos probar esto, refrescar, presionar “Espacio”, dejar atrás el balón para el marcador y si ahora tratamos de presionar el espacio, el juego no se restablece. Pero sí tenemos otro tema que abordar y para ver esto, si reiniciamos el juego y esperamos para llegar al marcador de tres, pasemos atrás tres veces. Todo está bien, tenemos el texto del ganador es computadora, la puntuación de 3-0. Pero ahora si reiniciamos el juego con la barra espaciadora, el juego se reinicia, pero aún tenemos un puntaje inicial de uno. Pero esperarías que esto fuera cero ya que configuramos esto dentro de nuestra función. ¿ Por qué crees que esto está pasando? Bueno, para saber más, vamos a entrar en nuestra función de puntuación. La función score es el único lugar donde actualizamos cualquiera de estas variables. La función score se está llamando justo por encima del interior de nuestra función collide. Saltar a la función collide y llamamos a esto con nuestra sección if else. Esta es la única función o la única pieza de código que se llama en nuestro juego, que se encarga de actualizar estas variables. Sabemos que esta es una causa de que nuestro puntaje se establezca a uno inicialmente. ¿ Por qué crees que esta función de puntuación se está llamando al inicio de un nuevo juego? Bueno, la razón por la que esto sucede es porque en cuanto el juego haya terminado, nuestra pelota ya sea el lado izquierdo para un marcador, o más en el lado derecho. Tenemos esto controlado por la variable llamada BallX. Sí, en nuestra función de inicio de juego, inicialmente reiniciamos ambas puntuaciones, pero tan pronto como se inicia un nuevo juego, la ubicación BallX sigue tocando uno de los lados, provocando que la función de puntuación correr otra vez. Arreglar esto es bastante simple, todo lo que tenemos que hacer es restablecer la ubicación de BallX para volver al centro cuando comience el juego. El juego comienza justo después de un juego ejecución y antes de restablecer nuestras puntuaciones, también podemos restablecer el valor de BallX para estar en el centro de la pantalla. Vamos a probar esto. Llegamos al final de nuestro juego, que es un marcador de tres. Terminó el juego, ambos de nuestros puntajes ahora se restablecen como se esperaba. Al construir juegos como este, a menudo encontrarás casos de borde como este para trabajar y generalmente es solo un caso de probar cosas diferentes y ver cuál funciona. A continuación, vamos a echar un vistazo a cómo podemos aplicar algún movimiento aleatorio a la pelota cuando rebota. 14. Dirección al horario: Tener ambas variables MoveX y MoVey preestablecidas hace que el juego comience mucho más predecible. Sabemos porque nuestro negativo 2 y nuestros valores negativos 1 qué dirección iría la pelota. Podemos mejorar en esto haciendo esto mucho más aleatorio dentro de una función. Vamos a crear una función justo debajo nuestros textos, llamada movimiento aleatorio. El propósito de esta función es establecer ambas variables con algunos valores aleatorios, lo que significa que ahora podemos eliminar estos valores iniciales. Para establecer estas variables, necesitamos llamar a esta función RandomMovement dentro de GameSart. Localice esta función, llame a nuestra nueva función, que restablecerá nuestras dos variables con un nuevo valor cada vez que comience nuestro juego. Vuelve a nuestra función RandomMovement que generan nuestros dos valores x e y, además de configurar la pelota en direcciones impredecibles. Esto también ralentizará y acelerará un poco el juego debido a los valores y movimientos aleatorios, decir, el movimiento x podría ser mayor o menor, haciendo que se mueva más lento o más rápido. Nuevamente, crea dos variables o dos constantes. Esto es aleatorio x, que será un número aleatorio entre dos y cuatro. Básicamente, vamos a establecer nuestro valor x para que sea igual a 2 o 4 y también bien una dirección positiva o una negativa. Podemos hacer esto accediendo a una función matemática de JavaScript llamada aleatoria. Math.random generará un número aleatorio entre 0 y 1. Pero vamos a multiplicar este valor por 3. Hacer esto nos permitirá generar un número a partir de uno en adelante. También podemos redondear esto recortando este valor. En el método math.ceil, pega esto en. Ahora ya que estamos redondeando nuestro valor, esto o bien nos dará un valor de 1, 2 o 3. Ya que queremos el valor de 2-4, podemos sumar uno más a este valor para darnos nuestro número aleatorio. Vamos a probar esto. Colocar un registro de consola de RandomX, guardar y refrescar el navegador, saltar a la consola. Para ver esto, también necesitaremos llamar a nuestra función GameSart. Press Space, el valor de 2, el valor de 4, 2, 3, 2. Todo esto parece funcionar correctamente. Para nuestra ubicación RandOmy, podemos duplicar esta línea, cambiar el nombre de la variable para ser RandomY. RandomY va a ser un número entre 0 y 2. Este no necesitamos agregar más 1. Podemos usar math.round para redondear este número hacia abajo, dejándonos con un valor desde cero hasta dos. También ahora necesitamos crear dos variables más. Esto va a decidir si tenemos una dirección positiva o negativa. Actualmente, solo tenemos un valor x e y positivo, pero esto también va a sumar a la imprevisibilidad. Const PlusOrminusX. Nuevamente, accederemos a la función JavaScript aleatoria, que es más nos va a dar un número entre 0 y 1. Usando el operador condicional de JavaScript, podemos comprobar si este valor es inferior a 0.5, lo que aproximadamente debería ser una 50/50 chance. Si lo es, devolveremos atrás o guardaremos dentro de esta variable una cadena de negativo. De no ser así, será positivo. Dado que este es un número entre 0 y 1, hay una mitad o una probabilidad 50/50 más o menos de que esto va a ser un valor negativo o positivo. También agregaremos esto a nuestros números pronto. Duplicar esto y la única diferencia esta vez es el nombre de la variable de y Entonces podemos usar estas variables para fusionarnos y crear nuestros nuevos valores de variables MoveX y MoveY. Primero la variable de MoveX. Dado que también estamos devolviendo un valor de cadena para lo positivo o lo negativo, vamos a envolver esto dentro de una función numérica para asegurarnos de que siempre obtenemos un número en lugar de una cadena. A partir de x, PlusorMinusX, agrega esto a nuestro número aleatorio. Por ejemplo, esto podría ser negativo y luego un valor de dos o positivo, o cualquier número entre este rango. Duplicar. Haremos esto por MoVey. También cambia para ser un plus o menos y y el valor de y aleatorio.Este es un número aleatorio positivo o negativo en ambas direcciones, pero voy a añadir una pequeña pieza más de aleatoriedad. Crea constante para almacenar esto en número aleatorio llamado. Simplemente establece esto igual a simplemente math.random. El motivo por el que hacemos esto es agregar un pequeño valor aleatorio a ambas variables. Agrega esto a nuestro primer número, luego a nuestro segundo número, debería ser todo lo que ahora necesitamos. Refresca el navegador. Cada vez que iniciamos el juego, deberíamos ver el balón viajando en una dirección ligeramente diferente. Lo tenemos yendo a la izquierda, lo tenemos yendo bien, lo tenemos subiendo, lo tenemos bajando. También se puede ver que tenemos diversas velocidades diferentes dependiendo de los valores reales para estas dos variables. Esto no ha terminado por nuestra aleatoriedad. Un poco más tarde , veremos cómo agregar algún movimiento aleatorio a dirección de la pelota cuando rebota las paredes y también el pádel también. Hablando de palas, esto es lo que vamos a cubrir en el próximo video, donde veremos cómo mover automáticamente el pádel de la computadora. 15. Movimiento de computadora: En la parte superior de nuestros guiones, tenemos al jugador y también las posiciones de computadora dentro de estas variables. Ambos valores marcan las posiciones del pádel al inicio de nuestros juegos, estar en el centro verticalmente. La posición del jugador que ya nos encargamos con los movimientos dentro de nuestro mango Función de tecla presionada. Ahora también podemos añadir algo de movimiento a la computadora para que el juego sea un poco más jugable. Hagámoslo en una función de pádel computador de dibujar, que es ésta justo aquí. Todo lo que estamos haciendo actualmente es configurar el lienzo.altura dividida por 2, lugares en el centro. Obviamente, no queremos hacer esto igual que arriba. También queremos reemplazar esto por una variable. Nos quitamos la altura del lienzo y lo reemplazamos por la posición de la computadora. Esto significa al igual que la posición del jugador anterior, cada vez que se actualice esta variable y luego llamamos al bucle, nueva posición del también se reflejará lanueva posición delpádel informático. El escenario ext es actualizar esto. Pero, ¿cómo decidimos cómo mover esto? Bueno, podríamos ir realmente complejos e incluir cosas como alguna inteligencia artificial, pero no queremos que este curso sea demasiado complejo, en cambio, vamos a reemplazar esto con algún movimiento simple seguimiento. Para esto abajo en la parte inferior justo encima de nuestro bucle, voy a crear una nueva función que se llama en cada intervalo. El nombre de la función es mover computadora. Esto también necesita ser llamado en cada intervalo, para que podamos agarrar nuestro nombre de función y agregar esto a nuestro bucle. El seguimiento más básico se puede hacer algo como esto. Podemos actualizar nuestra variable de posición de computadora para ser igual a la ubicación de la bola Y. esto efectivamente rastreará la ubicación verticalmente de nuestra pelota, mover la paleta de Computadora para rastrear esto, podemos ver esto? Si volvemos a nuestro navegador, actualice y ahora se puede ver el remo de la computadora moviéndose hacia arriba y también hacia abajo dependiendo de la ubicación del balón. Genial, todo esto funciona bien, pero como se puede ver, esto crea un juego que es imposible para el jugador ganar. Nuevamente, podríamos ir tan complejos como queramos con un movimiento informático. Pero para mantenerlo sencillo, solo voy a agregar una declaración if-else. Esta declaración if-else actualizará gradualmente posición de la computadora dependiendo de si el balón está por encima o por debajo del pádel. Podemos eliminar esto, añadir una declaración if. Donde verificamos si la posición de la computadora actualmente está por debajo de la ubicación actual del balón Y. Recuerde que para el eje y se inicia en 0 en la parte superior y baja en una dirección positiva. El balón está por debajo del pádel. Podemos entonces actualizar la variable de posición de la computadora para movernos hacia el balón. Esto se puede hacer agregando plus, plus, lo contrario si es la dirección opuesta, queremos mover el pádel del equipo en la dirección inversa. Podemos hacer esto dentro de aquí. Probemos esto. Refresca y prueba esto. Rebota la pelota hacia atrás. Se puede ver que la computadora ahora se está moviendo. Ahora es un juego ganable. También puedes si quisieras acelerar o ralentizar los pasos que toma el remo de la computadora para ir hacia la pelota. Pero esto es completamente opcional, y esto también puede necesitar ser afinado también dependiendo de qué tan rápido se esté ejecutando el bucle. Genial. Este es un movimiento de computadora muy básico y el siguiente mejorará aún más el juego añadiendo algo de aleatoriedad adicional al movimiento de la pelota. 16. Bouncing al azar: El balón que actualmente rebota en todas las paredes y las palas es un poco predecible. Actualmente cada rebote está a 90 grados, lo que a menudo nos deja con una situación en la que la pelota a veces puede dar vueltas en una plaza, y rebota de las palas sin siquiera necesidad de movernos ellos. Para mejorar en esto, agregaremos algo de aleatoriedad a nuestro rebote de pádel para que nuestro juego sea un poco mejor. Para ello, necesitamos una función. Vamos a crear una función en cualquier parte nuestro código con el nombre de generar rebote aleatorio. Agrega algo de aleatoriedad. No necesitamos hacer nada demasiado loco o complejo. Si primero subimos a nuestra función de colisión, las dos últimas declaraciones si verifican el contacto de pádel tanto para el jugador como para el pádel del equipo. Actualmente, cuando hay algún contacto entre el balón y el pádel, todo lo que estamos haciendo con estas dos líneas de código aquí es invertir la dirección. Lo hacemos estableciendo una dirección positiva a una negativa y también al revés también. Para agregar un poco de aleatoriedad, todo lo que tenemos que hacer es agregar un pequeño valor positivo o negativo a cualquiera de estas líneas, que podemos volver de nuevo de nuestra nueva función. Dentro de esta función, primero vamos a generar un número entre cero y uno. Cero y uno nos da dos opciones, que luego podemos usar para decidir si vamos a crear un número positivo o negativo. De nuevo, usamos Math.floor para redondear nuestro número hacia abajo. El número que se quiere redondear hacia abajo se va a generar con Math.Random para darnos un número entre cero y uno. Recuerda toda la Math.Random genera un número aleatorio entre cero y uno. En realidad no incluye uno. Por ejemplo, irá todo el camino hasta 0.999. número de aleatoriedad abajo siempre nos dará un valor de cero. Para obtener un valor entre cero y uno, podemos multiplicar esto por dos, instalar esto dentro de una constante llamada número cero a uno. Estas dos opciones ahora se pueden usar para crear un símbolo positivo o negativo, igual que lo miramos antes. Almacenar esto dentro de una constante, positiva o negativa. Entonces vamos a agarrar nuestra variable desde arriba, que es cero o uno. Vamos, digamos si esto es igual a una de las opciones que es cero, usando las declaraciones condicionales de JavaScript, la primera opción devolverá un valor negativo. Si no se separa por dos puntos, devolverá un símbolo positivo. Si esto devuelve un cero, obtendremos un símbolo negativo. Si devuelve uno, obtendremos un símbolo positivo. Recuerda, ya que estamos devolviendo una cadena, también necesitamos envolver los resultados dentro de la función numérica. Asegúrate de que siempre recuperemos un número en lugar de una cadena. Regresamos el símbolo que es positivo o negativo, y añadimos esto igual a un valor pequeño. De nuevo, usamos Math.random para darnos un número entre cero y uno y también para hacerlo un poco más de un valor menor, lo dividiremos por dos. Si entonces devolvemos este valor de nuestra función, esto devolverá un número que es un número positivo o un negativo entre el valor de cero y 0.5. Con esto siendo un valor tan pequeño que ahora estamos regresando, ¿cómo decimos si esto se está agregando a nuestro rebote o no? Bueno, primero podemos ver esto con un registro de consola. Si echamos un vistazo a nuestra Función Cloud y en nuestras dos últimas secciones que miramos antes, podemos añadir esto al contacto de pádel jugador justo por encima de donde hacemos el cambio de dirección en un registro de consola con el valor de mu de x Copiar esto y hacer exactamente lo mismo justo después. Cada vez que la pelota rebota de los jugadores del pádel, deberíamos ver dos registros de consola con el valor de mu de x Recuerda que no hemos agregado valor aleatorio diferente a ninguno de nuestros cambios de dirección solo todavía. Estos dos valores deben ser exactamente iguales o lo contrario en términos de positivo o negativo. Probemos esto. Refresca y salta a la consola. Comienza nuestro juego, y ahora hacer algún contacto entre el charco, y podemos ver que tenemos negativo 2.49 y también el equivalente positivo. Dado que estos números son exactamente los mismos, esto demuestra que todo lo que estamos haciendo es invertir la dirección en 90 grados. Pero si ahora seguimos adelante y sumamos nuestro pequeño valor aleatorio, deberíamos ver dos valores diferentes dentro de la consola. Ahora, agregaremos nuestro pequeño volumen el cual se devuelve de vuelta de nuestra función llamada generar límites aleatorios. También lo mismo con el pádel de la computadora también. Ahora, si probamos esto, deberíamos ver el pequeño valor devuelto y agregado de nuestra función, y esto debería ser valores ligeramente diferentes para darnos un cambio de dirección diferente con nuestra pelota. Refrescar. Ahora, si hacemos algunos contactos, ahí vamos. Genial. Ahora, hay mucho pasando aquí pero si echamos un vistazo a estos en parejas. Los dos primeros pares, hay 3.55 negativos, que luego se invierte para ser un valor positivo de 3.22. Con estos dos valores ligeramente diferentes, esto significa que nuestro valor de rebote ahora ha surtido efecto. Si nos fijamos en el segundo par, de nuevo, ahora no sólo estamos cambiando el valor de un positivo a otro negativo, también cambiaremos ligeramente cualquier valor límite. Esto es cierto para todas las parejas que siguen también. El pequeño cambio puede marcar una gran diferencia y hacer que nuestro juego sea mucho menos predecible. También detienen la pelota dando vueltas en una plaza en el Lienzo también. A continuación vamos a echar un vistazo a cómo podemos restringir nuestro pádel para que no salga del Lienzo. 17. Mantener el padel en el lienzo: A medida que nos acercamos al final de nuestro juego, uno de los toques finales que se quiere agregar es restringir las paletas de los jugadores para que no se salga la parte superior ni de la parte inferior del lienzo, cuando presionamos el teclas arriba y abajo. Para ello, nos dirigiremos a la función HandleKeyPrespressed para agregar nuestro código que es necesario para restringir esto. Esta función HandleKeyPrespressed es el área en nuestro código que detecta si presionamos la flecha hacia arriba o la flecha hacia abajo. El enunciado switch es responsable de entonces mover a los jugadores remando en dirección ascendente o en dirección descendente. Dentro de aquí, empezando por el caso de flecha hacia arriba, vamos a añadir algún código para restringir que los pétalos de los jugadores salgan de la parte superior del lienzo. Para ello, antes de mover nuestra posición de jugador por cualquier valor en particular, agregaremos una declaración if para comprobar esto. Si algo es cierto, entonces queremos volver fuera de esta sección sin mover la posición del jugador. Hay algo que queremos comprobar es la posición del jugador. Recuerda cuando estamos hablando la variable de posición del jugador, esta es la línea central del pádel. Para encontrar la parte superior misma del pádel, necesitamos deducir la mitad de la altura del pádel y encontrar la parte inferior del pádel para asegurarnos de que no se vaya de la parte inferior del lienzo. También necesitamos sumar la mitad de la altura del pádel también. Podemos usar esto dentro de nuestra declaración if. Saliendo de la ubicación superior dentro de nuestra declaración if. En primer lugar, vamos a agarrar la posición actual del jugador. Del mismo modo que hemos visto en los toboganes, deduciremos la altura del pádel dividida por 2. Esto nos dará el punto más alto de nuestro pádel. Tenemos que comprobar si esto es menor o igual a 0, que es la parte superior misma de nuestro lienzo. Si lo hace, entonces regresaremos a esto sin mover la posición del jugador. Entonces en la sección flecha hacia abajo, haremos una declaración similar if donde comprobaremos si la posición del jugador, esta vez vamos a sumar la mitad de la altura del pádel, ya que estamos lidiando con el fondo del pádel. Aquí, estamos comprobando si la parte inferior del pedal es igual o mayor que la parte inferior del lienzo, que podemos encontrar con lienzo.height. Mayor o igual, en el lienzo.height, si esto es cierto, volverá a salir de esto sin mover la posición del jugador, por lo que no irá más allá de la parte inferior del lienzo. a prueba esto, presiona la barra espaciadora y iremos directo a la parte superior. El lugar pádel no va más allá de la parte superior. Mueve esto hacia abajo al fondo. Ahora está restringido el pádel de jugadores para permanecer dentro del área de lienzo. 18. Reflexiones finales: [ MÚSICA] Esto es ahora por el final de nuestro juego y felicitaciones por llegar a esta etapa. Ahora hemos aprendido algunos conceptos centrales y aunque nuestro juego no es perfecto, es jugable, hemos aprendido todos los conceptos que necesitamos para comenzar el desarrollo de juegos JavaScript. Espero que lo hayas disfrutado. Espero que hayas recogido algunas nuevas habilidades y ansiosas por sumergirte en la construcción de más juegos basados en JavaScript. Gracias por tomar esta clase, y te veré en la siguiente.