7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

Cómo Hacer un Juego en Línea con HTML5 y Box2D

Scroll to top
Read Time: 14 mins

Spanish (Español) translation by Dacia Egurrola (you can also view the original English article)

HTML5 está creciendo increíblemente rápido. En estos momentos se están desarrollando soluciones poderosas y profesionales... ¡hasta en el mundo del juego online! Échales un vistazo a los cientos de juegos HTML disponibles en Envato Market.

Hoy, aprenderás cómo hacer un juego en línea y harás tu primer juego online usando Box2D y la etiqueta canvas de HTML5.

¿Qué es Box2D?

Box2D es un popular motor de código abierto que simula la física bidimensional para crear juegos en línea y aplicaciones. Inicialmente escrito en C ++, ha sido convertido a numerosos lenguajes por los contribuidores de la comunidad.

Con los mismos métodos y objetos, tienes la capacidad de hacer la física de tus juegos virtuales en muchos lenguajes, como Objective C (iPhone / iPad), Actionscript 3.0 (Web), HTML 5 (Web), etc. Básicamente, con Box2D podrás sentar la fundación física para crear millares de juegos en línea.

Paso 1 - Configurando el Proyecto

Para saber cómo hacer un juego online y comenzar a desarrollar tu demo, descarga el motor Box2D para HTML5 aquí. A continuación, crea un nuevo archivo de juegos HTML con la siguiente estructura (copia los directorios js y lib del proyecto box2d-js a tu carpeta de juegos virtuales).

como hacer un juego con html5como hacer un juego con html5como hacer un juego con html5

Ahora, debes insertar los archivos necesarios para ejecutar box2D en el archivo de tus juegos HTML:

¡Eso es una gran cantidad de peticiones HTTP!

Ten en cuenta que, para la implementación, se recomienda fuertemente que concatene todos estos recursos en un archivo script.

A continuación, crea dos scripts más dentro de la carpeta /js, llamados "box2dutils.js" y "game.js".

  • box2dutils.js - es una copia de algunos demos que vienen con box2dlib y es importante para las funciones de dibujo (también explicaré algunas partes importantes aquí).
  • game.js - el juego, en sí mismo; aquí es donde creamos las plataformas, el jugador, aplicamos las interacciones del teclado, etc.

Copia y pega el siguiente código en box2dutils.js. ¡No te preocupes! ¡Lo explicaré poco a poco!

Paso 2 - Desarrollando el Juego en Línea

Abre el archivo index.html que creaste previamente y agrega un elemento canvas (600x400) dentro del elemento body. Aquí es donde trabajaremos con la API de dibujo HTML5:

Además, mientras estás aquí, haz referencia a game.js y box2dutils.js.

¡Eso es todo lo que necesitas para hacer juegos HTML! Ahora trabajaremos en JavaScript, que es más divertido.

Abre game.js, e inserta el siguiente código:

Box2DWorld - La Razón por la que Estamos Aquí

De acuerdo, ¡descubramos qué hace este pedazo de código!

Box2DWorld es una de las clases que está disponible, a través del núcleo de box2d. Su función es simple: combinar todo en una sola clase. En box2DWorld, tienes la definición de cuerpos y el administrador de colisiones de tu juego online o aplicación.

Mantén abiertos los archivos game.js y box2dutils.js y busca la función createWorld() dentro de box2dutils.js.

Es bastante simple crear el box2DWorld.

Volviendo a game.js

Refiérete a los números comentados en los dos bloques del código anterior. En el número dos, recupera el contexto del elemento canvas mediante el uso de la API de selector (se parece a los selectores de jQuery o MooTools, ¿verdad?). En el número tres, tenemos una nueva función interesante: initGame(). Aquí es donde creamos la escenificación.

Copia y pega el siguiente código en game.js, y luego lo revisaremos juntos.

Box2DBody

Un Box2DBody tiene algunas características únicas:

  • Puede ser estático (no se ve afectado por los impactos de las colisiones), cinemático (no se ve afectado por las colisiones, pero se puede mover con el mouse, por ejemplo) o dinámico (interactúa con todo)
  • Debe tener una definición de forma, y ​​debe indicar cómo aparece el objeto
  • Puede tener más de un accesorio, que indica cómo el objeto interactuará con colisiones
  • Su posición está establecida por el centro de su objeto, no por el borde superior izquierdo como lo hacen muchos otros motores.

Revisando el código:

  1. Aquí, creamos una definición de forma que será un cuadrado o rectángulo, y configuramos su densidad (con qué frecuencia se moverá o rotará por fuerzas).
  2. Configuramos el userData, generalmente se configuran objetos gráficos aquí, pero en este ejemplo, simplemente configuramos cadenas de texto que serán el identificador del tipo de objeto para colisiones. Este parámetro no afecta los algoritmos de la física.
  3. Configuración de la mitad del tamaño de mi caja (es una línea desde el punto de posición, o el punto central del objeto hasta una esquina)
  4. Creamos la definición del cuerpo y le agregamos la definición de la forma de caja.
  5. Configura la posición.
  6. Crea el cuerpo en el mundo y devuelve su valor.

Creando el Cuerpo de Bola del Jugador

