我试图创建一个函数，将移动png图像上，下，左或右的用户按下WASD或箭头键。目前我已经想出了一种方法来移动项目使用WASD，但当我引入"或"操作数并使用Key。箭头键的代码箭头键不被识别尽管它仍然可以识别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);
});
这个表达式:
87 || 38
计算结果为87。每一次。这意味着这个表达式:
event.keyCode == (87 || 38)
与87比较。每次.
不要认为这些逻辑条件是直观的人类语言。它们需要构建为单独的逻辑表达式，分别求值。你要找的是:
(event.keyCode == 87 || event.keyCode == 38)
你应该试试
if ((event.keyCode == 87 || event.keyCode == 38) && rocket.offsetTop > 100)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR