How come, when running the code, the speed only increases when pressing 'd'?-CodePudding

Expand the snippet to read the variables. How do I fix this?

Is it because when hitting the if-loop and/or switch case lines, the first 'w', has priority? And 'd', the last one has less? You can check this to: hold a key down, press the opposite directional key; e.g. w and s, to see if it'll change direction. How can I prevent this as well since I assume that has something to do with it.

/** @format */

// GLOBAL VARIABLES
const player = document.getElementById("player");
const field = document.getElementById("field");

var playerX = player.offsetLeft;
var playerY = player.offsetTop;

var move = 5;
var speed = move;
var increase = 2;

// key input handler
var w = false;
var a = false;
var s = false;
var d = false;
field.onkeydown = (e) => {
    switch (e.key) {
        case "w":
            w = true;
            break;
        case "a":
            a = true;
            break;
        case "s":
            s = true;
            break;
        case "d":
            d = true;
            break;
    }
};
field.onkeyup = (e) => {
    switch (e.key) {
        case "w":
            w = false;
            break;
        case "a":
            a = false;
            break;
        case "s":
            s = false;
            break;
        case "d":
            d = false;
            break;
    }
};
// THE ALWAYS LOOP
function loop() {
    playerX = player.offsetLeft;
    playerY = player.offsetTop;

    if (w) {
        player.style.top = playerY - speed   "px";
        speed *= increase;
    } else {
        speed = move;
    }
    if (a) {
        player.style.left = playerX - speed   "px";
        speed *= increase;
    } else {
        speed = move;
    }
    if (s) {
        player.style.top = playerY   speed   "px";
        speed *= increase;
    } else {
        speed = move;
    }
    if (d) {
        player.style.left = playerX   speed   "px";
        speed *= increase;
    } else {
        speed = move;
    }
    // add to board
    document.getElementById("move").innerHTML = move;
    document.getElementById("speed").innerHTML = speed;
    document.getElementById("increase").innerHTML = increase;
  
    requestAnimationFrame(loop);
}
loop();

/** @format */
body {
    background-color: rgb(107, 107, 107);
}
#field {
    position: absolute;
    width: 750px;
    height: 500px;
    background-color: rgb(255, 255, 0);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#player {
    position: absolute;
    background-color: #f30f4f;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

<!-- @format -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="wasd.css" />
        <title>WASD</title>
    </head>
    <body>
        <div id="board">
            <br />
            <p>move:<br /><span id="move"></span></p>
            <br />
            <p>speed:<br /><span id="speed"></span></p>
            <br />
            <p>increase:<br /><span id="increase"></span></p>
            <br />
        </div>
        <div tabindex="1" id="field"></div>
        <div id="player"></div>
        <script src="wasd.js"></script>
    </body>
</html>

CodePudding user response：

Because, if d is false, then speed = move; always executes (in the code below) even if one of the if statements above had set speed to something else.

if (d) {
    player.style.left = playerX   speed   "px";
    speed *= increase;
} else {
    speed = move;
}