Nuestro conocimiento compartido. Nuestro tesoro compartido. Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

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:
  1. .tetris{ border-... (13/11/2014)
  2. .tetris{ border-... (20/12/2019)
Enlace
El enlace para compartir es: