Cómo crear pong en su juego html5

Ningún juego HTML5 desarrollo discusión estaría completa sin una mención del famoso juego de Pong. Si bien esto no era técnicamente el primer videojuego, fue el primero en llamar la atención popular, y es, de lejos, uno de los juegos más influyentes jamás se ha hecho.

Construir la paleta juego

El objeto de pádel es bastante sencillo, pero en realidad hay dos paletas con diferentes comportamientos. En esta versión del juego, la paleta de la izquierda se controla por el jugador, y la paleta de la derecha es controlado por un equipo de AI. Un solo objeto paleta puede servir ya sea como jugador o una paleta de AI. La paleta jugador simplemente sigue el ratón:

 tPaddle.followMouse = function () {// sigue ratón para el jugador controlthis.setImgAngle (90) -this.setPosition (this.x, scene.getMouseY ()) -} método followMouse final //

Añadir estupidez artificial para su juego

En realidad es muy fácil de construir una Inteligencia Artificial (AI) para el oponente. Basta con establecer el valor de la pala Y igual al valor Y de la pelota. Sin embargo, esto va a ser aburrido, porque el oponente nunca se perderá, y siempre golpear la pelota de lleno en el medio de la paleta, por lo que es fácil volver. Esto no es divertido en absoluto. Dar la paleta AI algún tipo de problemas de atención.

La IA no debe seguir directamente el balón. En su lugar, se debe comprobar para ver si la bola está por encima o por debajo de ella, y responder en consecuencia.

Se añadieron dos variables para controlar el movimiento de la paleta de AI. los CEREBROS constante es un porcentaje. Si CEREBROS se establece en 0,5, la paleta comprobará ubicación bola sólo la mitad del tiempo. Para un juego más fácil, establezca la CEREBROS bajo valor.

El otro valor principal es V_SPEED, o la velocidad vertical de la paleta. Esto indica la rapidez con la paleta se moverá hacia la pelota. Un valor más alto creará una más potente reproductor de AI. Encontrar la combinación adecuada de estos dos valores para obtener el comportamiento de la IA que desea. Aquí está el código para el AutoMove () Método:

 tPaddle.autoMove = function () {// automáticamente movesthis.setImgAngle (90) - // no se mueven en cada turnif (Math.random () lt; CEREBROS) {if (this.y> pelota.y) {this.setMoveAngle (0) -} else {this.setMoveAngle (180) -} // fin ifthis.setSpeed ​​(V_SPEED) -} // end if} // terminar AutoMove

Construir una pelota para rebotar en las fronteras

Mientras la pelota es un sprite aparentemente simplista, que sí tiene un comportamiento interesante. La bola tiene un esquema de límites de comprobación único. Que rebota en la parte superior e inferior de la pantalla, pero si se deja a los lados, se envuelve.

Si usted no tiene un esquema de límites que se ajuste a uno de los patrones estándar, simplemente puede sobrescribir la checkBounds () método para hacer lo que quieras. (Tenga en cuenta que no es necesario llamar explícitamente checkBounds (). Se llama automáticamente por la década de los sprites update () método. Su versión personalizada de checkBounds simplemente reemplaza la versión incorporada. Aquí hay una variante:

 tBall.checkBounds = function () {// sobrescribir checkbounds funcionan para dar // comportamiento personalizado // rebotar en la parte superior y bottomif (this.y lt; 0) {this.setDY (this.dy * -1) -} if (this.y> scene.height) {this.setDY (this.dy * -1) -} // envolver fuera de sidesif (this.x lt; 0) {this.setPosition (scene.width - 150, this.y) - // puntajes informáticos} // fin IFIF (this.x> scene.width) {this.setPosition (150, this.y) - // jugador marca} // fin si} // checkBounds finales

Si el balón golpea en la parte superior o inferior de la pantalla, invertir dy para hacer que rebote. Si impacta la izquierda oa la derecha de la pantalla, moverlo a otro lado.

Ponga un poco de giro en el juego de pelota

En las versiones tradicionales de Pong, el balón puede ser controlado por la elección, donde en la raqueta para golpear la pelota. Si usted golpea la bola en la parte superior de la pala, la pelota se moverá hacia arriba. Si usted golpea la pelota cerca del centro de la paleta, volará a través de la pantalla horizontalmente, y si se golpea en la parte inferior, la pelota se moverá hacia abajo.

 tBall.checkBounce = function (paddle) {// responde a una colisión con la pala dada // Max y min DYMAX = 10Si (this.collidesWith (paleta)) {this.setDX (this.dx * -1) -dy = this.y --paddle.y dy = ((dy / paddle.height) * 2) -dy * = MAX-this.setDY (dy) -} // end if} // checkBounce final

los dx valor es fácil de calcular, ya que simplemente invierte dx para moverse en la otra dirección. los dy valor se calcula mediante la determinación de la diferencia entre la bola de y posición y la de la paleta:

1. Determinar un máximo dy.

   Este valor determina el nivel más alto de la desviación que lo permiten. Si el MAX valor se establece en 10, la bola de dy valor será -10 en la parte superior de la paleta, 0 en el medio, y 10 en la parte inferior de la paleta.

2. Invertir dx.

   Si la pelota se mueve hacia la izquierda, se multiplica el dx valor -1 a hacer que se vaya a la derecha. Si va bien, la misma operación (multiplicar por -1) hará ir a la izquierda. Cualquier colisión paddle invierte la bola de dx.

3. Encuentra la diferencia prima en y los valores.

   Calcula a qué distancia de la y valor de la paleta y la pelota son.

4. Normalizar este valor.

   Si se divide la prima dy valor por la altura de la paleta, obtendrá un rango entre -.5 y 0.5. Multiplique ese valor por 2 para obtener un -1 a 1 rango.

5. Multiplique el normalizada dy por MAX.

   Multiplicando la normalizada dy por el valor MAX valor dará un dy valor entre -MAX y MAX.

¿Cómo mejorar el juego Pong

Si bien este juego Pong tiene el comportamiento básico hacia abajo, es lejos de estar listo para el juego real. Aquí están algunas cosas a considerar la adición:

• Añadir un atractivo estético. Usted puede hacer mucho para que se vea mejor, desde la personalización de las paletas para añadir animaciones de pelota y efectos de sonido.

• Añadir registro de resultados. Añadir la capacidad de rastrear las puntuaciones de usuario y equipo. También añadir un poco de manera de determinar el final del juego.

• Añadir power-ups. Cambiar el tamaño de cada paleta, invertir el control del jugador de pádel, cambie la velocidad de la bola, hacer que la pelota de vez invisible, o invertir el algoritmo de colisión bola de pádel para empezar.

• Ponga a punto la IA. Se pone muy nerviosa cuando la pelota se desplaza en una trayectoria plana. Vea si usted puede encontrar una manera de suavizar este comportamiento.