1 2 <html>3 <style type="text/css">4 .tetris{5 border-collapse: collapse;6 }7 .tetris tr td{8 width:20px;9 height:20px;10 padding: 0px;11 }12 .celda0{13 background-color: #000000;14 }15 .celda1{16 background-color: #0000FF;17 }18 .celda2{19 background-color: #FF0000;20 }21 .celda3{22 background-color: #00FF00;23 }24 .celda4{25 background-color: #FFFF00;26 }27 .celda5{28 background-color: #00FFFF;29 }30 .celda6{31 background-color: #FF00FF;32 }33 .celda7{34 background-color: #888888;35 }36 </style>37 <script>38 var velocidad=50000; //velocidad del juego39 var fpi, cpi, rot; //fila, columna y rotación de la ficha40 var tablero; //matriz con el tablero41 var pieza=0; //pieza42 var record=0; //almacena la mejor puntuación43 var lineas=0; //almacena la puntuación actual44 var pos=[ //Valores referencia de coordenadas relativas45 [0,0],46 [0,1],47 [-1,0],48 [1,0],49 [-1,-1],50 [0,-1],51 [1,-1],52 [0,-2]53 ];54 var piezas=[ //Diseño de las piezas, el primer valor de cada fila corresponde con el número de rotaciones posibles55 [4,0,1,2,3], 56 [4,0,1,5,6]57 ];58 //Genera una nueva partida inicializando las variables59 function nuevaPartida(){ 60 velocidad=50000;61 tablero=new Array(20); 62 for (var n=0;n < 20;n++){63 tablero[n]=new Array(9);64 for (var m=0;m < 9;m++){65 tablero[n][m]=0;66 }67 }68 lineas=0;69 nuevaPieza();70 }71 //Detecta si una fila columna del tablero está libre para ser ocupada72 function cuadroNoDisponible(f,c){73 if (f < 0) return false;74 return (c < 0 || c >= 9 || f >= 20 || tablero[f][c] > 0);75 }76 //Detecta si la pieza activa colisiona fuera del tablero o con otra pieza77 function colisionaPieza(){78 for (var v=1;v < 5;v++){79 var des=piezas[pieza][v];80 var pos2=rotarCasilla(pos[des]);81 if (cuadroNoDisponible(pos2 [ 0 ] +fpi, pos2 [ 1 ]+cpi)){82 return true;83 }84 }85 return false;86 }87 //Detecta si hay lineas completas y si las hay las computa y borra la linea desplazando la submatriz superior88 function detectarLineas(){89 for (var f=0;f < 20;f++){90 var contarCuadros=0;91 for (var c=0;c < 9;c++){92 if (tablero[f][c]>0){93 contarCuadros++;94 }95 }96 if (contarCuadros==9){97 for (var f2=f;f2 > 0;f2--){98 for (var c2=0;c2 < 9;c2++){99 tablero[f2][c2]=tablero[f2-1][c2];100 }101 }102 lineas++;103 }104 }105 }106 //Baja la pieza, si toca otra pieza o el suelo, saca una nueva pieza107 function bajarPieza(){108 fpi=fpi+1;109 if (colisionaPieza()){110 fpi=fpi-1;111 for (v=1;v < 5;v++){112 des=piezas[pieza][v];113 var pos2=rotarCasilla(pos[des]);114 if (pos2 [ 0 ] +fpi >= 0 && pos2 [ 0 ] +fpi < 20 &&115 pos2 [ 1 ] +cpi >=0 && pos2 [ 1 ] +cpi < 9){116 tablero[pos2 [ 0 ] +fpi][pos2 [ 1 ] +cpi]=pieza+1;117 }118 }119 detectarLineas();120 //Si hay algun cuadro en la fila 0 reinicia el juego121 var reiniciar=0;122 for (var c=0;c < 9;c++){123 if (tablero [ 0 ] [ c ] !=0){124 reiniciar=1;125 }126 }127 if (reiniciar==1){128 if (lineas > record){129 record=lineas;130 }131 nuevaPartida();132 }else{133 nuevaPieza();134 }135 }136 }137 //Mueve la pieza lateralmente138 function moverPieza(des){139 cpi=cpi+des;140 if (colisionaPieza()){141 cpi=cpi-des;142 }143 }144 //Rota la pieza según el número de rotaciones posibles tenga la pieza activa. (posición 0 de la pieza)145 function rotarPieza(){146 rot=rot+1;147 if (rot==piezas[pieza] [ 0 ] ){148 rot=0;149 }150 if (colisionaPieza()){151 rot=rot-1;152 if (rot==-1){153 rot=piezas[pieza] [ 0 ] -1;154 }155 }156 }157 //Obtiene unas coordenadas f,c y las rota 90 grados158 function rotarCasilla(celda){159 var pos2=[celda [ 0 ] , celda [ 1 ] ];160 for (var n=0;n < rot ;n++){161 var f=pos2 [ 1 ]; 162 var c=-pos2 [ 0 ] ;163 pos2 [ 0 ] =f;164 pos2 [ 1 ] =c;165 }166 return pos2;167 }168 //Genera una nueva pieza aleatoriamente169 function nuevaPieza(){170 cpi=3;171 fpi=0;172 rot=0;173 pieza=Math.floor(Math.random()*7);174 }175 //Ejecución principal del juego, realiza la animación y repinta176 function tick(){177 bajarPieza();178 pintar();179 setTimeout('tick()', velocidad/100);180 }181 //Pinta el tablero (lo genera con html) y lo plasma en un div.182 function pintar(){183 var lt=" <";184 var des;185 var html="<table class='tetris'>"186 for (var f=0;f < 20;f++){187 html+="<tr>";188 for (var c=0;c < 9;c++){189 var color=tablero[f][c];190 if (color==0){191 for (v=1;v < 5;v++){192 des=piezas[pieza][v];193 var pos2=rotarCasilla(pos[des]);194 if (f==fpi+pos2 [ 0 ] && c==cpi+pos2 [ 1 ] ){195 color=pieza+1;196 }197 }198 }199 html+="<td class='celda" + color + "'/>";200 }201 html+=lt+"/tr>";202 }203 html+=lt+"/table>";204 html+="<br />Lineas : " + lineas;205 html+="<br />Record : " + record;206 document.getElementById('tetris').innerHTML=html;207 velocidad=Math.max(velocidad-1,500);208 209 }210 //Al iniciar la pagina inicia el juego211 function eventoCargar(){212 nuevaPartida();213 setTimeout('tick()', 1);214 }215 //Al pulsar una tecla216 function tecla(e){217 e.preventDefault();218 //e.stopPropagation();219 var characterCode = (e && e.which)? e.which: e.keyCode;220 switch (characterCode){221 case 37:222 moverPieza(-1);223 break;224 case 38:225 rotarPieza();226 break;227 case 39:228 moverPieza(1);229 break;230 case 40:231 bajarPieza();232 break;233 }234 pintar();235 }236 </script>237 <body onload='eventoCargar()' onkeydown="tecla(event)">238 <div id='tetris'/>239 </body>240 </html>Enlace
El enlace para compartir es: