如何解决向上和向下箭头无法在JavaScript中使用onkeydown
我正在构建一个简单的障碍游戏,现在遇到的问题是我可以使用箭头键左右移动,但不能上下移动。当它们具有与左右相同的逻辑时,我不明白为什么向上和向下不起作用。我对自己开发东西还很陌生,所以如果很明显,请对我轻松一点。 :)
document.addEventListener("DOMContentLoaded",() => {
// Grab the elements from the HTML
const floppy = document.getElementById("floppydisk");
const gameBoard = document.querySelector(".gameBoard");
let userscore = document.getElementById("userscore");
let highscore = document.getElementById("highscore");
// Set up variables to be used later
let floppyPosX = 0;
let floppyPosY = 0;
let left = 20;
let top = 190;
// Use the arrows to move the floppy disk
function moveFloppy(e) {
if(e.keyCode == 39) {
left += 2;
floppy.style.left = floppyPosX + left + "px";
}
if(e.keyCode == 37) {
left -= 2;
floppy.style.left = floppyPosX + left + "px";
}
if(e.keycode == 38) {
top += 2;
floppy.style.top = floppyPosY + top + "px";
}
if(e.keycode == 40) {
top -= 2;
floppy.style.top = floppyPosY + top + "px";
}
}
// Invoke the moveFloppy function
document.onkeydown = moveFloppy;
// Generate Obstacles
// Function to move the obstacles
// Set function to repeat
// Call the function to generate the obstacles
})
解决方法
您的问题是因为您使用的是the deprecated (and ill-defined) KeyboardEvent.keyCode
property而不是标准化的code
属性。
将您的JavaScript更改为此,它应该可以工作:
- 免责声明:
- 我尚未评估您的
left
/floppyPosX
逻辑的正确性。 - 我将您的
if
语句更改为单个switch
语句。- 请注意
switch
as it has fallthrough unless you usebreak
。
- 请注意
- 我尚未评估您的
function moveFloppy(e) {
switch(e.code) {
case 'ArrowLeft':
left += 2;
floppy.style.left = floppyPosX + left + "px";
break;
case 'ArrowRight':
left -= 2;
floppy.style.left = floppyPosX + left + "px";
break;
case 'ArrowUp':
top += 2;
floppy.style.top = floppyPosY + top+ "px";
break;
case 'ArrowDown':
top -= 2;
floppy.style.top = floppyPosY + top + "px";
break;
default:
// TODO: Play a fart sound.
break;
}
}
document.addEventListener( 'keydown',moveFloppy );
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。