{"id":138,"date":"2015-05-28T05:22:05","date_gmt":"2015-05-28T05:22:05","guid":{"rendered":"http:\/\/wjharil.com\/blog\/?p=138"},"modified":"2015-10-16T22:46:30","modified_gmt":"2015-10-16T22:46:30","slug":"charlie-charlie-challenge-en-html-y-jquery","status":"publish","type":"post","link":"https:\/\/wjharil.com\/blog\/charlie-charlie-challenge-en-html-y-jquery\/","title":{"rendered":"Charlie Charlie Challenge en HTML y jQuery"},"content":{"rendered":"<p>Ya que se ha vuelto viral el famoso juego de<strong> Charlie Charlie Challenge<\/strong>, en un grupo de HTML5 (en Facebook) compartieron \u00e9ste interesante<strong> juego desarrollado con HTML5<\/strong>,<strong> CSS y jQuery. <\/strong><\/p>\n<p>Sin m\u00e1s pre\u00e1mbulos, te comparto el c\u00f3digo:<\/p>\n<p>1. <strong>Html<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true\">&lt;div class=\"imagen\" &gt;&lt;img width=\"400\" height=\"400\" src=\"http:\/\/i.imgur.com\/ktzaj4S.png\" \/&gt;&lt;\/div&gt;<\/pre>\n<p>2. <strong>Css<\/strong><\/p>\n<pre class=\"lang:css decode:true \">img {\r\n    transition: all 1s;\r\n}\r\n.imagen {\r\n  background: url(\"http:\/\/i.imgur.com\/Osq1lU4.png\") no-repeat 0 0;\r\n  position: absolute;\r\n}<\/pre>\n<p>3. <strong>JavaScript<\/strong><\/p>\n<pre class=\"lang:js decode:true \">$('img').on('click',function(){\r\n  giro = Math.floor(Math.random() * 720);\r\n  giro+=360;\r\n  $(this).css('transform','rotate('+giro+'deg)');\r\n});<\/pre>\n<p>Explicando un poco el c\u00f3digo, podemos ver que en el html, se crea el div y la imagen que ser\u00e1 el l\u00e1piz. En el css, asignamos al div que tiene la clase \u00abimagen\u00bb el fondo que ser\u00e1 el tablero y por \u00faltimo en el javascript, indicamos que cada vez que se haga click en la imagen del l\u00e1piz, \u00e9ste rotar\u00e1.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ya que se ha vuelto viral el famoso juego de Charlie Charlie Challenge, en un<br \/><a class=\"moretag\" href=\"https:\/\/wjharil.com\/blog\/charlie-charlie-challenge-en-html-y-jquery\/\">Continuar Leyendo...<\/a>","protected":false},"author":1,"featured_media":139,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":["juegos"],"featured_image_src":"https:\/\/wjharil.com\/blog\/wp-content\/uploads\/2015\/05\/charliecharliehtml.jpg","categorias":["Facebook","Fuera de tema","Recursos","Tutoriales"],"_links":{"self":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/138"}],"collection":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/comments?post=138"}],"version-history":[{"count":2,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions"}],"predecessor-version":[{"id":141,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/posts\/138\/revisions\/141"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media\/139"}],"wp:attachment":[{"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/media?parent=138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/categories?post=138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wjharil.com\/blog\/wp-json\/wp\/v2\/tags?post=138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}