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

Aprende HTML5 con este sencillo tutorial de un juego de evasión

Scroll to top
Read Time: 30 mins

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

En este tutorial (el primero de una serie), aprenderás los fundamentos del desarrollo de juegos en HTML5 con JavaScript y el elemento canvas. No necesitas tener ninguna experiencia en programación, ni siquiera en HTML (aparte de este artículo). ¡Empecemos!


Introducción

Sería difícil no haber visto los artículos "HTML5 vs Flash" que han surgido por toda la web, especialmente desde las reflexiones de Steve Jobs sobre Flash el año pasado, y el anuncio de Microsoft esta semana de que el navegador web de Windows 8 no soportará Flash en las tabletas por defecto. No voy a entrar en ese debate aquí; sea cual sea tu opinión, no hay nada malo en aprender HTML5. Aunque conozcas Flash, no está de más tener otra herramienta en tu kit.

Este tutorial no requiere que conozcas Flash, o que hayas tenido alguna experiencia de programación antes. De hecho, todo lo que necesitas saber antes de empezar se explica en este único artículo: Ponte al día con HTML. ¡Eso es! Si puedes seguir eso, puedes seguir esto.

Estoy basando esta serie en mi serie de tutoriales de Flash, que a su vez se basó en un tutorial de Flash aún más antiguo de un tipo llamado FrozenHaddock (a quien estoy muy agradecido por dejarme usar sus ideas). Sin embargo, no se trata de una adaptación directa de ninguno de los dos tutoriales; reescribiré completamente el código y las explicaciones para adaptarlos a HTML5.

Un par de notas:

  • La compatibilidad entre navegadores es una cuestión real e importante en el desarrollo web, pero vamos a ser un poco egoístas y a centrarnos en asegurarnos de que nuestro juego funciona exactamente en un navegador: Chrome. Ten por seguro que trataremos otros navegadores (incluidos los móviles) en otros tutoriales de Activetuts+, pero por el momento, nos quedaremos con Chrome, para no tener que dividir nuestro enfoque.
  • El código limpio es más importante en HTML5 que en muchas otras plataformas, porque el lenguaje de programación subyacente (JavaScript) te permitirá salirte con la tuya. Así que vamos a asegurarnos de que te acostumbras a escribir un código decente... eventualmente. Vamos a ser un poco desordenados al principio, solo para poner las cosas en marcha y evitar hacer que te desplaces a través de miles de palabras sobre las "mejores prácticas" antes de llegar a hacer algo realmente.

En esta primera parte del tutorial, solo configuraremos todo y pondremos algunas mecánicas de juego muy básicas. En futuras partes se añadirán múltiples enemigos reproducibles, altas puntuaciones, pantallas de menú, múltiples niveles y todas esas cosas.

Basta de hablar, ¡comencemos!


Configuración

Lo primero que hay que hacer es crear un archivo .html. Puedes usar un editor de texto básico para esto, o gastar unos cuantos cientos de dólares en software específicamente diseñado para el desarrollo de HTML; personalmente, me quedaría con el software libre por ahora. Aquí tienes tres recomendaciones: TextEdit (para Mac), Notepad++ (para Windows) y Sublime Text 2 (para Windows, OS X y Linux). Elige.

Crea un nuevo archivo e introduce lo siguiente:

Si no entiendes lo que hace todo eso, lee mi guía básica de HTML.

Crea una nueva carpeta en tu disco duro llamada AvoiderGame, y guarda este archivo HTML dentro de ella como game.html. Si lo cargas ahora mismo, solo mostrará una página en blanco (como ya sabes), así que pon un párrafo de texto para asegurarte de que todo está bien. Añadiré un enlace a este tutorial, pero puedes poner lo que quieras: ¿tu nombre y tu sitio web, quizás?

JavaScript

Bien, ahora no te sorprenderá escuchar que pronto escribiremos algo de JavaScript, recuerda, JavaScript permite que las páginas web hagan cosas, y eso es exactamente lo que necesitamos para hacer juegos. Pondremos todo nuestro JavaScript en un archivo externo, para mantener las cosas ordenadas, y pondremos este archivo en una carpeta separada, para mantener las cosas aún más ordenadas.

Entonces, crea una nueva carpeta, llamada js dentro de tu carpeta AvoiderGame. Luego, crea un nuevo archivo de texto vacío, y guárdalo como main.js dentro de esta nueva carpeta AvoiderGame/js/.

Modifica tu HTML para que haga referencia a este archivo JS:

Observa que no he escrito src="http://active.tutsplus.com/...whatever.../js/main.js", o src="C:\AvoiderGame\js\main.js"; de esta manera, le estamos diciendo a la página HTML, "busca una carpeta js en el mismo directorio que tú, y luego usa el archivo main.js que está dentro". Se llama ruta relativa.

Si quieres probar que esto funciona, pon alert("¡Funcionando!"); en tu archivo JS, y luego carga la página HTML. Si aparece un cuadro de diálogo, todo está bien.

CSS

Ya que estamos, enlacemos también un archivo CSS externo; podemos usarlo para que el texto se vea mejor, y puede que necesitemos usar CSS en el juego más adelante.

Crea una nueva carpeta dentro de AvoiderGame llamada css, y luego crea un nuevo archivo de texto vacío llamado style.css dentro de ella. Modifica tu HTML así:

Voy a modificar mi archivo CSS para que coincida con algunos estilos que usamos a menudo en las páginas de demostración aquí en Activetuts+; siéntete libre de copiarlo, crear el tuyo propio o dejar el tuyo en blanco:

Este tutorial no trata sobre CSS, así que si no lo entiendes, no te preocupes. (Si tienes curiosidad, puedes buscar el significado de esos atributos CSS en W3Schools.com.)

Bien, ya se ha eliminado el aburrido montaje. Puedes ver el aspecto de la página haciendo clic aquí, y puedes descargar todo el código fuente hasta ahora en un archivo ZIP aquí. ¡Vamos a crear nuestro avatar!


Pon tu cabeza en el juego

Necesitamos una imagen que represente al personaje de nuestro jugador en este juego. Utiliza lo que quieras: una fotografía de tu cara, tu avatar de Twitter, un dibujo que hayas hecho, pero asegúrate de que tenga un fondo transparente, que sea más o menos circular y que mida unos 30x30px.

El tutorial original en el que se basa éste utilizaba una calavera. No sé por qué, pero sospecho que fue un intento de subvertir la típica postura antiesquelética de los juegos; después de todo, bajo nuestra piel, ¿no tenemos todos un cráneo?

No soy de los que rompen con la tradición, así que también usaré una calavera aquí. Puedes descargar el mío haciendo clic con el botón derecho del ratón, si no quieres hacer el tuyo propio:

Learn HTML5 With This Simple Avoider Game Tutorial

Y antes de que preguntes: sí, estoy disponible para comisiones.

Elijas lo que elijas, guárdalo como avatar.png dentro de una nueva carpeta, llamada img dentro de AvoiderGame. Tu estructura de carpetas tiene ahora este aspecto:

Entonces, ¿cómo podemos introducir esto en nuestro juego? Si has prestado atención, probablemente sugieras esto:

Y, es cierto, ¡eso pondría el avatar en nuestra página! Pero no es lo que vamos a utilizar.

Canvas

Un elemento img muestra una sola imagen, cargada desde un archivo PNG o JPG (o lo que sea). La etiqueta canvas, nueva en HTML5, puede generar una imagen de forma dinámica, compuesta por otras imágenes más pequeñas, texto, formas primitivas y mucho más, si lo deseas. Tu contenido puede modificarse en cualquier momento, por lo que puede dar la ilusión de movimiento, o de interacción, si haces que el contenido cambie en función de lo que haga el usuario.

Creamos un lienzo de la misma manera que creamos cualquier otro elemento HTML:

...aunque, si miras esto, no podrás ver nada allí. Es invisible, así que el único efecto que tiene es mover el texto un poco hacia abajo.

Con CSS, podemos darle un contorno para distinguirlo del fondo. Añade esto a tu CSS:

Compruébalo. Es un poco pequeño, sin embargo; hagámoslo de 400px por 300px (dimensiones de televisión de la vieja escuela):

Así está mejor. Ahora, dije que podíamos agregar imágenes al lienzo dinámicamente, así que hagamos eso a continuación.

Funciones

¿Recuerdas que en la guía de HTML te mostré cómo hacer que ocurrieran cosas al hacer clic en elementos HTML? Aquí hay un resumen rápido:

