Cómo programar un videojuego con el lenguaje HTML, CSS y Javascript
Javascript HTML CSS Aprender Videogame
Para ser desarrollador web es fundamental tener un conocimiento profundo de las tecnologías, al servicio de los desarrolladores, como HTML, CSS y JavaScript. Estos tres lenguajes son absolutamente necesarios para desarrollar aplicaciones web y dominarlos es sinónimo de conciencia en el desarrollo web. De hecho, podríamos definirlos como los tres pilares de la programación front-end. Distingamos estos lenguajes:
Lenguaje html
El acrónimo HTML significa Hyper-Text Markup Language (un lenguaje de marcas, literalmente, lenguaje de marcado de hipertexto), o el código que se utiliza para estructurar la arquitectura de un sitio web. Más simple, HTML es la columna vertebral de las páginas web. No es un lenguaje de programación, es un lenguaje de markup, ya que la sintaxis importa principalmente en el lenguaje HTML, no hay semántica.
¿Qué es css?
El lenguaje CSS es la vestimenta de una página web. Si el CSS (Cascading Style Sheets) define el estilo (colores, apariencia, etc.), el HTML establece la estructura, desde el título y el subtítulo, pasando por cualquier lista, hasta el pie de página (footer). Las clases CSS se utilizan para especificar atributos gráficos y la posición de los elementos dentro de una aplicación web.
Aprender JavaScript
El lenguaje JavaScript es un lenguaje de programación utilizado para dar dinamismo a las páginas web. Aprender JavaScript es realmente muy útil para hacer que su sitio sea interactivo y para facilitar la integración de los cánones de diseño ux/ui.
Como comentábamos en uno de los artículos anteriores "aprende Javascript con un juego", una de las formas de aprender a programar con nuestros tres pilares del desarrollo web es desarrollando un videojuego.
La programación en JavaScript puede ser sorprendentemente funcional para crear juegos 2D, que también se pueden ejecutar fácilmente en todos los dispositivos.
HTML y CSS son útiles, ya que nos brindan la posibilidad de personalizar y crear nuestro propio estilo. Para aprender JavaScript no es necesario jugar a videojuegos extremadamente complejos, basta pensar en el minijuego de dinosaurios en Google Chrome que sale a luz cuando no tenemos conexión a Internet.
Veamos entonces, step-by-step como programar un videojuego con estos 3 lenguajes:
- Elige el IDE o el text editor que prefieras
Para comenzar a escribir código, primero es importante elegir el entorno de desarrollo ideal. Un editor de texto también puede ser suficiente para archivos HTML y CSS. Elige tu entorno de trabajo y crea una nueva carpeta, dentro inserta los archivos: index.html, style.css y script.js. Para programar en HTML es importante organizar los archivos y tener un orden dentro de las carpetas, sobre todo si aún eres principiante.
- El código HTML y CSS
El archivo index.html contendrá líneas simples de código HTML. Después de configurar el layout HTML básico, inserta una etiqueta div con el ID "game" y otros dos divs dentro de este último con los ID "character" y "block". El personaje es el dinosaurio y bloqueo los lindos cactus que vienen hacia nosotros. En este sencillo archivo aprenderemos programación HTML desde lo básico.
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Jump Game</title>
6. <link rel="stylesheet" href="style.css">
7. </head>
8. <body>
9. <div id="game">
10. <div id="character"></div>
11. <div id="block"></div>
12. </div>
13. <script src="script.js"></script>
14. </body>
15. </html>
La etiqueta div es un contenedor genérico que se utiliza para estructurar la página web. Ampliamente difundido en el lenguaje HTML.
Para darle un estilo bien definido a nuestro documento HTML, debemos apoyarnos en el lenguaje CSS. En el archivo style.css, aplicaremos los estilos a los divs recién creados. Seleccionamos el elemento en base a su id usando el símbolo (#).
1. #game {
2. width: 500px;
3. height: 200px;
4. border: 1px solid black;
5. margin: auto;
6. }
Hacemos lo mismo con el div character. Necesitamos declarar la posición como top y left porque los atributos posicionales como arriba y a la izquierda solo se aplican a los elementos posicionados.
1. #character {
2. width: 20px;
3. height: 50px;
4. background-color: red;
5. position: relative;
6. top: 150px; //game height - character height (200 - 50)
7. }
Vamos a construir algo más complejo. Insertemos una keyframe animation que corresponda al salto de nuestro personaje. Esta animación deslizará la posición superior 50 px hacia arriba y luego hacia abajo.
Andiamo a costruire qualcosa di più complesso. Inseriamo una keyframe animation che corrisponde al salto del nostro personaggio. Questa animazione farà scorrere la posizione superiore verso l'alto di 50 px e quindi verso il basso.
1. @keyframes jump {
2. 0%{top: 150px;}
3. 30%{top: 100px;}
4. 70%{top: 100px;}
5. 100%{top: 150px;}
6. }
7.
Una animación tiene que estar especificada por la regla @keyframes, a través de la cual podríamos cambiar gradualmente de un estilo a otro o especificar todas las propiedades que queremos asignar.
Para crear la interacción con nuestro personaje utilizaremos el lenguaje JavaScript, antes de continuar con el paso siguiente, escribiremos una clase animate que llame a la animación.
1. .animate {
2. animation: jump 300ms linear;
3. }
- Animamos el juego con JavaScript
Para que el juego esté "vivo", necesitamos compilar un archivo .js. El archivo script.js crea una función llamada jump() que agrega la clase "animar" al div del personaje. Usamos un detector de eventos que escucha el clic del usuario y luego salta cuando se detecta el clic.
Vamos a crear otra función llamada removeJump() que elimine la clase animada. Por lo tanto, se necesitará una función de tiempo de espera un jump() que ejecuta removeJump() al final de la animación de salto. La animación no volverá a ejecutarse a menos que la eliminemos.
1. var character = document.getElementById("character");
2. document.addEventListener("click",jump);
3. function jump(){
4. character.classList.add("animate");
5. setTimeout(removeJump,300); //300ms = length of animation
6. };
7. function removeJump(){
8. character.classList.remove("animate");
9. }
Para evitar problemas de sobrescribir la llamada a la función jump(), simplemente coloca esto if-statement al principio del método jump().
1. if(character.classList == "animate"){return;}
Volviendo al archivo CSS, asignemos un estilo al div block.
1. #block {
2. width: 20px;
3. height: 20px;
4. background-color: blue;
5. position: relative;
6. top: 130px; //game height - character height - block height (200 - 50 - 20)
7. left: 480px; //game width - block width (500 - 20)
8. animation: block 1s infinite linear;
9. }
Para animar el bloque, debes usar los keyframes que vimos anteriormente, para permitir que el bloque se mueva de derecha a izquierda.
1. @keyframes block {
2. 0%{left: 500px}
3. 100%{left: -20px}
4. }
Ahora nuestro personaje puede saltar, pero tenemos que terminar el juego si golpeamos el bloque (¡GAME OVER!). Una función llamada checkDead() que obtiene la posición del bloque y el carácter, luego evalúa si se superponen. Si lo son, entonces pierdes y se acabó el juego.
Creamos una variable llamada characterTop igual al valo superior del div del personaje. getComputedStyle() por otro lado devolverá todos los valores CSS asociados con un elemento y getPropertyValue() especifica la propiedad de la que desea obtener el valor.
Ahora, este método devolvería una cadena con un valor como 100px. Solo nos interesa el valor numérico, por lo que analizamos la cadena. Dentro de la función parseInt() pasamos la cadena como argumento para que devuelva el valor como un número entero.
Escribamos una instrucción if que verifique si el valor blockLeft está entre -20 px y 20 px y el valor characterTop es mayor que 130 px. Si lo están, significa que se superponen (el personaje y el bloque) y el juego ha terminado. Luego configuraremos una alerta de "Game over".
1. var block = document.getElementById("block");
2. function checkDead(){
3. let characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
4. let blockLeft = parseInt(window.getComputedStyle(block).getPropertyValue("left"));
5. if(blockLeft<20 && blockLeft>-20 && characterTop>=130){
6. alert("Game over");
7. }
8. }
¡Ahora el juego está completo y funcional! En unos simples pasos, hemos visto cómo configurar el aspecto front-end de un videojuego, usando HTML y CSS, y luego administrar la dinámica del juego usando el lenguaje JavaScript.
Aprender a programar también significa pasar por estos pequeños proyectos. En el primer paso configuramos nuestro setup para comenzar a programar, en el segundo paso nos ocupamos de cómo programar la apariencia del personaje del videojuego en HTML, dándole un estilo a través de las líneas simples pero efectivas del lenguaje CSS, mientras que en el tercer paso nos adentramos en el núcleo del videojuego aprendiendo JavaScript con unas pocas líneas de código.
¡Ahora depende de ti! ¡Da rienda suelta a tu creatividad e intenta programar tu propio videojuego con HTML, CSS y JavaScript!
No olvides que, si antes de programar tu primer videojuego necesitas adentrarte un momento en el mundo del HTML y CSS, ¡puedes consultar nuestra guía online de html y css!
¡Buena diversión!
Conviértete en Desarrollador weben 6 meses
Descubre el bootcamp de programación Hackademy
Programa Completo© 2022 Aulab. Todos los derechos reservados • P.IVA: IT07647440721 • Política de privacidad