¡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