Para ver en Youtube Click aquí (No olvides suscribirte)
¿Que es eso de Breakout?
Breakout es un videojuego arcade desarrollado por Atari, Inc. y lanzado al mercado el 13 de mayo de 1976.1 Fue creado por Nolan Bushnell y Steve Bristow, influenciados por el videojuego de 1972 Pong, también de Atari. En 1978 se distribuyó la versión para el Atari 26002 y en 1983 la versión para MSX.2 Posteriormente fue mejorado en videojuegos como el Super Breakout.
En la parte inferior de la pantalla una rayita simulaba una raqueta de front-tenis que el jugador podía desplazar de izquierda a derecha. En la parte superior se situaba una banda conformada por rectángulos que simulaban ser ladrillos. Una pelotita descendía de la nada y el jugador debía golpearla con la raqueta, entonces la pelota ascendía hasta pegar en el muro, los ladrillos tocados por la pelota desaparecían. La pelota volvía a descender y así sucesivamente. El objetivo del juego era terminar con la pared de ladrillos.
Para cambiar el tamaño de la fuente del texto en nuestro canvas podemos utilizar la propiedad "font" de la siguiente manera : ctx.font = "30px Arial", primero definimos el tamaño y luego la familia de la fuente, mas información aquí : HTML canvas font Property
Tenía desde el pasado diciembre la promesa de subir un curso dedicado a juegos, el día de hoy comparto con ustedes la primera clase, aprenderemos aquí cual es la mejor opción para los gráficos y la razón detrás de esto, veremos también algunos ejemplos que nos serán de mucha utilidad, si el video te gusta y te es útil por favor no se te olvide hacer clic en el pulgar arriba y suscribirte al canal
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