He codificado al jugador (bola) directamente en el archivo game.js.  Sigue la misma secuencia de crear cajas, pero, esta vez, es una pelota.

Entonces, ¿cómo creamos un cuerpo, paso a paso?

  1. Crea la forma, el accesorio y la definición del sensor
  2. Crea la definición del cuerpo
  3. Agrégale su forma, accesorios o sensores (no explicados en este artículo)
  4. Crea el cuerpo en el mundo

Box2DCircle

Como dije anteriormente, esto sigue el mismo proceso de creación de una caja, pero ahora debes establecer algunos parámetros nuevos.

  • radio - Esta es la longitud de una línea desde el centro del círculo hasta cualquier punto de su borde.
  • restitución - Cómo la bola perderá o ganará fuerza cuando colisione con otro cuerpo.
  • fricción - Cómo rodará la pelota.

Box2DBody - Más Propiedades

  • damping (amortiguación) se usa para reducir la velocidad del cuerpo; hay amortiguación angular y amortiguación lineal.
  • sleep en box2D, los cuerpos pueden dormir para resolver problemas de rendimiento. Por ejemplo, supongamos que estás desarrollando juegos en línea de plataforma, y ​​el nivel está definido por una pantalla de 6000x400. ¿Por qué necesitarías resolver la física de objetos que están fuera de la pantalla? ¡No lo hagas! La elección correcta es dormirlos y mejorar el rendimiento del juego en línea.

Ya hemos creado nuestro mundo; puedes probar el código que tienes hasta ahora. Verás al jugador caer desde la plataforma oeste.

Ahora, si trataste de ejecutar la demostración, debes preguntarte, ¿por qué la página parece un papel en blanco?

computadoracomputadoracomputadora

Siempre recuerda: Box2D no se procesa; solo calcula la física.

Paso 3 - Tiempo de Renderizado

A continuación, rendericemos el box2DWorld.

Abre tu script game.js y agrega el siguiente código:

Lo que logramos aquí:

  1. Instruir a box2dWorld para realizar simulaciones físicas
  2. Limpiar la pantalla-lienzo y dibujar una vez más
  3. Ejecutar la función step() nuevamente en diez milisegundos

Con este pedacito de código, ahora estamos trabajando con física y dibujo. Puedes ponerlo a prueba y tratar de hacer caer una bola, como se demuestra a continuación:

drawWorld en box2dutils.js

Lo que hemos escrito arriba es una función de depuración que dibuja nuestro mundo en el lienzo, utilizando la API de gráficos proporcionada por la Canvas API de HTML5.

El primer ciclo dibuja todas las articulaciones. No usamos articulaciones en este artículo. Son un poco complejas para una primera demostración; sin embargo, son esenciales para los juegos virtuales. Te permiten crear cuerpos muy interesantes.

El segundo ciclo dibuja todos los cuerpos, ¡por eso estamos aquí!

Estamos recorriendo todos los vértices del objeto y dibujándolo con líneas (context.moveTo y context.lineTo). Aunque es útil tener un ejemplo, no es tan útil en la práctica. Cuando utilizas gráficos, solo necesitas prestar atención al posicionamiento de los cuerpos. No es necesario iterar vértices, como lo hace esta demostración.

Paso 4 - Interactividad

Un juego sin interactividad es una película, y una película con interactividad es un juego.

Desarrollemos la funcionalidad de la flecha del teclado para saltar y mover la pelota.

Agrega el siguiente código a tu archivo game.js:

Con handleKeyDown y handleKeyUp, configuramos un array que rastrea cada tecla que escribe el usuario. Con document.onkeydown, deshabilitamos la función de desplazamiento vertical nativa del navegador para flechas de arriba y abajo. ¿Alguna vez has jugado juegos virtuales con HTML5 y cuando saltas, el jugador, los enemigos y los objetos salen de la pantalla? Eso no será un problema ahora.

Agrega este siguiente bit de código al comienzo de tu función step():

Y afuera, declara la función:

La parte más complicada del código anterior es la primera, donde verificamos una colisión y escribimos algunas condiciones para determinar si shape1 (forma1) o shape2 (forma2) es el jugador. Si es así, verificamos si shape1 o shape2 es un object de tierra. De nuevo, si es así, el jugador está colisionando con el suelo. A continuación, verificamos si el jugador está sobre el suelo. Si ese es el caso, entonces el jugador puede saltar.

En la segunda línea comentada (2), recuperamos la LinearVelocity del jugador.

La tercera y cuarta regiones comentadas verifican si se presionan flechas y ajustan el vector de velocidad de acuerdo a eso.

En la quinta región, configuramos el jugador con el nuevo vector de velocidad.

¡Las interacciones ahora están hechas! Pero no hay objetivo, solo saltamos, saltamos, saltamos ... ¡y saltamos!

Paso 5 - Mensaje "Ganaste"

Agrega el código siguiente al comienzo de la función LinearVelocity:

  • La primera condición determina si el jugador cae y debe ser transportado de regreso al punto de inicio (arriba de la plataforma oeste).
  • La segunda condición verifica si el jugador está por encima de la segunda plataforma y ganó el juego. Aquí está la función showWin().

¡Y eso es todo! Acabas de aprender cómo hacer un juego en línea simple con HTML5 y Box2D. ¡Felicitaciones!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.