Foros del Web » Programando para Internet » Javascript »

Problema con teclas

Estas en el tema de Problema con teclas en el foro de Javascript en Foros del Web. Hola, estoy intentando hacer un minijuego para dos jugadores en javascript. Es el juego de las dos barritas horizontales que tiene que intentar que no ...
  #1 (permalink)  
Antiguo 23/07/2011, 19:12
 
Fecha de Ingreso: junio-2011
Mensajes: 89
Antigüedad: 12 años, 9 meses
Puntos: 7
Problema con teclas

Hola, estoy intentando hacer un minijuego para dos jugadores en javascript. Es el juego de las dos barritas horizontales que tiene que intentar que no se le cuele una bola moviendose horizontalmente. El problema biene cuando los dos jugadores juegan simultaneamente en el mismo teclado: un jugador maneja su barra con las teclas w,s y el otro con las flechas. Pero solo se puede mover una barra, porque si presionas la w y la flecha para arriva, pj, se ejecutara la accion de la primera tecla que presiones.

Quisiera saber ¿como saber que se estan presionando dos teclas a la vez y cuales son para poder solucionar mi problema?

Gracias de ante mano : )
  #2 (permalink)  
Antiguo 23/07/2011, 20:45
Avatar de Escain  
Fecha de Ingreso: enero-2007
Mensajes: 21
Antigüedad: 17 años, 3 meses
Puntos: 3
Respuesta: Problema con teclas

¡Hola!

El asunto de las teclas es complejo en javascript ya que esta poco estandarizado.
Aún así, en la explicación omitiré muchos detalles de combatibilidad a tener en cuenta para centrarme en el aspecto funcional del problema.

En todo juego tienes una función principal que actualiza cada pocos milisegundos el escenario, normalmente unos 20-40 veces cada segundo: en tu caso se trata de mover la bola y los cursores de cada jugador unos pixeles.

Por otro lado tienes los eventos de tus periféricos que gestionar, normalmente se guarda simplemente la información del evento en unas variables para que la función de actualización los tenga en cuenta. En tu caso, basta con guardar en unos booleanos si las teclas están siendo pulsadas o no.

Te muestro un ejemplo sencillo, tendrás que adaptarlo a tu juego y hacerlo compatible para todos los navegadores posibles. (Lo he probado con Firefox, aunque debería funcionar con chrome, opera y safari bastante bien. IE es otro tema)

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>microJuego</title>
</head>

<body>

<script type="text/javascript">
// Guarda el estado de las teclas
var keys={"a":false,"i":false};

// Actualiza el estado de las teclas
function keyevent(event){
	//Firefox nos proporciona teclas imprimibles en e.charCode, IE en e.keyCode
	var code = event.charCode || event.keyCode;
	//El código es un código ASCII, por lo que sólo debemos convertirlo en una cadena.
	var keyname = String.fromCharCode(code).toLowerCase();
	var e = event || window.event; // Modelo de eventos IE
	
	// Si la tecla pulsada no es de las previstas, salir.
	if( keyname!='a' && keyname!='i') return;
	
	// Guardar en la matriz los cambios
	keys[keyname]=(e.type == "keydown");
}
// Registrar los eventos (puede que para ciertos navegadores sea necesario usar funciones propias)
document.addEventListener( "keydown", keyevent, false);
document.addEventListener( "keyup", keyevent, false);

// Guarda si los div son visibles ( o cualquer otra característica del juego
var redon=false;
var blueon=false

// Lógica del juego, cada 40ms se ejecuta: mueves la bola y los cursores un intervalo
function actualizar(){
	if(keys["w"] && !redon){ document.getElementById("dred").style.visibility="visible"; redon=true;}
	if(!keys["w"] && redon){ document.getElementById("dred").style.visibility="hidden"; redon=false;}
	if(keys["i"] && !blueon){ document.getElementById("dblue").style.visibility="visible"; blueon=true;}
	if(!keys["i"] && blueon){ document.getElementById("dblue").style.visibility="hidden"; blueon=false;}
}

// Registrar la actualización del juego
setInterval("actualizar()", 40);


</script>

<div id='dred' style='height:20px;width:20px;background-color:red;visibility:hidden;'></div>
<div id='dblue' style='height:20px;width:20px;background-color:blue;visibility:hidden;'></div>
</body>
</html>
Para probarlo, copia este código en un archivo html y pulsa W e I para hacer aparecer unos cuadraditos rojo y azul respectivamente.

Espero te sirva, si es así no olvides darme un puntito de karma ;)

Un saludo, Escain
  #3 (permalink)  
Antiguo 24/07/2011, 07:20
 
Fecha de Ingreso: junio-2011
Mensajes: 89
Antigüedad: 12 años, 9 meses
Puntos: 7
Respuesta: Problema con teclas

Gracias por tu ayuda, muy bien explicado todo. El ejemplo me funciona aunque tuve que cambiar una a por una w que se colo.

Observando tu codigo, lo voy comprendiendo tras varios vistazos, pero tengo una duda. ¿Que hace esta linea?:

keys[keyname]=(e.type == "keydown");

Y ¿Por que asignas la funcion a los eventos onkeydown y onkeyup y no solo a onkeydown?
  #4 (permalink)  
Antiguo 24/07/2011, 07:37
Avatar de Escain  
Fecha de Ingreso: enero-2007
Mensajes: 21
Antigüedad: 17 años, 3 meses
Puntos: 3
Respuesta: Problema con teclas

Las 2 preguntas son casi las mismas:

La línea:
Código:
keys[keyname]=(e.type == "keydown");
comprueba si e.type tiene como valor "keydown" (podría valer "keyup") y asigna el valor booleano correspondiente a keys[keyname]
Un código casi equivalente pero mas largo sería:
Código:
if( keyname=="w"){
	if( e.type=="keydown") keys["w"]=true;
	if( e.type=="keyup"  ) keys["w"]=false;
}else if( keyname== "i"){
	if( e.type=="keydown") keys["i"]=true;
	if( e.type=="keyup"  ) keys["i"]=false;
}
Es decir: keys guarda en cada momento si una tecla esta siendo pulsada. Cuando pulsas una tecla (evento keydown) asignas el valor correspondiente de keys a true, y cuando la sueltas (evento keyup) la asignas a false.
Esta es la razón por la que necesitas ambos eventos y no solo el de pulsar.

De esta forma, en la función actualizar que se ejecuta cada 40ms, puedes comprobar fácilmente si las teclas están siendo pulsadas o no y de esta forma mover o no los cursores de tu juego.

Espero haber aclarado las dudas ;)
  #5 (permalink)  
Antiguo 24/07/2011, 08:08
 
Fecha de Ingreso: junio-2011
Mensajes: 89
Antigüedad: 12 años, 9 meses
Puntos: 7
Respuesta: Problema con teclas

Muchas gracias, ya lo tengo todo claro.

Etiquetas: teclas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:46.