15/05/2013, 17:22
|
 | | | Fecha de Ingreso: junio-2011 Ubicación: Vía Lactea
Mensajes: 35
Antigüedad: 13 años, 8 meses Puntos: 0 | |
 Modificar juego de Tetris usando Javascript
Hola foreros ¿cómo hago para que cuándo presione la tecla space haga que la pieza caiga directo, es decir, de una vez toque el piso. Aquí les dejo el código.
Código:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Tetris</title>
<link rel="stylesheet" href="Tetris.css">
<script type="text/javascript">
var velocidad=50000; //velocidad del juego
var fpi, cpi, rot; //fila, columna y rotación de la ficha
var tablero; //matriz con el tablero
var pieza=0; //pieza
var record=0; //almacena la mejor puntuación
var lineas=0; //almacena la puntuación actual
var pos=[ //Valores referencia de coordenadas relativas
[0,0],
[0,1],
[-1,0],
[1,0],
[-1,-1],
[0,-1],
[1,-1],
[0,-2]
];
var piezas=[ //Diseño de las piezas, el primer valor de cada fila corresponde con el número de rotaciones posibles
[4,0,1,2,3],
[4,0,1,5,6],
[4,0,1,5,4],
[2,0,1,5,7],
[2,0,2,5,6],
[2,0,3,5,4],
[1,0,5,6,3]
];
//Genera una nueva partida inicializando las variables
function nuevaPartida(){
velocidad=50000;
tablero=new Array(20);
for (var n=0;n < 20;n++){
tablero[n]=new Array(9);
for (var m=0;m < 9;m++){
tablero[n][m]=0;
}
}
lineas=0;
nuevaPieza();
}
//Detecta si una fila columna del tablero está libre para ser ocupada
function cuadroNoDisponible(f,c){
if (f < 0) return false;
return (c < 0 || c >= 9 || f >= 20 || tablero[f][c] > 0);
}
//Detecta si la pieza activa colisiona fuera del tablero o con otra pieza
function colisionaPieza(){
for (var v=1;v < 5;v++){
var des=piezas[pieza][v];
var pos2=rotarCasilla(pos[des]);
if (cuadroNoDisponible(pos2 [ 0 ] +fpi, pos2 [ 1 ]+cpi)){
return true;
}
}
return false;
}
//Detecta si hay lineas completas y si las hay las computa y borra la linea desplazando la submatriz superior
function detectarLineas(){
for (var f=0;f < 20;f++){
var contarCuadros=0;
for (var c=0;c < 9;c++){
if (tablero[f][c]>0){
contarCuadros++;
}
}
if (contarCuadros==9){
for (var f2=f;f2 > 0;f2--){
for (var c2=0;c2 < 9;c2++){
tablero[f2][c2]=tablero[f2-1][c2];
}
}
lineas++;
}
}
}
//Baja la pieza, si toca otra pieza o el suelo, saca una nueva pieza
function bajarPieza(){
fpi=fpi+1;
if (colisionaPieza()){
fpi=fpi-1;
for (v=1;v < 5;v++){
des=piezas[pieza][v];
var pos2=rotarCasilla(pos[des]);
if (pos2 [ 0 ] +fpi >= 0 && pos2 [ 0 ] +fpi < 20 &&
pos2 [ 1 ] +cpi >=0 && pos2 [ 1 ] +cpi < 9){
tablero[pos2 [ 0 ] +fpi][pos2 [ 1 ] +cpi]=pieza+1;
}
}
detectarLineas();
//Si hay algun cuadro en la fila 0 reinicia el juego
var reiniciar=0;
for (var c=0;c < 9;c++){
if (tablero [ 0 ] [ c ] !=0){
reiniciar=1;
}
}
if (reiniciar==1){
if (lineas > record){
record=lineas;
}
nuevaPartida();
}else{
nuevaPieza();
}
}
}
//Mueve la pieza lateralmente
function moverPieza(des){
cpi=cpi+des;
if (colisionaPieza()){
cpi=cpi-des;
}
}
//Rota la pieza según el número de rotaciones posibles tenga la pieza activa. (posición 0 de la pieza)
function rotarPieza(){
rot=rot+1;
if (rot==piezas[pieza] [ 0 ] ){
rot=0;
}
if (colisionaPieza()){
rot=rot-1;
if (rot==-1){
rot=piezas[pieza] [ 0 ] -1;
}
}
}
//Obtiene unas coordenadas f,c y las rota 90 grados
function rotarCasilla(celda){
var pos2=[celda [ 0 ] , celda [ 1 ] ];
for (var n=0;n < rot ;n++){
var f=pos2 [ 1 ];
var c=-pos2 [ 0 ] ;
pos2 [ 0 ] =f;
pos2 [ 1 ] =c;
}
return pos2;
}
//Genera una nueva pieza aleatoriamente
function nuevaPieza(){
cpi=3;
fpi=0;
rot=0;
pieza=Math.floor(Math.random()*7);
}
//Ejecución principal del juego, realiza la animación y repinta
function tick(){
bajarPieza();
pintar();
setTimeout('tick()', velocidad/100);
}
//Pinta el tablero (lo genera con html) y lo plasma en un div.
function pintar(){
var lt=" <";
var des;
var html="<table class='tetris'>"
for (var f=0;f < 20;f++){
html+="<tr>";
for (var c=0;c < 9;c++){
var color=tablero[f][c];
if (color==0){
for (v=1;v < 5;v++){
des=piezas[pieza][v];
var pos2=rotarCasilla(pos[des]);
if (f==fpi+pos2 [ 0 ] && c==cpi+pos2 [ 1 ] ){
color=pieza+1;
}
}
}
html+="<td class='celda" + color + "'/>";
}
html+=lt+"/tr>";
}
html+=lt+"/table>";
html+="<br />Lineas : " + lineas;
html+="<br />Record : " + record;
document.getElementById('tetris').innerHTML=html;
velocidad=Math.max(velocidad-1,500);
}
//Al iniciar la pagina inicia el juego
function eventoCargar(){
nuevaPartida();
setTimeout('tick()', 1);
}
//Al pulsar una tecla
function tecla(e){
var characterCode = (e && e.which)? e.which: e.keyCode;
switch (characterCode){
case 37:
moverPieza(-1);
break;
case 38:
rotarPieza();
break;
case 39:
moverPieza(1);
break;
case 40:
bajarPieza();
break;
}
pintar();
}
</script>
</head>
<body onload='eventoCargar()' onkeydown="tecla(event)">
<div id='tetris'/>
</body>
</html>
|