Obtener CódigoDemo

Ya que se ha vuelto viral el famoso juego de Charlie Charlie Challenge, en un grupo de HTML5 (en Facebook) compartieron éste interesante juego desarrollado con HTML5, CSS y jQuery.

Sin más preámbulos, te comparto el código:

1. Html

<div class="imagen" ><img width="400" height="400" src="http://i.imgur.com/ktzaj4S.png" /></div>

2. Css

img {
    transition: all 1s;
}
.imagen {
  background: url("http://i.imgur.com/Osq1lU4.png") no-repeat 0 0;
  position: absolute;
}

3. JavaScript

$('img').on('click',function(){
  giro = Math.floor(Math.random() * 720);
  giro+=360;
  $(this).css('transform','rotate('+giro+'deg)');
});

Explicando un poco el código, podemos ver que en el html, se crea el div y la imagen que será el lápiz. En el css, asignamos al div que tiene la clase «imagen» el fondo que será el tablero y por último en el javascript, indicamos que cada vez que se haga click en la imagen del lápiz, éste rotará.

Obtener CódigoDemo