Bonjour a tous,

Je suis étudiant en programmation et pour mon projet de fin d'année, je compte réaliser un jeu avec un petit vaisseau style space invader ou Galaga. Je n'en suis qu'au début, mais voila un problème que je ne peux pas régler : comment, sans bourriner les conditions puis je faire pour que mon vaisseau, si je presse simultanément A et W, actionne les deux conditions, allant en diagonale.
Voici une copie de mon code, je sais, il n'est pas parfait, et n’hésitez pas à me faire savoir ce qui ne va pas. Merci d'avance

window.onload = function lancementJeu()
{      
        //variables statiques
        var canvas = document.getElementById('mon_canvas');
        var context = canvas.getContext('2d');

        var imageVaisseau = new Image();
        imageVaisseau.src = "../Images/vaisseau.png";

        setInterval(refresh, 1000/30);
        var largeurVaisseau = window.innerWidth/18.6;
        var xVaisseau = window.innerWidth / 2 - largeurVaisseau/2;
        var yVaisseau = window.innerHeight;
       
  function refresh()
        {
            //variables responsives
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            largeurVaisseau = canvas.width/18.6;
            var hauteurVaisseau = largeurVaisseau/1.243;
            var vitesseVaisseau = canvas.width / 51
            //Rafraichissement de la page
            context.clearRect(0, 0, canvas.width, canvas.height);
            //dessins globaux
            //Espace et rectangle global
            context.beginPath();
            context.fillStyle = "#000000";
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.closePath();
            //Vaisseau du joueur
            context.beginPath();
            context.drawImage(imageVaisseau, 0, 0, 92, 74, xVaisseau, yVaisseau, largeurVaisseau, hauteurVaisseau);
            context.closePath();
       
            //controles avec les touches
            window.document.onkeydown = controleVaisseau;
            window.document.onkeyup = detectionTir;

            function controleVaisseau(e)
            {
                if (e.keyCode == 81 || e.keyCode == 65 || e.keyCode == 37) //Déplacement laréral gauche
                {
                xVaisseau-= vitesseVaisseau;
                if (xVaisseau <= 0) xVaisseau = 0; //Gestion de collison avec le mur
                }
                else if (e.keyCode == 68 || e.keyCode == 39) //Déplacement latéral droite
                { 
                xVaisseau+= vitesseVaisseau;
                if (xVaisseau + largeurVaisseau >= canvas.width) xVaisseau = canvas.width - largeurVaisseau;   //Gestion de collison avec le mur
                }
               
                if (e.keyCode == 38 || e.keyCode == 87 || e.keyCode == 90) //Déplacement vertical haut
                {
                yVaisseau-=vitesseVaisseau;
                if (yVaisseau <= 0) yVaisseau = 0; //Gestion de collison avec le mur
                }
                else if (e.keyCode == 40 || e.keyCode == 83) //Déplacement vertical bas
                {
                yVaisseau+=vitesseVaisseau;
                if (yVaisseau + hauteurVaisseau > canvas.height)  yVaisseau = canvas.height - hauteurVaisseau; //Gestion de collison avec le mur
                }

                if (e.keyCode == 27) //Mise en pause avec Escape
                {
                pause(); //Celle ci n'est pas encore définie, pas de panique
                }
            }

            function detectionTir(e)
            {
                if(e.keyCode == 32) { TirVaisseauJoueur();}
            }
           
            if (yVaisseau + hauteurVaisseau > canvas.height)  yVaisseau = canvas.height - hauteurVaisseau;
            //Celle ci est ici par ce que si je l'enlève, mon code ne marche plus, encore une fois n'hesitez pas a me dire
            //Ce qui ne va pas
           
        }
        //Fonctions gérant le tir
        function tirVaisseauJoueur()
        {
            var Tir = [];
            Tir.push(new TirVaisseauJoueur());
        }  

        function TirVaisseauJoueur(hauteurVaisseau)
            {
            var largeurTir = largeurVaisseau / 12;
            var hauteurTir = (largeurVaisseau/1.243) / 3;
            var xTir = (xVaisseau + largeurVaisseau/2) - largeurTir / 2;
            var vitesseTir = (canvas.height - (largeurVaisseau/1.243)) / 60;
            var yTir = yVaisseau + ((largeurVaisseau/1.243) / 10);
           
            setInterval(tir, 15);
                function tir ()
                {
                yTir-=vitesseTir;

                context.beginPath();
                context.fillStyle = "#FFFFFF";
                context.fillRect(xTir, yTir, largeurTir, hauteurTir);
                context.closePath();
               
                }
            }
           
        function pause()
        {
         xVaisseau = xVaisseau;
        }          
}

Hello.

Je te conseille déjà de séparer le code qui écoute les "keydown/keyup" du code qui gère ta logique de jeu.

D'un côté :

var Keyboard = {
  left  : false,
  up    : false,
  right : false,
  down  : false,
  space : false,
  echap : false
};

Keyboard.Key = {
  "A"     : 65,
  "W"     : 87,
  "D"     : 68,
  "S"     : 83,
  "LEFT"  : 37,
  "UP"    : 38,
  "RIGHT" : 39,
  "DOWN"  : 40,
  "SPACE" : 32,
  "ECHAP" : 27
};

document.addEventListener('keydown', onKeyDown);
document.addEventListener('keyup', onKeyUp);

function onKeyDown(event) {
  if (event.keyCode === Keyboard.Key.A || event.keyCode === Keyboard.Key.LEFT) { Keyboard.left = true; }
  if (event.keyCode === Keyboard.Key.W || event.keyCode === Keyboard.Key.UP) { Keyboard.up = true; }
  if (event.keyCode === Keyboard.Key.D || event.keyCode === Keyboard.Key.RIGHT) { Keyboard.right = true; }
  if (event.keyCode === Keyboard.Key.S || event.keyCode === Keyboard.Key.DOWN) { Keyboard.down = true; }
  if (event.keyCode === Keyboard.Key.SPACE ) { Keyboard.space = true; }
  if (event.keyCode === Keyboard.Key.ECHAP ) { Keyboard.echap = true; }
}

function onKeyUp(event) {
  if (event.keyCode === Keyboard.Key.A || event.keyCode === Keyboard.Key.LEFT) { Keyboard.left = false; }
  if (event.keyCode === Keyboard.Key.W || event.keyCode === Keyboard.Key.UP) { Keyboard.up = false; }
  if (event.keyCode === Keyboard.Key.D || event.keyCode === Keyboard.Key.RIGHT) { Keyboard.right = false; }
  if (event.keyCode === Keyboard.Key.S || event.keyCode === Keyboard.Key.DOWN) { Keyboard.down = false; }
  if (event.keyCode === Keyboard.Key.SPACE ) { Keyboard.space = false; }
  if (event.keyCode === Keyboard.Key.ECHAP ) { Keyboard.echap = false; }
}

et de l'autre :

if (Keyboard.left) {
  // Déplacement vers la gauche
}

if (Keyboard.right) {
  // Déplacement vers la droite
}

if (Keyboard.up) {
  // Déplacement vers le haut
}

if (Keyboard.down) {
  // Déplacement vers le bas
}

L'avantage est ici (outre le fait que le code est carrément plus lisible) que les if () peuvent être valides de manière successive.

Si ton joueur appuie sur gauche et bas en même temps, seuls les deux if () correspondants seront exécutés. Ce qui est plus pratique que d'essayer de gérer d'un coup toutes les combinaisons possibles.

Merci beaucoup !

Votre code fonctionne, c'est beaucoup plus fluide qu'avant. En plus de pouvoir activer deux touches simultanément, le temps de latence avant chaque activation de touche est désormais nul. Merci encore de votre aide !