Mon personnage se bloque après plusieurs déplacements rapides

[lucassinner]

Bonjour,
Je travaille sur un petit jeu en JavaScript avec un personnage qui se déplace sur une grille. J'ai un problème assez étrange: après plusieurs déplacements rapides, le personnage peut rester bloqué pendant quelques secondes. Les touches sont pourtant toujours détectées.
Voici la partie du code qui gère le déplacement:

Code : Tout sélectionner

const player = {
    x: 2,
    y: 2,
    moving: false
};

const keys = {};

document.addEventListener("keydown", function(e) {
    keys[e.key] = true;
});

document.addEventListener("keyup", function(e) {
    keys[e.key] = false;
});

function movePlayer() {
    if (player.moving) return;

    let newX = player.x;
    let newY = player.y;

    if (keys["ArrowLeft"]) newX--;
    if (keys["ArrowRight"]) newX++;
    if (keys["ArrowUp"]) newY--;
    if (keys["ArrowDown"]) newY++;

    if (newX !== player.x || newY !== player.y) {
        player.moving = true;

        if (isBlocked(newX, newY)) {
            player.moving = false;
            return;
        }

        player.x = newX;
        player.y = newY;

        drawPlayer();

        setTimeout(function() {
            player.moving = false;
        }, 100);
    }
}

function gameLoop() {
    movePlayer();
    requestAnimationFrame(gameLoop);
}

gameLoop();

Je pense que le problème vient de `player.moving`, mais je ne comprends pas pourquoi il reste parfois bloqué alors que le `setTimeout` devrait remettre la valeur à `false`. Basketball Bros
Est-ce que quelqu'un voit ce qui pourrait provoquer ce comportement?

[faultypolished]

Bonjour,
Je travaille sur un petit jeu en JavaScript avec un personnage qui se déplace sur une grille. J'ai un problème assez étrange: après plusieurs déplacements rapides, le personnage peut rester bloqué pendant quelques secondes. Les touches sont pourtant toujours détectées.
Voici la partie du code qui gère le déplacement:

Code : Tout sélectionner

const player = {
    x: 2,
    y: 2,
    moving: false
};

const keys = {};

document.addEventListener("keydown", function(e) {
    keys[e.key] = true;
});

document.addEventListener("keyup", function(e) {
    keys[e.key] = false;
});

function movePlayer() {
    if (player.moving) return;

    let newX = player.x;
    let newY = player.y;

    if (keys["ArrowLeft"]) newX--;
    if (keys["ArrowRight"]) newX++;
    if (keys["ArrowUp"]) newY--;
    if (keys["ArrowDown"]) newY++;

    if (newX !== player.x || newY !== player.y) {
        player.moving = true;

        if (isBlocked(newX, newY)) {
            player.moving = false;
            return;
        }

        player.x = newX;
        player.y = newY;

        drawPlayer();

        setTimeout(function() {
            player.moving = false;
        }, 100);
    }
}

function gameLoop() {
    movePlayer();
    requestAnimationFrame(gameLoop);
}

gameLoop();

Je pense que le problème vient de `player.moving`, mais je ne comprends pas pourquoi il reste parfois bloqué alors que le `setTimeout` devrait remettre la valeur à `false`. Basketball Bros
Est-ce que quelqu'un voit ce qui pourrait provoquer ce comportement?

L'utilisation de `setTimeout` dans la boucle de jeu (`requestAnimationFrame spider solitaire free`) est une mauvaise pratique en programmation de jeux JavaScript, car le délai d'attente n'est pas synchronisé avec la fréquence de rafraîchissement de l'écran. Pour une fluidité optimale et sans latence, il est recommandé de gérer le temps de déplacement à l'aide du Delta Time ou d'un compteur d'images directement dans la boucle de jeu.