Juego básico de Pong en HTML5

HTML5, Juegos

Esperando un poco al libro de symfony2 que está escribiendo Javier Eguiluz y que espero como agua de mayo me he puesto a mirar un poco el html5 y la posibilidad de realizar algun que otro jueguillo, el único libro en español que encontré era el de HTML5 Canvas que trata al final un poco el tema de juegos, pero ya sabemos como salen los libros traducidos… casi al doble de precio, por ello me he puesto a leer HTML5 games development by example a ver si soy capaz de terminarlo :)

En este juego lo que haremos será utilizar los elementos del DOM otra opción podría ser dibujar dinámicamente sobre la nueva etiqueta canvas que sería como un lienzo.

Para esto usaremos jQuery que podremos descargar desde su web cuya versión actualmente es la 1.7.1 y lo guardaremos en una carpeta llamada js donde tengamos nuestro html que en este caso llamare pong.html y le añadimos el siguiente contenido básico que es la estructura básica.

[codesyntax lang=”html5″]

[/codesyntax]

No tiene mucho que explicar la primera línea es la que se usará a partir de ahora en html5 pues no tenía sentido tener que andar poniendo versiones cada dos por tres.

En html5 se añaden nuevos tags como header y footer que sirven para estructurar bien la web y facilitar a los buscadores que es cada cosa dentro de la web.

Finalmente añadimos el código javascript que nos mostrará una alerta si jQuery está bien cargado.

Pong jQuery Funcionando

Es recomendable siempre que se pueda añadir el código js al final antes de la etiqueta </body> ya que la carga de la página al ser hacía bajo si lo colocamos en el head la página no se mostrará hasta que este todo el código cargado.

Quien no conozca la sintaxis de jQuery decir que al igual que otros frameworks como prototype tienen el método corto para ejecutar una función $

[codesyntax lang=”javascript”]

[/codesyntax]

es lo mismo que

[codesyntax lang=”javascript”]

[/codesyntax]

Ahora que ya sabemos que tenemos jQuery bien cargado dibujemos los objetos de nuestro juego.
Entre las etiquetas </header> y <footer> añadimos

[codesyntax lang=”html5″]

[/codesyntax]

y en la cabecera, antes de </head> añadimos el css (lo normal y correcto sería añadirlo en fichero aparte)

[codesyntax lang=”css”]

[/codesyntax]

Ahora por separar la lógica del juego crearemos un nuevo fichero javascript dentro de la carpeta js al que llamaremos pong.js y realizaremos su llamada debajo de donde llamábamos a jquery y borramos el código js que ejecutaba la alerta

[codesyntax lang=”html5″]

[/codesyntax]

y viéndolo en el navegador tendremos Tutorial juego pong en html5
Si no se mueve no os preocupéis xD todavía no hemos hecho nada, simplemente hemos añadido una capa fondo y dentro de ella tres capas: bola, palaA y palaB y con el CSS le hemos dado la forma y el color deseados. Una buena idea para controlar las posiciones de los objetos es usar una grilla como fondo, usando una rápida (por no usar la del libro) queda: Tutorial juego Pong en HTML 5Si la queréis usar aquí la tenéisPixel GridSólo hace falta cambiar el background en el css del fondo  a

[codesyntax lang=”css”]

[/codesyntax]

suponiendo que el grid está en la carpeta  imágenes. Y ahora vamos a ponernos un poco con la lógica del juego. Lo primero que haremos será mover las palas, como está pensado para dos jugadores usaremos las teclas de W,S para el jugador 1 y las teclas de flecha arriba y abajo para el jugador 2. Dentro del fichero pong.js añadimos

[codesyntax lang=”javascript”]

[/codesyntax]

Primero creamos constantes con el valor de cada tecla pulsada si no sabemos cual es el valor podemos usar

[codesyntax lang=”javascript”]

[/codesyntax]

justo al comienzo de la función antes de switch y después desde firebug en firefox o en la consola de desarrolladores en chrome ver su valor En chrome pulsamos botón derecho Inspeccionar Elemento ( o botón configuración (el de la llave inglesa del navegador) /Herramientas/Herramientas para desarrolladores ) Y luego en la pestaña de Consola y cada vez que pulsemos una tecla nos saldrá su valor además podemos ejecutar código directamente desde ahí.

Usando la consola JSIncluso si tenemos algún tipo de error también nos saldrá aquí. Siguiendo con el código que hemos escrito vemos que cada vez que se pulsa una tecla comprobamos que tecla  ha sido creamos una variable top con la posición de la pala a mover El método css de jQuery admite uno o dos parámetros, si solo le pasamos 1 sería el nombre de la propiedad y nos devolvería su valor, actuaría igual que un getter; en cambio si le pasamos dos parámetros, el primero sería la propiedad y el segundo el valor que queremos guardar en ella, por lo tanto actuaría como un setter. Otra opción podría ser pasarle un array donde indicamos varios parámetros a cambiar.

[codesyntax lang=”javascript”]

[/codesyntax]

