JS - 为什么我的“或”等式中的第二个值没有被识别答案

【问题标题】：JS - Why isnt the second value in my "or" equation recognisedJS - 为什么我的“或”等式中的第二个值没有被识别
【发布时间】：2021-08-22 05:03:28
【问题描述】：

我正在尝试创建一个函数，该函数将通过用户按下 WASD 或箭头键来向上、向下、向左或向右移动 png 图像。目前我已经找到了一种使用 WASD 移动项目的方法，但是当我引入“或”操作数并使用 Key.Code 作为箭头键时，即使它仍然可以识别 WASD，也无法识别箭头键

<body>
<div class="scene">
  <div class="rocket">
    <img src="rocket.png" alt="" />
  </div>
</div>
<script src="script.js"></script>

    document.addEventListener("keydown", (e) => {
    var rocket = document.querySelector(".rocket");
    let speed = 10;

     if (event.keyCode == (87 || 38) && rocket.offsetTop > 100) {
     rocket.style.top = `${rocket.offsetTop - speed}px`;
     }
     if (event.key == "s" && rocket.offsetTop < window.innerHeight - 300) {
     rocket.style.top = `${rocket.offsetTop + speed}px`;
     }
     if (event.key == "a" && rocket.offsetLeft > 50) {
     rocket.style.left = `${rocket.offsetLeft - speed}px`;
     }
     if (event.key == "d" && rocket.offsetLeft < window.innerWidth - 125) {
     rocket.style.left = `${rocket.offsetLeft + speed}px`;
     }
     if (event.key == " " && rocket.offsetTop > 100) {
     rocket.style.top = `${rocket.offsetTop - 200}px`;
     }
     console.log(event.keyCode);
     });

【问题讨论】：

如果你这样尝试会发生什么：if ((event.keyCode == 87 || event.keyCode == 38) && rocket.offsetTop > 100)？编辑：我还看到在你的函数中你传递了e，而不是event。所以试试e.keyCode 而不是event.keyCode。

标签： javascript html

【解决方案1】：

这个表达式：

87 || 38

评估为87。每次。这意味着这个表达式：

event.keyCode == (87 || 38)

将值与87 进行比较。每次。

不要将这些逻辑条件视为直观的人类语言。它们需要构建为单独的逻辑表达式，单独评估为一个值。您正在寻找的是：

(event.keyCode == 87 || event.keyCode == 38)

【讨论】：

啊啊当然！！！谢谢！有时它很简单

【解决方案2】：

你应该试试

 if ((event.keyCode == 87 || event.keyCode == 38)  && rocket.offsetTop > 100)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR

【讨论】：