Foros del Web » Programando para Internet » Javascript »

Problema con eventos

Estas en el tema de Problema con eventos en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/07/2011, 17:50
Avatar de uziel5  
Fecha de Ingreso: mayo-2011
Mensajes: 23
Antigüedad: 11 años, 4 meses
Puntos: 1
Pregunta Problema con eventos

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.
  #2 (permalink)  
Antiguo 28/07/2011, 19:43
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 14 años, 2 meses
Puntos: 1532
Respuesta: Problema con eventos

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

Código Javascript:
Ver original
  1. function mantenerTecla(){
  2.      var tecla = event.keyCode;
  3. //...
  4. }

por ésta:

Código Javascript:
Ver original
  1. function mantenerTecla(e){
  2.     if(e==null){e=event;}
  3.     if(e==null){e=window.event;}
  4.     var tecla = (document.all) ? e.keyCode : e.which;
  5. //...
  6. }

y no olvides de pasar event como parámetro:

... onkeypress="mantenerTecla(event);" ...
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 28/07/2011, 22:02
Avatar de uziel5  
Fecha de Ingreso: mayo-2011
Mensajes: 23
Antigüedad: 11 años, 4 meses
Puntos: 1
Respuesta: Problema con eventos

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.
  #4 (permalink)  
Antiguo 29/07/2011, 00:48
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.144
Antigüedad: 18 años, 4 meses
Puntos: 832
Respuesta: Problema con eventos

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:0padding:0;}
#box{ width:50px; height:50px; position:absolute; background:#F00}
</style>
<
script>
function 
cancelEvent(e){
    if(
&& 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=|| 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=|| 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> 
  #5 (permalink)  
Antiguo 29/07/2011, 17:33
Avatar de uziel5  
Fecha de Ingreso: mayo-2011
Mensajes: 23
Antigüedad: 11 años, 4 meses
Puntos: 1
Respuesta: Problema con eventos

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.

Etiquetas: eventos
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 18:40.