I'm new to JavaScript and trying to build a simple box movements controlling project.

I'm trying to use a switch statement as an alternative to lines of if statements.

In my code, I added the keydown event listener, so as to affect the CSS sytles when the user presses a key on their keyboard. This is my code:

/** @format */

let box = document.getElementById("box");
document.addEventListener("keydown", handleKeyPress);
let verticalPosition = 0;
let horizontalPosition = 0;
let rotation = 0;
let key;
let stopHorizontalMovement;
let stopVerticalMovement;

function handleKeyPress(keyPressed) {
    key = keyPressed.code;

    switch (true) {
        /* For Vertical movement */
        case key === "ArrowDown": {
            verticalPosition = verticalPosition   1;
            if (verticalPosition > 100) {
                verticalPosition = 100;
                /* Stop moving the box down when the edge meets the end of the viewport height */
            }
            break;
        }

        case key === "ArrowUp": {
            verticalPosition = verticalPosition - 1;
            if (verticalPosition < 0) {
                verticalPosition = 0;
                /* Stop moving the box down when the edge meets the start of the viewport height */
            }

            break;
        }

        /* For Horizontal movement */
        case key === "ArrowLeft": {
            horizontalPosition = horizontalPosition - 1;
            if (horizontalPosition < -40) {
                horizontalPosition = -40;
                /* Stop moving the box down when the edge meets the start of the viewport width */
            }
            break;
        }

        case key === "ArrowRight": {
            horizontalPosition = horizontalPosition   1;
            if (horizontalPosition > 40) {
                horizontalPosition = 40;
                /* Stop moving the box down when the edge meets the end of the viewport width */
            }
            break;
        }

        /* For rotation of the box */

        case keyPressed.ctrlKey === true &&
            (key === "ArrowUp" || key === "ArrowRight"): {
            console.log("rotating");
            rotation = rotation   30;
            break;
        }

        default:
        // break;
    }
  refresh();
}
function refresh() {
    box.style.top = verticalPosition   "vh";
    box.style.left = horizontalPosition   "vw";
    box.style.transform = "rotate("   rotation   "deg)";
}

html,
body {
    width: 100%;
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    background-color: rgb(6, 6, 65);
    position: relative;
    margin: 0;
}

#box {
    background-color: red;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
    position: relative;
}

<div id="box"></div>
<script src="script.js"></script>

The code block that begins with the comment /* For rotation of the box */ was to rotate the box clockwise when the ctrl, ArrowUp, or ArrowRight keys are pressed simultaneously. But it doesn't seem to work.

But when it was in the if statement, it does work:

if (
        keyPressed.ctrlKey === true &&
        (key === "ArrowUp" || key === "ArrowRight")
    ) {
        rotation = rotation   30;
      }

I really want to do this with the switch statement. I'd appreciate if anyone can help out.

CodePudding user response：

It seems like previously you had multiple independent if statements. The switch statement (with a break on each case) however behaves more like an else-if chain, executing only the block on the first matching condition. So you'd never have the code that does movement and the code that does the rotation run both.

Put the rotation handling in a separate statement below the switch statement, which also means that you can use switch as intended, switching on the variable key and not on true:

function handleKeyPress(keyPressed) {
    switch (keyPressed.code) {
        /* For Vertical movement */
        case "ArrowDown": {
            verticalPosition = Math.min(100, verticalPosition   1);
            break;
        }

        case "ArrowUp": {
            verticalPosition = Math.max(0, verticalPosition - 1);
            break;
        }

        /* For Horizontal movement */
        case "ArrowLeft": {
            horizontalPosition = Math.max(-40, horizontalPosition - 1);
            break;
        }

        case "ArrowRight": {
            horizontalPosition = Math.min(40, horizontalPosition   1);
            break;
        }
    }

    /* For *additional* rotation of the box */
    if (keyPressed.ctrlKey === true &&
        (keyPressed.code === "ArrowUp" || keyPressed.code === "ArrowRight")
    ) {
        console.log("rotating");
        rotation = rotation   30;
    }

    refresh();
}