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
Normalmente javascript se ejecuta en un solo hilo, esto significa que todos los procesos corren uno detrás de otro, un proceso debe esperar a que termine el anterior para poder ejecutarse, esto significa que si tenemos una aplicación web compleja, y no tomamos en cuenta la complejidad de cada proceso individual, esta podría llegar a colgarse, esto podría ser el resultado de un solo proceso que este tomando mas tiempo del que teníamos previsto. Un web worker nos permite crear hilos independientes de ejecución, como los Threads en java, hilos que no se interrumpen entre sí, lo cual nos permite crear aplicaciones web mucho mas complejas y seguras.
Mira el video tutorial para aprender como implementar esta 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.
Las notificaciones se han convertido en un elemento ubicuo de cualquier aplicación web, mostrarlas nos permite tener un contacto mas directo y personalizado con nuestros usuarios. En este tutorial aprenderemos lo básico necesario para mostrar notificaciones en nuestro sitio web
En este nuevo tutorial del canal, aprenderemos a utilizar la Web Animations API, que nos permite animar los elementos del DOM, accediendo a las mismas características disponibles en las animaciones CSS3, esto se logra combinando el modelo de tiempo con el modelo de animación. Como veremos la sintaxis a utilizar recuerda mucho a los "@Keyframes" usados en CSS3, pero la potencia de un lenguaje de programación nos permitirá un mayor control de la misma
¿Que diferencia tiene con requestAnimationFrame?
Esa es una buena pregunta, si te la estas haciendo felicidades, básicamente Web Animations API va de la mano con el DOM, por lo que sirve exclusivamente para animar elementos presentes en el DOM, no podremos usarla para animar pixeles dentro del Canvas.
En el video de la próxima semana se hablará mas profundamente sobre esto así que te recomiendo pasarte por el canal y suscribirte
Dependiendo de nuestro juego, el rendimiento puede llegar a ser un dolor de cabeza, y en general para el desarrollo de juegos es algo que casi siempre hay que tener presente, tanto en el video como en esta entrada voy a hablar de 3 técnicas para mejorar el rendimiento.
Pre-renderizar
Por una razón que cuesta un poco entender, es mas eficiente dibujar en un canvas virtual y luego cargar todo al canvas principal, que directamente dibujar en un solo canvas. Esto es muy sencillo de lograr.
Primero el canvas virtual lo hacemos así :
var preRender = document.createElement("canvas");
var vctx = preRende.getContext("2d");
Todo el juego va a ser dibujado usando este contexto "virtual", y luego en el canvas "real" hacemos así:
ctx.drawImage(preRender, 0, 0);
Donde "ctx" es el contexto del canvas "real"
Extracción de propiedades
Cuando limpiamos el canvas usando "clearRect" y en alguna otra circunstancia, aveces hacemos cosas como: "canvas.width" si esto se hace dentro de nuestro bucle de juego, en cada iteración se va a extraer la propiedad del objeto a través del DOM lo cual requiere mas trabajo que pasar el número directamente, o crear una variable que almacene el valor una sola vez:
var anchoJ = canvas.width;
var altoJ = canvas.height;
Luego en nuestro bucle de juego las usamos así:
canvas.clearRect(0,0,anchoJ,altoJ);
En lugar de "extraer" la propiedad en cada iteración
Limpiar solo las diferencias y no to el canvas
Para lograr la animación es necesario el uso de "clearRect", pero no siempre es necesario que se limpie todo el canvas, podemos limpiar solamente lo que necesitemos ahorrandonos una infinidad de recursos en el camino. Esto puede variar dependiento de cada juego, puedes ver un ejemplo en mi video, pero en general sería algo así :
canvas.clearRect(prevX, prevY, ancho, alto);
Donde las variables "prevX" y "prevY" son las últimas posiciones "X" e "Y" utilizadas, las variables "ancho" y "alto" van a depender también del área que queramos limpiar. Una forma de tratar esto, como lo hago en mi video es que cada objeto en su función de movimiento, se limpie a si mismo, por lo que estas dos últimas variables sería en ancho y alto del objeto en cuestión.
Descargas
Aquí puedes descargar el código fuente hecho en el video:
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
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.
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
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
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
En este nuevo tutorial aprenderemos a crear un efecto de transición de persiana, mas específicamente me refiero al estilo de persiana veneciana, la cual está compuesta de diferentes paneles que se ladean para revelar lo que se encuentra detrás, este efecto puede ser útil para crear galerías. Es de notar que este efecto no esta incluido en css3 por lo que hay que hacerlo manualmente en javascript.
La persiana Veneciana
Están compuestas de láminas de distintos materiales como madera, aluminio, plástico, pvc... dispuestas en forma horizontal. Según la inclinación que demos a las láminas nos permite regular el paso de luz. En la veneciana de aluminio los fabricantes realizan una pequeña curvatura a la lámina para aumentar su resistencia. Es muy utilizada en decoración, bien sola u ocupando el lugar del visillo.
Nota: Luego de hacer clic en el enlace se abrirá una ventana nueva, debes esperar a que aparezca el botón de "Saltar publicidad", al hacer clic en ese botón debería llevarte directamente al archivo deseado
Este efecto consiste en hacer rotar el contenido para revelar información que se encuentra detrás, se puede lograr usando CSS3 enteramente. Decidí llamarlo efecto tarjeta ya que guarda semejanza con una tarjeta girando en el mundo real
En el video que acabas de ver, se muestra una forma muy creativa de organizar contenido variado en tu página web, es similar a las pestañas, pero en este caso estaría limitado a 4 hojas solamente. Crearemos una especie de "cubo" usando el contenido que queramos mostrar y lo rotaremos en relación a lo que el usuario desee ver
Código fuente y plantilla Html
Nota: Lego de hacer clic en el enlace, debes esperar unos segundos a que te aparezca el botón de saltar publicidad, luego debes hacer clic en él para ir al archivo deseado
Si tenemos mucha cantidad de texto u otros elementos en nuestra página, puede ser útil pensar en alguna forma de que nuestro contenido no se vea tan cargado y que a su vez permita a los visitantes una lectura menos "lineal", si no en su lugar permitirles interactuar con la página y darles la opción de elegir el contenido que deseen leer
Descargar código fuente
Nota: Luego de hacer clic en el enlace, debes esperar unos segundos a que te salga el texto de "Saltar publicidad", debes hacer clic en ese botón y debería llevarte al archivo a descargar, si no es así comunícate con migo a través de un comentario
Plantilla html Este archivo es el html básico del cual partimos para empezar el tutorial
Si quieres pedirme algún tutorial que quieras o necesites, puedes hacerlo a través de mis redes sociales, o por un comentario de Youtube (Recuerda suscribirte)
Inicialmente el efecto "Parallax" solo se refería a gráficos en general, en donde el fondo y algunos elementos se movían a diferente velocidad para dar la ilusión de profundidad, con el tiempo ha evolucionado hasta incluir diferentes efectos que ocurren al hacer scroll.
Ambos se refieren al tamaño absoluto incluyendo el padding pero en el caso del primero se refiere al tamaño del "visor" osea lo que observamos actualmente al hacer scroll, mientras que el segundo es el tamaño total, incluyendo los elementos ocultos que está fuera del scroll
Descargar archivos del tutorial
NOTA:Para descargar los archivos, haces clic en el enlace y luego esperas unos segundos a que aparezca el botón del saltar publicidad, luego haces clic en ese botón y debería llevarte al archivo para que lo descargues, si no te lleva al destino solicitado comunícate conmigo inmediatamente a través de un comentario.
Es un tipo de galería que muestra diferentes imágenes, en este caso a modo de feed de noticias, el nombre de carrusel viene por el proceso cíclico que siguen las imágenes, estas una vez que se llega a la última vuelve a mostrar la primera
Códigos ASCII
Anterior: ❮
Siguiente: ❯
Descargas
Nota: Los enlaces están patrocinados por "adfly", una vez hecho clic debes esperar unos segundos y luego te aparecerá un botón con el texto "Saltar publicidad" luego de hacer clic en él te debería llevar a la descarga, si no es así comunícate con migo inmediatamente a través de un comentario
Este juego fue lanzado a mediados de lo años 70, a diferencia de lo que muchos creen no fue desarrollado por la Nokia, pero gracias a esta última adquirió una popularidad masiva debido a que venia pre-instalado en los teléfonos de esta marca.
Nota: Los enlaces están patrocinados por adfly, luego de hacer clic, debes esperar unos segundos y te aparecerá un boton con el texto "Saltar publicidad", al hacer clic en él te debe llevar directamente al archivo, si no lo hace comunicate conmigo a través de un comentario.
Puedes empezar el tutorial con el mismo html que yo utilicé aunque da igual si utilizas un formulario creado por tí
http://adf.ly/1dAUFG (Lee la aclaratoria sobre los enlaces al final de la entrada)
Si solo quieres las imágenes que yo utilicé las puedes descargar en el siguiente enlace:
http://adf.ly/1dAUJB (Lee la aclaratoria sobre los enlaces al final de la entrada)
La importancia de la validación
La validación no es más que la verificación de los datos antes de que estos puedan ser procesados por nuestro servidor.
Existe un tipo de ataque conocido como Inyección SQL que consiste en enviar código malicioso a través de los formularios, más información sobre este tipo de ataque puedes ver el siguiente enlace:
La verificación más importante que debemos hacer consiste en evitar que un atacante pueda ingresar Javascript o SQL a través de nuestros formularios, también en evitar que se envíen espacios en blanco para que nuestra base de datos no se llene de datos basura
La diferencia entre el servidor y el cliente
En el cliente, la validación ocurre en el navegador mismo, por lo tanto se lleva a cabo usando herramientas disponibles en el navegador, como por ejemplo HTML5 CSS3 y JavaScript.
En el servidor, la validación ocurre una vez que la información ha sido enviada a este a través de un formulario, esta se lleva a cabo con tecnologías disponibles en el servidor como PHP JSP Node.JS ASP etc
Como escribir patrones para el atributo "pattern"
Las llaves [ ]
Indican que caracteres debemos colocar, a continuación unos ejemplos :
[abc] Solo se puede escribir "a","b" o "c" puede ser por ejemplo: "ccc", "bbb", "aaa" o cualquier combinación que solo tenga una de las tres letras
[^abc] Al colocar el "acento circunflejo" (Es el nombre de ese signo) estamos pidiendo que se permita cualquier carácter excepto "a", "b" o "c", esto significa que se van a admitir, números, caracteres especiales y letras, siempre y cuando estas últimas no sean una de esas tres
[a-z], [0-9] o [A-Z] Con el guión podemos especificar un rango de caracteres, en el primer caso cualquier letra que vaya de la "a" hasta la "z" en minúscula, estos se pueden combinar sin necesidad de espacios de la siguiente forma: [a-zA-Z0-9]
[\s] o [\n] De igual forma que hicimos en el primer ejemplo podemos especificar estos caracteres para pedir que se solicite un espacio en blanco o una nueva linea respectivamente
\ El "slash invertido" lo usamos para poder identificar caracteres especiales por ejmplo si queremos solicitar que se coloquen guiones [\-] si se colocara el guión solamente pudiera causar conflicto ya que como vimos arriba este se usa para denotar rangos
\d Cualquier número, en este caso no es necesario colocar las llaves ([])
\D Cualquier letra o carácter especial, la igual que arriba no es necesario colocar as llaves
Los corchetes { }
Indican la cantidad de caracteres que debemos colocar:
{7} Aquí exigimos 7 caracteres obligatoriamente, ni mas ni menos
{2,9} Siempre tiene que haber como mínimo 2 y no más de 9
En resumen, con la coma (,) creamos rangos para cantidad y con el guión (-) creamos rangos para el tipo de carácter
Ejemplos de patrones
Código postal Venezolano : Deben ser 4 números entre 0 y 9
[0-9]{4}
Código postal Mexicano : Contiene 5 dígitos 4 números agrupados de dos en dos y separados por un guión
[0-9]{2}[\-]{1}[0-9]{2} o también \d{2}[\-]\d{2}
Número de teléfono formato USA internacional : debe ser algo así +99(99)9999-9999
[\+]\d{2}[\(]{1}\d{2}[\)]\d{4}[\-]{1}\d{4}
También cuando queramos un solo carácter no hace falta que especifiquemos el {1} por lo que lo de arriba puede quedar de forma más corta de la siguiente manera:
[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}
Fecha formato dd/mm/aa:
\d{2}[/]\d{2}[/]\d{2}
Más información sobre los patrones
A continuación comparto contigo una enlace a un sitio web que contiene una lista grande de patrones ya creados que puedes usar, adicionalmente te permite crear tus propios patrones de forma muy sencilla, el único problema es que este sitio está en inglés:
http://adf.ly/1dASXo (Lee la aclaratoria sobre los enlaces al final de la entrada)
Códigos fuente
En el enlace a continuación puedes descargar el formulario ya terminado, para que leas y compares el código fuente que yo escribí:
http://adf.ly/1dAUNf (Lee la aclaratoria sobre los enlaces al final de la entrada)
Aclaratoria sobre los enlaces
Los enlaces en este blog tienen un pequeño anuncio publicitario patrocinado por Adfly, luego de hacer clic esperas unos segundos y aparecerá un botón con el texto "Saltar publicidad" debes hacer clic ahí para llegar a la página de destino. Este patrocinio me permite producir más material como este, si te parece que los anuncios son incómodos o no llevan la página de destino escríbeme inmediatamente, puedes hacer un comentario aquí o en mi canal de Youtube
