Como hacer un juego de naves en CSS3 puro

Para ver en youtube clic aquí

(No olvides suscribirte)

Hacer juegos en CSS3 puro es teoricamente posible, pero es justo aclararle a los principiantes que

este no es el propósito de CSS3 por lo que hacerlo realmente se convierte en, un reto, un ejercicio interesante o una forma divertida de mostrar tus habilidades. En el tutorial de arriba haremos un juego de naves en CSS3 puro

Descargas

Imágenes usadas en el tutorial

Codigo fuente finalizado

Enlaces sociales

Facebook

Twitter

Como usar la Gamepad API

Para ver en Youtube has clic aquí

(No olvides suscribirte)

GamePad API

     Hacer juegos interesantes en javascript no solo consiste en desarrollar el juego propiamente dicho, también un buen juego es aquel que brinda a los jugadores de buenas opciones de interactividad, que mejor forma de interactuar con un juego que con un Gamepad, anteriormente acceder al hardware desde el navegador requería de plugins, pero la evolución constante de este lenguaje ahora nos permite acceder entre otras cosas a los Gamepads conectados en nuestra computadora, en el tutorial de arriba aprenderemos a utilizar esta API.

Descargas

Código fuente final

Como hacer un juego de Breakout en Javascript

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.

Fuente Wikipedia

Tamaño de fuente en el Canvas

    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

Archivos del Tutorial

 Sonido utilizado para las colisiones

 Imágenes (fondo, bloques y raqueta)

 Código fuente final completo

Redes sociales:

http://twitter.com/giovaelpe

http://facebook.com/giovaelpetv

Animaciones para juegos HTML5

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

Las Animaciones

   Un juego es prácticamente una animación controlada, así que las mismas son uno de los ejes centrales a la hora de desarrollar juegos en cualquier lenguaje, si ya viste la clase a continuación, una descripción detallada de cada una de las funciones usadas en los ejemplos y al final los enlaces de descarga para los ejemplos desarrollados

Funciones de animación

• setTimeout() : Posee dos parámetros el primero es la función a llamar y el segundo es el tiempo en mili-segundos que la función va a esperar antes de llamar a la función del primer parámetro
• setInterval() : Al igual que la anterior posee dos parámetros, el primero la función y el segundo el tiempo, igual que el anterior, la diferencia es que la función se va a estar llamando continuamente, separada por el espacio de tiempo definido en el segundo parámetro que al igual está en mili-segundos
• requestAnimationFrame() : Simplemente intenta llamar a la función que representa nuestro cuadro de animación, asegurándose primero de que existan los recursos disponibles para ejecutar dicho cuadro, para poder usarla en animaciones hay que hacer llamadas recursivas, mas información en este video: https://www.youtube.com/watch?v=zlclLs_m0mI

Explicando las funciones de dibujo

• fillRect(x,y,w,h) : Nos dibuja un rectángulo, el primer parámetro (x) representa la coordenada x del mismo,  el segundo (y) la coordenada y, el tercero (w) el ancho y por último el cuarto (w) el alto
• clearRect(xy,w,h) : Definimos un rectángulo con los mismos parámetros de la función anterior, todo lo que esté en el área de efecto de este rectángulo se borrará
• fillStyle : No es una función sino una propiedad, aquí definimos el color que llevará el canvas

Descargas de códigos fuente

Primer ejemplo, cubo rebotando

Segundo ejemplo limpieza del canvas

Enlaces útiles

http://ejohn.org/blog/how-javascript-timers-work/

https://dzone.com/articles/how-you-clear-your-html5

https://jsperf.com/canvas-clear-speed

https://jsperf.com/requestanimationframe-vs-setinterval-loop/7

https://jsperf.com/canvasclear

Enlaces sociales

http://twitter.com/giovaelpe

http://facebook.com/giovaelpetv

https://plus.google.com/100155338957196131214