{"id":3160,"date":"2014-01-22T09:00:10","date_gmt":"2014-01-22T08:00:10","guid":{"rendered":"https:\/\/blogs.ua.es\/pi\/?p=3160"},"modified":"2014-02-01T15:01:42","modified_gmt":"2014-02-01T14:01:42","slug":"el-tetris-en-menos-de-40-lineas-de-javascript","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/pi\/2014\/01\/22\/el-tetris-en-menos-de-40-lineas-de-javascript\/","title":{"rendered":"El Tetris en menos de 40 l\u00edneas de JavaScript"},"content":{"rendered":"<p>Impresionante, menos de 40 l\u00edneas de JavaScript (y unas cuantas de HTML y CSS). Lo podemos encontrar en esta direcci\u00f3n:\u00a0<a href=\"http:\/\/jsfiddle.net\/ova777\/kFxja\/\">http:\/\/jsfiddle.net\/ova777\/kFxja\/<\/a><\/p>\n<p>Copio a continuaci\u00f3n el c\u00f3digo por si desaparece:<\/p>\n<p>HTML<\/p>\n<p>&lt;div class=\u00bbscore\u00bb&gt;score: &lt;span id=\u00bbresult\u00bb&gt;0&lt;\/span&gt;&lt;\/div&gt;<\/p>\n<p>&lt;div id=\u00bbstack\u00bb&gt;<br \/>\n&lt;div data-y=\u00bb0&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb1&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb2&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb3&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb4&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb5&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb6&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb7&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb8&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb9&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb10&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb11&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb12&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb13&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb14&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb15&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb16&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb17&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb18&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;div data-y=\u00bb19&#8243; class=\u00bbline\u00bb&gt;<br \/>\n&lt;div data-x=\u00bb0&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb1&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb2&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb3&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb4&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb5&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb6&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb7&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb8&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;&lt;div data-x=\u00bb9&#8243; class=\u00bbbrick\u00bb&gt;&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<\/p>\n<p>CSS<\/p>\n<p>#stack {<br \/>\nwidth: 130px;<br \/>\nheight: 260px;<br \/>\nborder: solid 1px black;<br \/>\nborder-top: 0px;<br \/>\n}<\/p>\n<p>.brick {<br \/>\nwidth: 11px;<br \/>\nheight: 11px;<br \/>\nborder: solid 1px white;<br \/>\nbackground: white;<br \/>\nfloat: left;<br \/>\n}<br \/>\n.brick.on {<br \/>\nbackground: black;<br \/>\n}<br \/>\n.brick.now {<br \/>\nbackground: green;<br \/>\n}<\/p>\n<p>JS<\/p>\n<p>var fs = \u00ab1111:01|01|01|01*011|110:010|011|001*110|011:001|011|010*111|010:01|11|01:010|111:10|11|10*11|11*010|010|011:111|100:11|01|01:001|111*01|01|11:100|111:11|10|10:111|001&#8243;, now = [3,0], pos = [4,0];<br \/>\nvar gP = function(x,y) { return document.querySelector(&#8216;[data-y=\u00bb&#8216;+y+'\u00bb] [data-x=\u00bb&#8216;+x+'\u00bb]&#8217;); };<br \/>\nvar draw = function(ch, cls) {<br \/>\nvar f = fs.split(&#8216;*&#8217;)[now[0]].split(&#8216;:&#8217;)[now[1]].split(&#8216;|&#8217;).map(function(a){return a.split(\u00bb)});<br \/>\nfor(var y=0; y&lt;f.length; y++)<br \/>\nfor(var x=0; x&lt;f[y].length; x++)<br \/>\nif(f[y][x]==&#8217;1&#8242;) {<br \/>\nif(x+pos[0]+ch[0]&gt;9||x+pos[0]+ch[0]&lt;0||y+pos[1]+ch[1]&gt;19||gP(x+pos[0]+ch[0],y+pos[1]+ch[1]).classList.contains(&#8216;on&#8217;)) return false;<br \/>\ngP(x+pos[0]+ch[0], y+pos[1]+ch[1]).classList.add(cls!==undefined?cls:&#8217;now&#8217;);<br \/>\n}<br \/>\npos = [pos[0]+ch[0], pos[1]+ch[1]];<br \/>\n}<br \/>\nvar deDraw = function(){ if(document.querySelectorAll(&#8216;.now&#8217;).length&gt;0) deDraw(document.querySelector(&#8216;.now&#8217;).classList.remove(&#8216;now&#8217;)); }<br \/>\nvar check = function(){<br \/>\nfor(var i=0; i&lt;20; i++)<br \/>\nif(document.querySelectorAll(&#8216;[data-y=\u00bb&#8216;+i+'\u00bb] .brick.on&#8217;).length == 10)<br \/>\nreturn check(roll(i), document.querySelector(&#8216;#result&#8217;).innerHTML=Math.floor(document.querySelector(&#8216;#result&#8217;).innerHTML)+10);<br \/>\n};<br \/>\nvar roll = function(ln){ if(false !== (document.querySelector(&#8216;[data-y=\u00bb&#8216;+ln+'\u00bb]&#8217;).innerHTML = document.querySelector(&#8216;[data-y=\u00bb&#8216;+(ln-1)+'\u00bb]&#8217;).innerHTML) &amp;&amp; ln&gt;1) roll(ln-1); };<br \/>\nwindow.addEventListener(&#8216;keydown&#8217;, kdf = function(e){<br \/>\nif(e.keyCode==38&amp;&amp;false!==(now[1]=((prv=now[1])+1)%fs.split(&#8216;*&#8217;)[now[0]].split(&#8216;:&#8217;).length) &amp;&amp; false===draw([0,0], undefined, deDraw())) draw([0,0],undefined, deDraw(), now=[now[0],prv]);<br \/>\nif((e.keyCode==39||e.keyCode==37)&amp;&amp;false===draw([e.keyCode==39?1:-1,0],undefined,deDraw())) draw([0,0],undefined,deDraw());<br \/>\nif(e.keyCode == 40)<br \/>\nif(false === draw([0,1], undefined, deDraw())) {<br \/>\nif(draw([0,0], &#8216;on&#8217;, deDraw())||true) check();<br \/>\nif(false === draw([0,0], undefined, now = [Math.floor(Math.random()*fs.split(&#8216;*&#8217;).length),0], pos = [4,0])) {<br \/>\ntoV=-1;<br \/>\nalert(&#8216;Your score: &#8216;+document.querySelector(&#8216;#result&#8217;).innerHTML);<br \/>\n}<br \/>\n}<br \/>\n});<br \/>\ntoF = function() {<br \/>\nkdf({keyCode:40});<br \/>\nsetTimeout(function(){if(toV&gt;=0)toF();}, toV=toV&gt;0?toV-0.5:toV);<br \/>\n}<br \/>\ntoF(toV = 500);<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Impresionante, menos de 40 l\u00edneas de JavaScript (y unas cuantas de HTML y CSS). Lo podemos &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/blogs.ua.es\/pi\/2014\/01\/22\/el-tetris-en-menos-de-40-lineas-de-javascript\/\"> <span class=\"screen-reader-text\">El Tetris en menos de 40 l\u00edneas de JavaScript<\/span> Read more \u2192<\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[4803],"class_list":["post-3160","post","type-post","status-publish","format-standard","hentry","category-general","tag-javascript"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/3160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/comments?post=3160"}],"version-history":[{"count":2,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/3160\/revisions"}],"predecessor-version":[{"id":3162,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/3160\/revisions\/3162"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/media?parent=3160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/categories?post=3160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/tags?post=3160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}