Si haces clic en el lienzo, obtendrás un mensaje de cuadro de diálogo. Esto se debe a que alert() es una función de JavaScript: es un atajo a unas pocas líneas de código. Podemos escribir nuestras propias funciones en nuestro archivo JS. Abre main.js e introduce lo siguiente:

(Elimina la original alerta("¡Funcionando!"); si no lo has hecho ya).

¿Ves cómo funciona esto? Hemos creado una nueva función llamada alertSeveralTimes(), cuyo contenido está dentro de las llaves ({ y }). Cuando le decimos al navegador que ejecute esta función alertSeveralTimes(), ejecutará cada una de las alertas sucesivamente, una tras otra.

Vamos a probarlo:

¡Pruébalo! Hemos agrupado varias funciones alert() en una función más grande llamada alertSeveralTimes(), y le hemos dicho que se ejecute cada vez que se haga clic en el lienzo.

Tal vez te preguntes por qué la alerta("¡Funcionando!") se ejecutó tan pronto como abrimos la página, pero el alertSeveralTimes() no lo hizo, aunque ambos estaban en el mismo lugar (en la parte superior de main.js). Es por esa palabra clave mágica function; cuando el navegador ve esto, no piensa, "¡ahora, esto es un código que debo ejecutar inmediatamente!", piensa, "¡ah, esto es un código que debo agrupar en una nueva función, que puedo ejecutar más tarde!"

En fin. Ahora hagamos que nuestra función haga algo en el lienzo. Hacer que cargue una imagen es un poco complicado, así que empezaremos con algo más sencillo: cambiar su tamaño.

Modificación del Canvas

Una de las características más sorprendentes de JavaScript es su capacidad para cambiar el HTML de la página. Comprueba esto; modifica tu archivo JS para que contenga esto:

Probablemente puedes adivinar lo que esto hace: toma el elemento canvas, y modifica sus atributos de anchura y altura (no necesitamos usar comillas alrededor de los números en JavaScript, a diferencia de los atributos HTML).

Excepto... ¿cómo sabe que gameCanvas se refiere al lienzo que tenemos en nuestra página?

Bueno, no lo hace... todavía. Tenemos que hacer que se dé cuenta de ello.

En primer lugar, tenemos que dar al elemento canvas un atributo id (abreviatura de "identificación"); éste es solo un nombre que utilizamos para poder referirnos a él en JavaScript más adelante:

Ya que estamos, hagamos que el atributo onclick apunte a nuestra nueva función changeCanvasSize():

Esto aún no es suficiente. Tenemos que hacer saber al JavaScript que está tratando con un elemento de la página HTML (o 'documento HTML', como se conoce más correctamente):

Ahora, lo sé, esto no parece del todo lógico. ¿Por qué gameCanvas aparece de repente entre comillas? ¿Por qué usamos document.getElementById("gameCanvas") en lugar de, por ejemplo, getDocumentElement("gameCanvas"), o incluso document.gameCanvas? Lo prometo, todo esto se aclarará durante la serie de tutoriales, pero por ahora, solo ve con ello, por favor.

Prueba tu nuevo código. El lienzo se redimensiona por sí mismo en cuanto se hace clic en él. ¡Impresionante!

Ahora, debo advertirte: los programadores son perezosos. Odiamos escribir el mismo código una y otra vez, y si hay alguna forma de reducir el tecleado necesario, la aceptaremos. Así pues, permíteme presentarte una bonita forma abreviada de referirte al lienzo:

¿Ves cómo funciona? Así como la palabra clave function dice, "oye, envuelve todo este código bajo el nombre changeCanvasSize(), por favor", la palabra clave var dice, "oye, usa la palabra gameCanvas para referirte al elemento HTML con un ID de "gameCanvas", por favor". Entonces (en las líneas 3 y 4, arriba), podemos usar esta nueva abreviatura gameCanvas en lugar de la más larga document.getElementById("gameCanvas") , porque se refieren a la misma cosa.

Esto es importante: no hemos creado un nuevo lienzo; solo hemos hecho que gameCanvas haga referencia al elemento de lienzo existente.

Sin embargo, es posible utilizar var para crear algo nuevo...

Haz clic en la calavera

Como ya he dicho, vamos a añadir una imagen al lienzo (actualmente vacío). Pero antes de poder hacerlo, tenemos que cargar la imagen. Y antes de poder hacerlo, tenemos que tener algo en lo que cargar la imagen.

Modifica tu JS así:

(He añadido una línea en blanco para separar claramente las declaraciones var del resto).

Aquí, estamos usando la palabra clave var de nuevo, pero esta vez, dice algo sutilmente diferente: "oye, crea un nuevo objeto Imagen y usa la palabra avatarImage para referirte a él de ahora en adelante, por favor". El objeto Image es básicamente como un elemento img; la diferencia crucial aquí es que no está en el HTML. Hemos creado este nuevo elemento, pero no está en ninguna parte del HTML; solo está flotando en el éter de JavaScript. Lo encuentro un poco raro.

Al igual que un elemento img en la página, esta Image es bastante inútil sin establecer su src, así que hazlo a continuación:

(Una vez más estoy usando una línea en blanco para mantener separados los trozos de código que hacen cosas diferentes entre sí (como los párrafos en el texto), y una vez más estoy usando una ruta para hacer referencia a la ubicación de un archivo).

Así que ahora se está cargando la imagen, pero tendrás que aceptar mi palabra por el momento, ya que todavía está ahí fuera, en el éter, donde no podemos verla. Sin embargo, podemos comprobar sus otros atributos:

Le decimos que nos muestre un cuadro de diálogo con el valor del atributo width de nuestra imagen. Compruébalo en tu código y mira lo que obtienes; a mí me sale 29, que es exactamente lo correcto.

Con solo una línea de código más, podemos dibujar el avatar en el lienzo:

Vamos a desglosar esto:

  • gameCanvas.getContext("2d"): En realidad, no dibujamos directamente sobre el lienzo, sino sobre lo que se llama un "contexto de dibujo"; esto nos permite determinar si queremos dibujar en 2D o en 3D. Vale, de momento no hay contexto 3D, pero esto nos permite planificar el futuro.
  • drawImage(): Bastante sencillo. Esta es una función que nos permite dibujar una imagen en el contexto de un lienzo.
  • avatarImage: Este es el objeto de imagen que tenemos flotando en el éter, ¿recuerdas?
  • 0, 0: Son las coordenadas en las que queremos dibujar la imagen. En la escuela, te enseñan que (0, 0) es la parte inferior izquierda de la página; en un ordenador, es la parte superior izquierda (el eje x apunta a la derecha, y el eje y apunta hacia abajo).

Echa un vistazo. ¡Funciona! (Si no lo hace, recuerda que debes estar viendo esto en Chrome; no garantizo que esto funcione en cualquier otro navegador).

Cráneos múltiples

La función drawImage() funciona como un sello de patata:

Simplemente toma el contenido del objeto de imagen y lo clona en el lienzo; por supuesto, estamos tratando con píxeles, no con pintura, pero se entiende la idea.

Esto significa que podemos añadir varias calaveras al lienzo, así:

Compruébalo, fiesta de calaveras. También podemos hacer que la calavera aparezca en un lugar aleatorio cada vez:

Math.random() te da un número aleatorio entre 0 y 1, así que Math.random() * 100 te da un número aleatorio entre 0 y 100; esto significa que las coordenadas de la nueva calavera están en cualquier lugar entre (0, 0) y (100, 100). ¡Echa un vistazo!

Pero espera, ¿por qué ahora solo hay un cráneo a la vez? ¿Tiene algo que ver con que sea una función nueva? ¿Se borra el lienzo cada vez que se ejecuta una función?

No. El lienzo se borra cada vez que modificas su altura o su anchura, incluso si no cambias ninguna de ellas. Entonces, si cambiamos nuestro JS así:

...entonces podemos seguir añadiendo nuevas calaveras.

De hecho, cambiemos el nombre de la función a drawAvatar(), y ordenemos un poco las cosas:

No olvides cambiar el atributo onclick del canvas en tu HTML:

Bien, ahora vamos a mover ese avatar.


Añadir interactividad

Quiero que el avatar siga al ratón. Podemos utilizar el mismo principio que los animadores: si seguimos borrando el contenido del lienzo y luego volvemos a dibujar el avatar en una posición diferente, el avatar parecerá moverse. Así que todo lo que tenemos que hacer es seguir redibujando el avatar en las coordenadas del ratón, ¡y ya está!

Pero, ¿cómo lo hacemos?

Un gran evento

A juzgar por lo que hemos hecho hasta ahora, podrías adivinar que añadiríamos un atributo de evento onmousemove al lienzo (que se activaría cada vez que el usuario moviera el ratón), y luego haríamos que se ejecutara drawAvatar(), pero específicamente en las coordenadas actuales del ratón. Esto es inspirado, pero desafortunadamente no funciona realmente, simplemente porque no ofrece una manera fácil de obtener las coordenadas del ratón.

Sin embargo, ¡se acerca mucho a lo que queremos hacer! Mira esto:

Esto hace más o menos lo mismo que la sugerencia anterior; la función redrawAvatar() (que aún no hemos escrito) será llamada cada vez que el ratón se mueva sobre el lienzo. Pero hay una gran diferencia.

Observa cómo escribimos redrawAvatar, en lugar de redrawAvatar() en el código anterior, mientras que en nuestra página HTML, ponemos drawAvatar(), con "paréntesis" (corchetes), en el atributo del evento onclick de nuestro canvas. La razón completa de esto es un poco complicada para entrar ahora (aunque lo entenderás al final de la serie), pero tiene un resultado muy importante: nos permite obtener las coordenadas del ratón.

Cuando el ratón se mueve, el navegador crea un nuevo objeto, al igual que cuando creamos una nueva imagen en nuestro JavaScript anteriormente. Este objeto tiene ciertos atributos que tienen que ver con lo que provocó su creación; en este caso, como el ratón se movió, contiene las coordenadas del ratón. ¡Brillante!

¿Y cómo accedemos a ella? Pues bien, este nuevo objeto (que se llama MouseEvent, por razones que quizá puedas adivinar) se pasa a la función redrawAvatar(). Pero aún no lo hemos escrito, así que hagámoslo ahora. Añade este código a tu archivo JS:

Aha, esta vez, la forma de definir la función es un poco diferente: hemos añadido la palabra mouseEvent entre esos paréntesis. Esto se debe a que esperamos que el navegador pase un objeto MouseEvent a nuestra nueva función, al igual que cuando pasamos las coordenadas a la función drawImage().

Ya que le hemos dado un nombre, podemos acceder a los atributos de este nuevo objeto:

Prueba esto; tendrás que hacer clic en el lienzo antes de que ocurra algo, porque es dentro de esa función en donde hacemos que el navegador empiece a prestar atención a los movimientos del ratón.

Verás que el cuadro de diálogo solo aparece cuando el ratón se mueve sobre el elemento del lienzo. También puedes notar algo extraño en el número: ¡es demasiado grande! Estoy obteniendo números de más de 900, a pesar de que el ancho del lienzo es solo de 400.

Esto se debe a que mouseEvent.x da la posición x del ratón desde el borde de la página, en lugar del borde del lienzo. Podemos utilizar mouseEvent.offsetX para obtener la posición x del ratón desde el borde del lienzo:

¡Mucho mejor!

Así que, para recapitular: addEventListener() hace que el navegador escuche ciertos eventos, como el movimiento del ratón, y luego ejecute una función cuando este evento es "escuchado". El navegador crea un nuevo objeto (como un MouseEvent), y lo pasa a esa función.

Es un poco difícil de entender, pero no te preocupes; lo usaremos mucho, ¡así que le cogerás el gusto!

Mueve tu cabeza

Casi tenemos movimiento. De hecho, te recomiendo que pruebes a hacer que el avatar siga al ratón por tu cuenta antes de seguir leyendo. ¡Seguro que te acercas mucho!

Sin embargo, hay una cosa importante que te hará tropezar: la palabra var, que, como recordarás, puedes utilizar para establecer un atajo, solo "válido" dentro de la función en la que fue definida.

Esto significa que si intentas hacer, digamos:

¡...no funcionará, porque gameCanvas no significa nada fuera de drawAvatar()!

Así que, si no lo conseguiste la primera vez, vuelve a intentarlo.

Mi código está aquí si quieres comprobar el tuyo:

¡Tada! Oh, espera, dang, me olvidé de borrar el lienzo cambiando su anchura o altura. Un efecto genial, pero intentémoslo de nuevo:

Pruébalo ahora. ¡Éxito!

Espera, ¿para qué fue eso?

Cuando vuelvas a mirar tu código dentro de unos días, es probable que hayas olvidado para qué sirven muchas cosas. En particular, sospecho que olvidarás por qué necesitas cambiar el tamaño del lienzo.

