逻辑表达式在 switch 语句中用作 case 值时不起作用

Question

我是 JavaScript 新手，正在尝试构建一个简单的盒子运动控制项目。

我正在尝试使用 switch 语句 作为 if 语句行的替代方案。

在我的代码中，我添加了 keydown 事件监听器，以便当用户按下键盘上的按键时影响 CSS 样式。这是我的代码：

/** @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>

以注释

/* For rotation of the box */

开头的代码块是当同时按下

ctrl

、

ArrowUp

或

ArrowRight

键时顺时针旋转框。但好像没啥效果

但是当它在

if statement

中时，它确实有效：

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

我真的想用 switch 语句 来做到这一点。如果有人可以帮忙，我将不胜感激。

Answer 1

之前您似乎有多个独立的

if

语句。然而，

switch

语句（每种情况下都有一个

break

）的行为更像是

else-if

链，仅执行first匹配条件上的块。因此，您永远不会同时运行执行移动的代码和执行旋转的代码。

将旋转处理放在

switch

语句下方的单独语句中，这也意味着您可以按预期使用

switch

，打开变量键而不是打开

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 rotation of the box */
    if (keyPressed.ctrlKey === true &&
        (keyPressed.code === "ArrowUp" || keyPressed.code === "ArrowRight")
    ) {
        console.log("rotating");
        rotation = rotation + 30;
    }

    refresh();
}