Problema con eventos

uziel5 · #1 (**permalink**) 28/07/2011, 17:50

Hola, pues verán estoy queriendo hacer que un personaje se mueva dentro de un canvas, y quiero que si se presiona la tecla derecha me llame a la función mirar derecha, pero si mantengo pulsada esa misma tecla llame al método caminarDerecha la cual contiene una animación.

El evento de presionar una tecla lo tengo de la siguiente manera:

Código:

document.onkeydown = pulsarTecla;

function pulsarTecla(){
	var tecla = event.keyCode;
	
	switch(tecla){
		case 37:
			ash.mirarIzquierda();
			break;
		case 38:
			ash.mirarArriba();
			break;
		case 39:
			ash.mirarDerecha();
			break;
		case 40:
			ash.mirarAbajo();
			break;
	}
}

Tengo entendido que el evento onkeydown es solo si se presiona una tecla y no si se deja pulsada (algo que me parece extraño por que me doy cuenta de que hace las dos funciones).

También he hecho según yo un código para cuando se mantenga la tecla pulsada:

Código:

document.onkeypress = mantenerTecla;

function mantenerTecla(){
	var tecla = event.keyCode;
	
	switch(tecla){
		case 37:
			ash.caminarIzquierda();
			ash.lienzoX -= 5;
			break;
		case 38:
			ash.caminarArriba();
			ash.lienzoY -= 5;
			break;
		case 39:
			ash.caminarDerecha();
			ash.lienzoX += 5;
			break;
		case 40:
			ash.caminarAbajo();
			ash.lienzoY += 5;
			break;
	}
}

Pero el código no funciona, es mas, ni siquiera entra a la función.

Ese es mi problema, espero que me puedan ayudar, si necesitan cualquier dato yo se los doy.

Un saludo y gracias por la atención.

maycolalvarez · #2 (**permalink**) 28/07/2011, 19:43

tu código no es crossbrowser, reemplaza esta parte:

Código Javascript:

Ver originalfunction mantenerTecla(){
     var tecla = event.keyCode;
//...
}

por ésta:

Código Javascript:

Ver originalfunction mantenerTecla(e){
    if(e==null){e=event;}
    if(e==null){e=window.event;}
    var tecla = (document.all) ? e.keyCode : e.which;
//...
}

y no olvides de pasar event como parámetro:

... onkeypress="mantenerTecla(event);" ...

uziel5 · #3 (**permalink**) 28/07/2011, 22:02

Bueno ya he probado el código.

Al probar el código que me haz dado me ha marcado error, me decía que había problema en which de undefined y para arreglarlo he tenido que colocar la etiqueta:

Código:

<body onkeypress="mantenerTecla(event)" onkeydown="pulsarTecla(event)">

Esta antes no la tenía puesta y llamaba al evento desde el javascript con el siguiente código:

Código:

document.onkeypress = mantenerTecla;

También me he dado cuenta que es inútil llamar a los eventos onkeypress y onkeydown al mismo tiempo, por que si presiono un instante una tecla se activan los eventos onkeypress y onkeydown, y lo mismo va si mantengo pulsada la tecla.

Mi idea era que si se presionó una tecla esta me llamara a una función y si se mantenía pulsada llamara a otra.

Para dejarlo mas claro si se pulsaba un instante una tecla quería que mi personaje volteara a un lado y si mantenía la tecla pulsada volteara a un lado y activara una función de animación de movimiento.

Otra cosa importante, por alguna razón el evento onkeypress no responde a los botones izquierda, derecha, abajo, y arriba, además de que los códigos de los botones del teclado son diferentes para onkeypress y onkeydown.

Panino5001 · #4 (**permalink**) 29/07/2011, 00:48

Fijate si te sirve como orientación:

Código PHP:

  <!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style> 
*{ margin:0; padding:0;} 
#box{ width:50px; height:50px; position:absolute; background:#F00} 
</style> 
<script> 
function cancelEvent(e){ 
    if(e && e.preventDefault) 
        e.preventDefault(); 
    else if(window.event) 
        window.event.returnValue=false; 
} 
function $(x){return document.getElementById(x);} 
var keys=[]; 
keys['up'] = false; 
keys['down'] = false; 
keys['left'] = false; 
keys['right'] = false; 
function handleKeyDown(e) { 
    cancelEvent(e); 
    e=e || event; 
    var code=e.keyCode || e.which; 
    switch (code) { 
    case 38: 
    case 87: 
        keys['up'] = true; 
        break; 
    case 40: 
    case 83: 
        keys['down'] = true; 
        break; 
    case 39: 
    case 68: 
        keys['right'] = true; 
        break; 
    case 37: 
    case 65: 
        keys['left'] = true; 
        break; 
    } 
} 
 
function handleKeyUp(e) { 
    cancelEvent(e); 
    e=e || event; 
    var code=e.keyCode || e.which; 
    switch (code) { 
    case 38: 
        keys['up'] = false; 
        break; 
    case 40: 
        keys['down'] = false; 
        break; 
    case 39: 
        keys['right'] = false; 
        break; 
    case 37: 
        keys['left'] = false; 
        break; 
    } 
} 
function update(){ 
         if (keys['left']) { 
             $('box').style.left=parseInt($('box').style.left ) -5+'px'; 
         } 
          if (keys['right']) { 
             $('box').style.left=parseInt($('box').style.left) +5+'px'; 
         } 
          if (keys['up']) { 
             $('box').style.top=parseInt($('box').style.top) -5+'px'; 
         } 
          
          if (keys['down']) { 
             $('box').style.top=parseInt($('box').style.top) +5+'px'; 
         } 
         setTimeout(update,80); 
} 
onload=function(){ 
    document.onkeydown=handleKeyDown; 
    document.onkeyup=handleKeyUp; 
    $('box').style.left=$('box').style.top=0; 
    update();  
} 
 
</script> 
</head> 
<body> 
<div id="box"></div> 
</body> 
</html>

uziel5 · #5 (**permalink**) 29/07/2011, 17:33

Hola Panino5001, he visto tu código y me he dado cuenta de que es una buena alternativa.

He pasado ahora a utilizar los eventos onkeydown y onkeyup, cuando se presiona una tecla empieza la animación y mi sprite se desplaza, y cuando suelto la tecla queda mirando hacia la dirección en la que caminaba. Pero como siempre tengo mas y mas errores, si dejo presionada la tecla empieza la animación y se desplaza pero luego deja de desplazarse como por medio segundo y pasado este tiempo se desplaza normalmente, debe de ser por que se activa el presionado de tecla y tarda luego en entrar el evento de mientras la tecla está presionada.

Un lío total.

Gracias por la respuesta.