Afortunadamente, hay una forma de recordarlo: los comentarios.

Mira esto:

El navegador ignora todo lo que hay en la línea después de un //. Esto significa que puedes escribir allí lo que quieras, y no se ejecutará como código. Se llama comentario en línea y es muy importante. Para que te acostumbres a comentar tu código, revísalo ahora y escribe comentarios después de cada línea que creas que te puede costar entender después de unos días de descanso.

Comentar puede parecer una pérdida de tiempo. Creo que muchos de los nuevos programadores asumen eso cuando empiezan; sin embargo, solo hace falta una mala experiencia al intentar actualizar tu propio código sin comentar (o peor: el de otra persona) para convencerte de su valor :)

Ocultar el ratón

En este momento, tienes un gran y estúpido cursor de ratón sobre tu avatar:

Learn HTML5 With This Simple Avoider Game TutorialLearn HTML5 With This Simple Avoider Game TutorialLearn HTML5 With This Simple Avoider Game Tutorial

Podemos arreglar esto con un poco de CSS. Modifica tu hoja de estilos así:

En la mayoría de los navegadores, esto hará que el cursor desaparezca cuando esté encima del lienzo... pero no en Chrome.

(Actualización 18/11/2010: ¡Chrome ahora lo soporta! De todos modos, dejaré el resto del texto aquí, o las cosas se volverán muy confusas).

Chrome no admite cursor: none;, pero sí permite sustituir el cursor por un archivo PNG de tu elección. Así que, puedes crear un PNG que sea completamente transparente, ponerlo en tu carpeta img, y usarlo, así:

(He tenido que poner ../ al principio de la URL porque, en CSS, las rutas relativas son relativas a la carpeta del archivo CSS, no al archivo HTML, y ".." dice "la carpeta que está encima de ésta". Además, he puesto , none después de esto, porque significa que si algún navegador no soporta el uso de PNGs para los cursores, usará el atributo none en su lugar. ¿Ves por qué he querido evitar centrarme en la compatibilidad entre navegadores?)

Desgraciadamente, esto tampoco funciona, porque si usas un PNG completamente transparente, Chrome solo muestra un rectángulo negro sólido en su lugar. Gracias, Chrome.

Así que, en su lugar, he hecho un PNG de 1x1px que es casi transparente (el único píxel es blanco, con una opacidad del 1%). Puedes descargarlo aquí. Cópialo en tu carpeta img y luego modifica tu hoja de estilos CSS:

Pruébalo. Sí funciona, después de todo ese esfuerzo.


Hacer un enemigo

Hemos logrado mucho hasta ahora, ¡pero nuestro juego de evasión todavía no tiene nada que evitar! Lo último que haremos, en esta parte de la serie, es crear un enemigo.

Necesitamos una imagen que lo represente. Dibuja lo que quieras, pero asegúrate de que sea más o menos circular y de unos 30x30px. Voy a seguir el ejemplo de FrozenHaddock otra vez. Eligió una cara sonriente para el enemigo de su juego; no estoy seguro de por qué, pero sospecho que fue un comentario sobre la omnipresencia de los emoticonos en la conversación moderna; una añoranza de los días de las emociones por encima de los emoticonos, en los que los poetas vertían sus corazones en una sola frase de texto, en lugar de limitarse a escribir punto y coma y paréntesis ell oh ell. O tal vez sea porque las caras sonrientes son más fáciles de dibujar. En cualquier caso, aquí está la mía:

Learn HTML5 With This Simple Avoider Game Tutorial

Llama al tuyo enemigo.png y ponlo en el directorio img.

Probablemente puedas averiguar cómo dibujar este enemigo (inmóvil) en el lienzo; si es así, ¡inténtalo! Una vez más, te recomiendo que lo hagas antes de seguir leyendo.

Esta es mi solución:

Puede que tu método sea diferente al mío, pero no pasa nada, siempre que funcione. Pero por coherencia, por favor, copia mi método en tu código.

Observa que mantengo las declaraciones var en la parte superior de sus respectivas funciones. Esto no es estrictamente necesario, pero mantiene las cosas ordenadas, así que lo recomiendo.

Aparte de eso, nada de esto debería sorprenderle. Las coordenadas (250, 150) que he elegido no tienen ningún significado especial.

