Mouvement horizontal avec Javascript

Question

Je me sens comme un klutz complet, j'ai eu ce travail et puis j'ai accidentellement oublié de le sauver! Je suis un idiot. J'ai passé le dernier jour à essayer de recréer ce que j'avais, mais je ne peux pas le faire. Au fond (de mon dernier enregistrement) j'avais ceci:

function canvasMove(e) { 

    if(!e) var e = window.event; 

    var downcheck; 
    var upcheck; 
    var leftcheck; 
    var rightcheck; 

    if(e.keyCode == '38') { 

     if(up + down == 0) downcheck = false; 
     else downcheck = true; 

     e.preventDefault(); 

    } 


    if(e.keyCode == '40') { 

     if(up + down > HEIGHT - 110) upcheck = false; 
     else upcheck = true; 
     e.preventDefault(); 
    } 


    if(e.keyCode == '37') { 

     if(left + right == 0) rightcheck = false; 
     else rightcheck = true; 
     e.preventDefault(); 
    } 


    if(e.keyCode == "39") { 
     if(left + right > WIDTH - 110) leftcheck = false; 
     else leftcheck = true; 
     e.preventDefault(); 
    } 

    if(leftcheck == true) { left += 10; counting() }; 
    if(rightcheck == true) { right -= 10; counting() }; 
    if(upcheck == true) { up += 10; counting(true) }; 
    if(downcheck == true) { down -= 10; counting(true) }; 

} 

Le problème étant bien sûr que Javascrpt ne supporte pas la possibilité de vérifier si deux touches sont enfoncées en même temps. Ce que je veux accomplir, c'est que lorsque l'utilisateur appuie et quitte, il se déplace en diagonale. Ignorer la fonction "comptage", c'est juste pour garder une trace de combien l'utilisateur a bougé.

J'ai réussi à accomplir cela avec juste et sinon des déclarations, pas moins! Alors je me demandais si vous pouviez essayer. La première instruction if dans chaque instruction if de clé permet à l'utilisateur de ne pas quitter la boîte de canevas. Ensuite, j'ai une fonction qui déplace l'utilisateur en redessinant le canevas.

function redraw() { 
    clear(draw); 
    draw.fillStyle = 'rgba(0,0,0,0.5)'; 
    draw.fillRect(left + right, up + down, '100', '100'); 
} 

La fonction "Effacer" est simplement une fonction simple qui efface la totalité du canevas. Tout cela est contrôlé par une fonction d'initialisation qui ressemble à ceci:

function init() { 
    canvas = document.getElementById('game'); 
    HEIGHT = canvas.height; 
    WIDTH = canvas.width; 
    draw = canvas.getContext('2d'); 

    setInterval(redraw, 30); 

    document.onkeydown = canvasMove; 
} 

Answer 1

Vos drapeaux -check doivent être des variables globales plutôt que des variables de fonction scope, sinon ils ne pourront jamais rester fixé entre les événements keydown (manipulation d'une seule touche à la fois). Vous avez également besoin d'un gestionnaire d'événements keyup qui désactive l'indicateur correct lorsqu'une clé est libérée.