HTML y Javascript, primeros pasos – juego web

¡Comienza a conocer los lenguajes HTML y Javascript!

HTML y Javascript

HTML y Javascript

HTML y Javascript: las bases de la web moderna

Hechos al fin todos los preparativos e instalaciones, finalmente llegó el momento de comenzar a programar. En este caso, utilizaremos dos pilares de la web moderna: HTML y Javascript.

En concreto, usaremos el estándar más reciente de HTML que es el HTML5 (que en realidad sigue todavía en desarrollo, en teoría hasta 2020). Esto no es propiamente dicho un lenguaje de programación, pero nos permite dar estructura a la web. En este caso, como estamos creando un juego, no vamos a construir una web al uso. Sólo necesitamos la estructura básica para ejecutar nuestro Javascript. Simplemente crearemos un archivo de unas pocas líneas. A partir de ahí, seguiremos sólo con Javascript.

Y ahora sí, llegó el momento de comenzar a programar en Javascript. Se trata de un lenguaje bastante antiguo aunque muy popular y más vivo que nunca. Muchos programadores infravaloran a Javascript. Es popularmente considerado lento y raro en su sintaxis. En cualquier caso, prejuicios aparte, Javascript es un lenguaje excelente para construir un juego web.

La primera estructura que debemos desarrollar es el bucle principal. Se trata de un mecanismo que permite ejecutar nuestro juego sin parar (sin que se detenga sólo). De esta forma, gracias al navegador, podremos sincronizar el juego a 60 FPS. Esto es posible en cualquier navegador moderno. De esta forma, nuestro juego se ejecutará de forma suave y rápida.

Por supuesto, aun con todo, siempre nos interesará seguir el rastro a los FPS. Para ello crearemos un sencillo contador FPS. Con esta útil herramienta, sabremos si el juego logra cumplir con el objetivo de FPS y actualizaciones. Puesto que usaremos una tecnología que admite aceleración por hardware, deberíamos siempre lograr alcanzar los 60FPS. Además, bien programado, esto será válido incluso para dispositivos viejos o smartphones de poca potencia.

Hecho lo sencillo, podemos continuar con algo ligeramente más complejo. Tarde o temprano necesitaremos conocer el tamaño de la ventana del navegador. Puesto que el juego se ejecuta dentro de esta ventana, su tamaño será un dato imprescindible para nosotros. Conociendo el tamaño, podremos ajustar los gráficos del juego y la interfaz del usuario. Por suerte, los eventos de Javascript nos facilitarán la vida. Con unas pocas líneas, sabremos el ancho y alto de la ventana.

Para ir acabando, ya que sabemos las dimensiones, hagamos algunas pruebas. Primero, algo sencillo. Una buena prueba es dibujar un rectángulo en pantalla. Esto nos permitirá manejar Javascript y CSS a la vez.

Por supuesto, la siguiente prueba es dibujar muchos más rectángulos. De hecho, dibujaremos tantos como sean necesarios para llenar la pantalla. Aquí nos serán útiles las dimensiones de antes. Gracias a dichas dimensiones, sabremos hasta donde dibujar. Para darle algo más de atractivo, haremos que cada rectángulo tenga un color único.

Suficientes dibujos por ahora. El siguiente paso es trabajar en los controles para el juego.

¿Te ha gustado? ¡Colabora en Patreon!

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *