Ver Mensaje Individual
  #4 (permalink)  
Antiguo 29/07/2011, 00:48
Avatar de Panino5001
Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.143
Antigüedad: 18 años, 2 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>