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 [4,0,1,5,4],58 [2,0,1,5,7],59 [2,0,2,5,6],60 [2,0,3,5,4],61 [1,0,5,6,3]62 ];63 //Genera una nueva partida inicializando las variables64 function nuevaPartida(){ 65 velocidad=50000;66 tablero=new Array(20); 67 for (var n=0;n < 20;n++){68 tablero[n]=new Array(9);69 for (var m=0;m < 9;m++){70 tablero[n][m]=0;71 }72 }73 lineas=0;74 nuevaPieza();75 }76 //Detecta si una fila columna del tablero está libre para ser ocupada77 function cuadroNoDisponible(f,c){78 if (f < 0) return false;79 return (c < 0 || c >= 9 || f >= 20 || tablero[f][c] > 0);80 }81 //Detecta si la pieza activa colisiona fuera del tablero o con otra pieza82 function colisionaPieza(){83 for (var v=1;v < 5;v++){84 var des=piezas[pieza][v];85 var pos2=rotarCasilla(pos[des]);86 if (cuadroNoDisponible(pos2 [ 0 ] +fpi, pos2 [ 1 ]+cpi)){87 return true;88 }89 }90 return false;91 }92 //Detecta si hay lineas completas y si las hay las computa y borra la linea desplazando la submatriz superior93 function detectarLineas(){94 for (var f=0;f < 20;f++){95 var contarCuadros=0;96 for (var c=0;c < 9;c++){97 if (tablero[f][c]>0){98 contarCuadros++;99 }100 }101 if (contarCuadros==9){102 for (var f2=f;f2 > 0;f2--){103 for (var c2=0;c2 < 9;c2++){104 tablero[f2][c2]=tablero[f2-1][c2];105 }106 }107 lineas++;108 }109 }110 }111 //Baja la pieza, si toca otra pieza o el suelo, saca una nueva pieza112 function bajarPieza(){113 fpi=fpi+1;114 if (colisionaPieza()){115 fpi=fpi-1;116 for (v=1;v < 5;v++){117 des=piezas[pieza][v];118 var pos2=rotarCasilla(pos[des]);119 if (pos2 [ 0 ] +fpi >= 0 && pos2 [ 0 ] +fpi < 20 &&120 pos2 [ 1 ] +cpi >=0 && pos2 [ 1 ] +cpi < 9){121 tablero[pos2 [ 0 ] +fpi][pos2 [ 1 ] +cpi]=pieza+1;122 }123 }124 detectarLineas();125 //Si hay algun cuadro en la fila 0 reinicia el juego126 var reiniciar=0;127 for (var c=0;c < 9;c++){128 if (tablero [ 0 ] [ c ] !=0){129 reiniciar=1;130 }131 }132 if (reiniciar==1){133 if (lineas > record){134 record=lineas;135 }136 nuevaPartida();137 }else{138 nuevaPieza();139 }140 }141 }142 //Mueve la pieza lateralmente143 function moverPieza(des){144 cpi=cpi+des;145 if (colisionaPieza()){146 cpi=cpi-des;147 }148 }149 //Rota la pieza según el número de rotaciones posibles tenga la pieza activa. (posición 0 de la pieza)150 function rotarPieza(){151 rot=rot+1;152 if (rot==piezas[pieza] [ 0 ] ){153 rot=0;154 }155 if (colisionaPieza()){156 rot=rot-1;157 if (rot==-1){158 rot=piezas[pieza] [ 0 ] -1;159 }160 }161 }162 //Obtiene unas coordenadas f,c y las rota 90 grados163 function rotarCasilla(celda){164 var pos2=[celda [ 0 ] , celda [ 1 ] ];165 for (var n=0;n < rot ;n++){166 var f=pos2 [ 1 ]; 167 var c=-pos2 [ 0 ] ;168 pos2 [ 0 ] =f;169 pos2 [ 1 ] =c;170 }171 return pos2;172 }173 //Genera una nueva pieza aleatoriamente174 function nuevaPieza(){175 cpi=3;176 fpi=0;177 rot=0;178 pieza=Math.floor(Math.random()*7);179 }180 //Ejecución principal del juego, realiza la animación y repinta181 function tick(){182 bajarPieza();183 pintar();184 setTimeout('tick()', velocidad/100);185 }186 //Pinta el tablero (lo genera con html) y lo plasma en un div.187 function pintar(){188 var lt=" <";189 var des;190 var html="<table class='tetris'>"191 for (var f=0;f < 20;f++){192 html+="<tr>";193 for (var c=0;c < 9;c++){194 var color=tablero[f][c];195 if (color==0){196 for (v=1;v < 5;v++){197 des=piezas[pieza][v];198 var pos2=rotarCasilla(pos[des]);199 if (f==fpi+pos2 [ 0 ] && c==cpi+pos2 [ 1 ] ){200 color=pieza+1;201 }202 }203 }204 html+="<td class='celda" + color + "'/>";205 }206 html+=lt+"/tr>";207 }208 html+=lt+"/table>";209 html+="<br />Lineas : " + lineas;210 html+="<br />Record : " + record;211 document.getElementById('tetris').innerHTML=html;212 velocidad=Math.max(velocidad-1,500);213 214 }215 //Al iniciar la pagina inicia el juego216 function eventoCargar(){217 nuevaPartida();218 setTimeout('tick()', 1);219 }220 //Al pulsar una tecla221 function tecla(e){222 e.preventDefault();223 //e.stopPropagation();224 var characterCode = (e && e.which)? e.which: e.keyCode;225 switch (characterCode){226 case 37:227 moverPieza(-1);228 break;229 case 38:230 rotarPieza();231 break;232 case 39:233 moverPieza(1);234 break;235 case 40:236 bajarPieza();237 break;238 }239 pintar();240 }241 </script>242 <body onload='eventoCargar()' onkeydown="tecla(event)">243 <div id='tetris'/>244 </body>245 </html>Este ShareCode tiene versiones:
- .tetris{ border-... (29/03/2013)
- .tetris{ border-... (18/04/2013)
- .tetris{ border-... (24/04/2013)
- .tetris{ border-... (24/04/2013)
- .tetris{ border-... (24/04/2013)
- .tetris{ border-... (24/04/2013)
- .tetris{ border-... (24/04/2013)
Enlace
El enlace para compartir es: