Gracias, Wikipedia.
ShareCodeTreeCode

Goose, la red social libre

PleasOn - Menu QR
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

HTMLCSSJSVista previa
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>
Enlace Duplicar


Este ShareCode tiene versiones:
  1. .tetris{ border-... (09/11/2011)
  2. .tetris{ border-... (09/11/2011)
  3. .tetris{ border-... (09/11/2011)
  4. .tetris{ border-... (09/11/2011)
  5. .tetris{ border-... (09/11/2011)
  6. .tetris{ border-... (09/11/2011)
  7. .tetris{ border-... (09/11/2011)
  8. .tetris{ border-... (09/11/2011)
  9. .tetris{ border-... (09/11/2011)
  10. .tetris{ border-... (09/11/2011)
  11. .tetris{ border-... (09/11/2011)
  12. .tetris{ border-... (10/11/2011)
  13. .tetris{ border-... (10/11/2011)
  14. .tetris{ border-... (10/11/2011)
  15. .tetris{ border-... (10/11/2011)
  16. .tetris{ border-... (11/11/2011)
  17. .tetris{ border-... (11/11/2011)
  18. .tetris{ border-... (11/11/2011)
  19. .tetris{ border-... (11/11/2011)
  20. .tetris{ border-... (13/11/2011)
  21. .tetris{ border-... (17/11/2011)
  22. .tetris{ border-... (17/11/2011)
  23. .tetris{ border-... (23/11/2011)
  24. .tetris{ border-... (03/12/2011)
  25. .tetris{ border-... (09/08/2012)
  26. .tetris{ border-... (11/09/2012)
  27. .tetris{ border-... (01/10/2012)
  28. .tetris{ border-... (05/11/2012)
  29. .tetris{ border-... (24/11/2012)
  30. .tetris{ border-... (24/11/2012)
  31. .tetris{ border-... (24/11/2012)
  32. .tetris{ border-... (24/11/2012)
  33. .tetris{ border-... (24/04/2013)
  34. .tetris{ border-... (24/04/2013)
  35. .tetris{ border-... (24/04/2013)
  36. .tetris{ border-... (24/04/2013)
  37. .tetris{ border-... (24/04/2013)
  38. .tetris{ border-... (30/05/2013)
  39. .tetris{ border-... (27/06/2013)
  40. .tetris{ border-... (13/08/2013)
  41. .tetris{ border-... (18/11/2013)
  42. .tetris{ border-... (16/12/2013)
  43. .tetris{ border-... (16/12/2013)
  44. .tetris{ border-... (12/03/2014)
  45. .tetris{ border-... (12/03/2014)
  46. .tetris{ border-... (08/05/2014)
  47. .tetris{ border-... (16/05/2014)
  48. .tetris{ border-... (16/05/2014)
  49. .tetris{ border-... (16/05/2014)
  50. .tetris{ border-... (16/05/2014)
  51. .tetris{ border-... (14/11/2014)
  52. .tetris{ border-... (24/12/2014)
  53. .tetris{ border-... (05/02/2015)
  54. .tetris{ border-... (03/05/2015)
  55. .tetris{ border-... (11/05/2015)
  56. .tetris{ border-... (16/06/2015)
  57. .tetris{ border-... (14/08/2015)
  58. .tetris{ border-... (26/11/2015)
  59. .tetris{ border-... (26/11/2015)
  60. .tetris{ border-... (10/12/2015)
  61. .tetris{ border-... (10/12/2015)
  62. .tetris{ border-... (26/03/2016)
  63. .tetris{ border-... (16/04/2016)
  64. .tetris{ border-... (26/04/2016)
  65. .tetris{ border-... (24/05/2016)
  66. .tetris{ border-... (01/07/2016)
  67. .tetris{ border-... (06/08/2016)
  68. .tetris{ border-... (20/08/2016)
  69. ... (20/08/2016)
  70. .tetris{ border-... (31/08/2016)
  71. .tetris{ border-... (17/10/2016)
  72. .tetris{ border-... (18/10/2016)
  73. .tetris{ border-... (11/12/2016)
  74. .tetris{ border-... (24/04/2017)
  75. .tetris{ border-... (24/05/2017)
  76. .tetris{ border-... (01/07/2017)
  77. .tetris{ border-... (15/03/2018)
  78. .tetris{ border-... (19/06/2018)
  79. .tetris{ border-... (26/06/2018)
  80. .tetris{ border-... (29/06/2018)
Enlace
El enlace para compartir es: