sábado, 26 de noviembre de 2016

Como hacer un juego de Pong con Javascript y Canvas


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


Uno de los primeros juegos comerciales

   Este juego fue creado y lanzado por Nolan Bushnell el 29 de Noviembre de 1972, para una de las primeras generaciones de videoconsolas, las famosas Atari y está basado en el tenis de mesa. Este clásico a su vez también esta rodeado de controversia, ya que en sus inicios fue objeto de una demanda por parte Magnavox Odyssey ya que estos poseían un juego similar.

Descargas

Plantilla HTML: Base inicial del código visto en el tutorial

domingo, 20 de noviembre de 2016

Que es y como usar requestAnimationFrame en javascript


Recuerda a suscribirte

No mas setInterval

  Hace no mucho tiempo, la única alternativa para poder ejecutar nuestro bucle de juego, era anidar setTimeout recursivamente o simplemente llamar a setInterval, pero estas nunca fueron ni de cerca la mejor alternativa, simplemente eran las únicas. En este punto nos podemos preguntar, ¿Cual de las dos es mejor? definitivamente setInterval es más eficiente que setTimeout, pero eso no significa que la primera este libre de problemas.

requestAnimationFrame

   Esta función fue inicialmente introducida por la gente de Mozilla y pronto fue adoptada por los demás navegadores, anteriormente el uso de las ya mencionadas "setTimeout" y "setInterval" requerían que el desarrollador se encargara de ajustar la frecuencia de los cuadros para que el juego o animación en cuestión, se ejecutase correctamente, te recomiendo ver el video de arriba para que veas un ejemplo práctico del uso de esta función.
  La frecuencia de los cuadros con "requestAnimationFrame" es ajustada directamente por el navegador, lo que permite simplificar el desarrollo, esta puede llegar hasta unos 60 cuadros por segundo, a continuación veremos algunos problemas causados por "setInterval" para que entendamos mejor la ventaja de usar "requestAnimationFrame"

Las colas y el exceso de memoria 

   A "setInterval" no le importa si el navegador esta listo, o no, para ejecutar el siguiente cuadro de animación o juego, su segundo parámetro realmente no nos dice cuando será llamada la función, simplemente nos dice cuando esta será agregada a la cola, si el navegador está muy ocupado, "setInterval" continuará agregando llamadas a nuestra función de cuadros a la cola, lo que se traduce en un excesivo e innecesario uso de la memoria, si se está ejecutando en un dispositivo móvil esto se traducirá en consumo de batería. Cuando hacemos una llamada a nuestra función de cuadro con requestAnimationFrame, esta se encarga de preguntarle al navegador si es posible renderizar el cuadro o no, evitando así acumular peticiones en cola alguna.

El navegador no es vidente

  Con "setInterval" no es posible saber que se va a llevar a cabo, ya que esta función fue creada con un propósito muy genérico, en cambio "requestAnimationFrame" le informa al navegador la intención de realizar una animación, lo que permite al navegador optimizar sus prioridades lo mas posible, resultando en ejecuciones mas fluidas y menos propensas a retrasarse.

Las animaciones solo son relevantes si se pueden ver

  Con eso dicho, si minimizamos o cambiamos de pestaña, el navegador reducirá la prioridad para nuestro juego o animación, por lo que se evitará el exceso de consumo en recursos, esto no necesariamente tiene que ser así con "setInterval".

Descargar archivos del tutorial

   A continuación en los siguientes enlaces podrás descargar los archivos usados en el videotutorial, códigos fuentes e imágenes.
Instrucciones de descarga: Luego de hacer clic, se abrirá otra pestaña, debes esperar unos segundos a que aparezca el botón con el texto: "Saltar publicidad", debes hacer clic en ese botón y se abrirá nuevamente otra pestaña con el archivo deseado para que lo descargues 

Plantilla HTML: Documento html con etiqueta canvas y el estilo css

Código fuente final: Ejemplo completo de lo hecho en el video tutorial

Imagenes usadas: Para el botón play y pausa


Más información






sábado, 12 de noviembre de 2016

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


domingo, 6 de noviembre de 2016

Controles animados para el reproductor HTML5 en Css3


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


Reproductor HTML5 personalizado

  A continuación te presento una lista con todos los enlaces a los tutoriales del reproductor HTML5
    Parece ser un elemento esencial de los reproductores personalizados, bien sea aparecer o desplazarse hacia arriba, le da un toque mucho más especial a nuestro reproductor, en este tutorial aprenderás a animar la barra de controles de un reproductor html5 personalizado.

Descargar código fuente

Nota: Luego de hacer clic en el enlace debes esperar a que aparezca el botón de saltar publicidad, debes hacer clic en ese botó y debería llevarte directamente al archivo