Juego del dinosaurio de Chrome en Javascript

Para ver en youtube clic aquí
(No olvides suscribirte)

Juego del T-rex

   El famoso dinosaurio de google, odiado por muchos, ya que su presencia se traduce automáticamente en la perdida de una de las cosas que mas anleamos en la actualidad: El internet, lo que algunos no conocen de este infame personaje es que puede cobrar vida con tan solo presionar la tecla de espacio, hecho esto tendremos que esquivar cactus y pterodactylus con forme la velocidad aumenta con el tiempo y a su vez nuestro puntaje, parece algo muy simple, pero contrario a todo pronostico se ha convertido en adicción de muchos.

  En el video de arriba aprenderás a programar tu propia versión del juego en Javascript, y acontinuación aprenderás a agregar algunos elementos que se omitieron en el video para no hacerlo muy largo

Nuestra versión hecha en Javascript

La versión original de Google Chrome

Implementando las nubes

  Si ya completaste el tutorial, no te será muy dificil implementar las nubes, lo haremos de forma similar a lo que hicimos con los cactus, pero como no necesitamos iterar a través de ellas, no llevaremos la cuenta de los elementos siguientes, solo las dibujaremos, debemos recordar que para darle un efecto de profundidad estas deben moverse a una menor velocidad, esto se conoce como parallax y en la imagen a continuación podemos ver un ejemplo

  Vamos a implementar las nubes de la forma más sencilla posible, por lo que no le daremos distancia ni tamaño aleatorio, si no fijo, en nuestro mundo agregamos las siguientes lineas al constructor:

                this.imgNube = document.createElement("img");

this.imgNube.src = "imagenes/nube.png";

this.nx = 350;

this.ny = 50;

this.nd = 250;

Acabamos de agregar la imagen con la cual vamos a dibujar las nubes, y luego procedemos a darle: posición "x", "y" y distancia, que como dije arriba serán fijos, pero no te desanimes por esto, el resultado de esta forma se ve bien.

  Luego en nuestro método "mover" haremos lo siguiente:

                

                this.nx-=2;

  

  Esto logrará que nuestras nubes se muevan mas lentamente que el resto de nuestro mundo, creando el efecto de profundidad

Descargar  imágenes y código fuente

Nota: al hacer clic en el enlace se abrirá una nueva ventana, deberás esperar a que aparezca el botón con el texto "Saltar publicidad" debes hacer clic en él y debería llevarte al archivo deseado, si no es así avísame inmediatamente en un comentario

Pack de imágenes y sonido  Este archivo es un winrar con todas las imagenes utilizadas en el tutorial

Plantilla HTML  Documento html con sus canvas divs botones e imagenes ya listo para que solo tengas que escribir Javascript

Código fuente del video  Este archivo representa lo hecho en el video tutorial, osea el juego sin las nubes ni los pterodactylus (Solo archivo javascript para el resto la plantilla HTML)

Código fuente completo  Todo lo hecho tanto en esta entrada como en el video (Solo archivo javascript para el resto la plantilla HTML)

Sigueme en mis redes sociales y suscríbete a mi canal de Youtube

Facebook

Twitter

Canal de Youtube