Tomando fotos con la WebCam + HTML5

En los nuevos desarrollos web se estan incoporando nuevas formas de poder acceder al hardware de una computadora, y uno de estos dispositivos que ha llamado la atención es el uso de la webcam pero con HTML5, tratando de hacer uso de este dispositivo para diferentes propositos, como videoconferencias, tomar fotografias para el perfil de las redes sociales, llamadas, etc. Y eso se puede lograr con "pocas" lineas de código sin la necesidad de usar librerias externas.

Recuerden que hay que darle permiso a la página para que haga uso del hardware

Fuente: http://geeks.ms/blogs/etomas/archive/2013/04/19/html5-que-tus-usuarios-suban-su-foto-a-su-perfil-webrtc.aspx

Pacman HTML5

Excelente juego de antaño desarrollado totalmente con HTML5, no se puede decir nada mas que, a disfrutar, les dejo el link con el código fuente para bajarlo.

Canvas Game Bootstrap

Este es un juego que esta desarrollado con sprites, css, jquery, canvas, etc., el juego a mi parecer es bastante adictivo, y analizando el código no estan dificil, no quiere decir que sea facil, pero a veces uno cree que para hacer un juego nos va a llevar demasiado tiempo, el chiste esta en empezar a jugar con funciones que nos pueden permitir este tipo de animaciones, les dejo el demo y el link para que lo vean en acción y puedan ver el código fuente

Demo: http://jlongster.github.io/canvas-game-bootstrap/

Street Fighter con CSS y Jquery

Vi una página donde estaba este ejemplo de como crear un pequeño juego de street fighter, todo esto hecho con css y jquery, me tome la libertad de tomar el ejemplo y comentar el codigo ya que creo que es importante saber que se esta haciendo para que esto funcione, de igual forma dejo el link para la página original, esto se vuelve muy interesante por si quisieramos agregar a un ryu por ejemplo y hacerlos pelear, yo agregue cierto codigo para que el ken no se salga del stage o que el hadoken no salga mas alla del stage, pero seria interesante hacer algun otro ejemplo donde se ponga otro personaje y los poderes peguen en el otro personaje y llevar un score!!!

Les dejo el codigo que use para implementarlo, este solamente lo guardan como un html y listo!!

Fuente: http://davidwalsh.name/street-fighter

Imagen en un Canvas desde cero con HTML5

En este pequeño tutorial se explicará rápidamente como crear un canvas desde cero y asignarle una imagen para que se cargue en nuestra página HTML

En este caso yo utilice una imagen llamada robot.jpg, pero tu puedes usar la que desees y una vez implementado el siguiente código tendrás la imagen visible en la página, tambien les dejo la imagen que utilice

Iconos con CSS puro

Ya no es necesario tener iconos pequeños en formato .png o en .jpg, ahora esto se puede hacer por medio de css puro, son 84 diferentes opciones que tenemos con css para poder visualizar iconos en nuestras páginas, esto le da un estilo mas limpio a nuestros botones o links dentro de la página

Algunos ejemplos son los siguientes:

El código html y css lo pueden encontrar en el siguiente link

Fuente: https://plus.google.com/109098983561044225374/posts/3L6BSHM7JFP

Juego caballo ajedrez con Kineticjs Jquery

¿A quien no le gusta jugar ajedrez?

Les comparto una forma de crear un juego de ajedrez bastante adictivo, el objetivo es mover el caballo de tal forma que tengas que ir poniendo el caballo al lado del recuadro amarillo, en el siguiente link podrán encontrar el demo y el código fuente para que lo puedan probar ustedes mismos e incluso mejorarlo y postien sus mejores resultados!!

Sprites con JQuery - Doodle de Pacman en Google

Quieres saber como hicieron el Doodle de Pacman que jugaste en el 30 aniversario del juego, bueno básicamente lo hicieron con sprites, pero se han de preguntar que es un sprite.

Los sprites son imágenes pequeñas utilizadas principalmente en juegos, estas permiten mostrar personajes u objetos utilizando muy poca memoria. Inicialmente fueron utilizados en consolas como Atari. 

En el siguiente vamos a encontrar el código fuente y el demo para que veas como funciona, en este caso se hizo con una catarina que la puedes mover hacia el norte/sur/este/oeste