¡Pruébalo!

Poner "evitar" en el "juego de evasión"

No vamos a preocuparnos de hacer que el enemigo se mueva en esta parte del tutorial; ese tema merece más espacio del que puedo dedicarle aquí. ¡Pero comprobaremos si hay una colisión entre el avatar y el enemigo!

En primer lugar, haremos algo más sencillo: consideraremos que una determinada zona de la pantalla está "prohibida" y aparecerá un cuadro de diálogo si el avatar se mueve en esa zona.

Modifica tu función redrawAvatar() así:

Pruébalo. Si tu avatar se desplaza demasiado hacia la izquierda de la pantalla, aparece el cuadro de diálogo.

Echemos un vistazo al código:

La sentencia if es una forma de comprobar si algo ha sucedido. Se compone de dos partes: una condición, dentro de los paréntesis, y un resultado, dentro de las llaves. Si la condición es verdadera, se llama al resultado.

En nuestro caso, la condición es mouseEvent.offsetX . El símbolo < significa "menos que", y recuerda que mouseEvent.offsetX es la distancia horizontal del cursor desde el borde izquierdo del lienzo. Así, se comprueba si el cursor está a menos de 100 píxeles del borde izquierdo del lienzo. Si lo está, entonces...

...el resultado se ejecuta. Y en nuestro caso, el resultado es alert("¡Demasiado a la izquierda!");, la función del cuadro de diálogo que hemos utilizado varias veces.

¿Tiene sentido? Vale, bien, porque voy a complicarlo más:

En este código, hemos introducido un nuevo operador: ||. || significa (y se pronuncia) "o". Por lo tanto, el enunciado del if es el siguiente:

"Si el ratón está a menos de 100 píxeles del borde izquierdo del lienzo, O el ratón está a menos de 100 píxeles del borde superior del lienzo, muestra el cuadro de diálogo".

Prueba esto y verás que no puedes acercarte a la parte superior o a la izquierda del lienzo.

¿Qué tal esto?

El operador && significa (y se pronuncia) "y", y > significa "mayor que". Por lo tanto, nuestra declaración if ahora dice:

"Si el ratón está a más de 150 píxeles del borde izquierdo del lienzo Y el ratón está a menos de 250 píxeles del borde izquierdo del lienzo, muestra el cuadro de diálogo".

Pruébalo y verás que efectivamente tenemos una "franja" invisible en el centro del lienzo donde no podemos poner el ratón.

No estamos limitados a usar solo dos cláusulas a la vez; mira esto:

Ahora hemos dibujado efectivamente una caja de 100x100px, en el centro del lienzo, donde no podemos poner el ratón.

¿Puedes ver a dónde vamos con esto?

En lugar de una caja de 100x100px en el centro del lienzo, deberíamos usar una caja de 30x30px colocada donde está nuestro enemigo.

Esto es lo último que vamos a hacer en esta parte del tutorial, así que una vez más te recomiendo que lo intentes tú mismo. Es bastante complicado, probablemente tendrás que sacar papel para dibujar el avatar y el enemigo y etiquetar algunas coordenadas, pero puedes hacerlo si utilizas lo que has aprendido hasta ahora.

Mi solución es la siguiente.

¡Pruébalo aquí!


La próxima vez

Eso es todo para la primera parte del tutorial. En la próxima parte, conseguiremos que ese enemigo se mueva, y añadiremos más de ellos, ¡para que esto empiece a ser un juego de verdad!

Mientras tanto, ¿por qué no experimentar con lo que has aprendido? Podrías intentar añadir tú mismo varios enemigos (inmóviles), quizás con gráficos diferentes. O puedes añadir varios avatares en la pantalla a la vez, todos ellos siguiendo el ratón de diferentes maneras. ¿Qué ocurre si utilizas algo como mouseEvent.offsetX + 100 o 300 - mouseEvent.offsetY en tu llamada a gameCanvas.getContext("2d").drawImage()?

Espero que hayas disfrutado de esto hasta ahora. Si algo no está claro, pregúntalo en los comentarios :)

(Otra nota rápida: por el momento, tu código debería funcionar bien en tu propio ordenador, pero no funcionará si se sube a la web. Mis demostraciones funcionan en línea, porque he utilizado un escurridizo truco. No te preocupes, te explicaré cómo solucionar esto en una futura parte del tutorial).

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.