En este caso vemos que leemos el valor de la propiedad top pero debemos antes parsearla pues nos devuelve el valor con unidades incluidas, por ejemplo 100px, por lo que no podríamos realizar operaciones matemáticas con ella. El siguiente paso es sumar o restar un valor según la pala suba o baje. Por ahora tenemos: En chrome, firefox y safari funciona bien, si dejas las teclas pulsadas se mueve de continuo, en opera si la dejas pulsada solo se mueve una vez y en ie… pues al principio no me funcionó pero pulse F12 para ver las herramientas de desarrollador y ya me empezó a funcionar :S Si abrimos la página podremos mover las palas con las teclas, pero sólo podemos mover una cada vez así que vamos a arreglar esto. Borramos todo el código de pong.js y añadimos

[codesyntax lang=”javascript”]

[/codesyntax]

Primero hemos creado un contenedor global llamado pong donde guardaremos nuestras variables globales, es una forma de evitar que haya variables globales con el mismo nombre si cargas dos juegos en la misma página, por ejemplo. Sería como si usásemos namespaces. Dentro de ella guardamos nuestro array donde guardaremos las teclas pulsadas Después creamos un timer que cada 30 milisegundos llame a la función gameloop y también hacemos que cada vez que se presione una tecla está se guarde en el array teclas con el valor de true y si se deja de presionar se pone su valor a false.  Tal y como está guarda todas las teclas pulsadas sean o no del juego en este caso tampoco es que afecte pero si solo queremos que almacene nuestras 4 teclas soló tendríamos que comprobar con un if o un switch si es o no una de las 4 que usamos.

[codesyntax lang=”javascript”]

[/codesyntax]

Finalmente llamamos a la función moverPalas en cada tick y lo que hacemos es comprobar si las teclas están a true y en caso afirmativo mover su pala correspondiente. Ahora es el momento de hacer que la bola se mueva Primero, tras declarar el objeto global pong añadimos los valores por defecto de la bola

[codesyntax lang=”javascript”]

[/codesyntax]

Velocidad, posición x e y así como la dirección de la bola cuando dirX es positivo la bola se mueve hacia la derecha y hacía la izquierda si es negativo; si dirY es positivo se mueve hacia abajo y si es negativo hacia arriba. Luego añadimos una nueva función a llamar en cada tick de reloj (dentro de gameloop)

[codesyntax lang=”javascript”]

[/codesyntax]

e implementamos dicha función

[codesyntax lang=”javascript”]

[/codesyntax]

Primero creamos 5 variables locales para facilitar su acceso dentro de la función, después comprobamos que si la posición de la bola en Y en su próximo movimiento se sale del fondo cambie de dirección y lo mismo si se sale por los lados. (En esté código no hay colisiones con las palas simplemente rebota en todas las paredes del fondo)
Finalmente sumamos el paso de la bola a cada posición multiplicando la dirección por la velocidad y manipulamos su posición dentro del css

Pongámonos con las colisiones

Dentro de la función mover bola, al final justo antes de cambiar las propiedades css de la bola añadimos

[codesyntax lang=”javascript”]

[/codesyntax]

Creamos las variables para facilitar la escritura de las posiciones de la pala así como los limites superior e inferior de la misma. Hay que tener en cuenta que la posición de golpe de la bola de la palaA (la de la izquierda) sería su propiedad left más el ancho pero la de la palaB sólo sería la propiedad left.

De todas formas las colisiones de esta forma no son muy exactas para objetos que no sean rectángulos o cuadrados aún así se podría mejorar un poco el rebote teniendo en cuenta el ancho de la bola os lo dejo para que lo penséis :)

Ahora hagamos que cuando un jugador pierda la bola vuelva al medio

para ello borramos el if de //hacemos que rebote en las paredes

[codesyntax lang=”javascript”]

[/codesyntax]

Bueno y finalmente nos quedaría mostrar los resultados para ello dentro del fichero html añadimos

[codesyntax lang=”html5″]

[/codesyntax]

y en el fichero js a la vez que creamos el objeto pong creamos dos variables para almacenar los resultados

[codesyntax lang=”javascript”]

[/codesyntax]

y cada vez que pierda un jugador le sumamos un punto al contrario y lo mostramos con el método .html de jQuery.

[codesyntax lang=”javascript”]

[/codesyntax]

y

[codesyntax lang=”javascript”]

[/codesyntax]

Y con esto y un bizcocho… tenemos nuestro pong básico… se puede mejorar de muchas formas, hacer que las palas no se marchen de la pantalla, que la bola vaya cogiendo velocidad después de un tiempo, mejorar las colisiones tanto con las palas como con la parte inferior del fondo… pero bueno… es un simple ejemplo básico ya se irá profundizando en cosas más interesantes.

[codesyntax lang=”html5″ title=”pong.html” blockstate=”collapsed”]

[/codesyntax]

Y el código js que he modificado un poco para mejorar las colisiones y aumentar la velocidad de la bola con el tiempo

[codesyntax lang=”php” title=”pong.js” blockstate=”collapsed”]

[/codesyntax]

Deja un comentario

  • (will not be published)


+ 9 = 15