如何解决我试图做一个移动的对象,但是代码没有做任何事情我想知道问题是什么?
我对JavaScript,HTML和CSS非常陌生。我已多次阅读代码,但似乎无法弄清楚是什么使它无法正常工作。它没有返回任何错误,但是没有按预期工作。我试图在屏幕上显示一个正方形以按WASD进行移动。我看到广场出现了,但是按WASD时没有任何反应。我觉得解决方案一定很简单,但我无法弄清楚。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body onkeypress="move(event)">
<style>
#block {
width: 50px;
height: 50px;
background-color: #555;
margin-top: 0px;
margin-left: 0px;
}
</style>
<div id="block"class="block"></div>
<script>
var blockX = 0;
var blockY = 0;
var keyPressed = 0;
function move(event) {
keyPressed = event.keyCode;
if (keyPressed === 87 || 83) {
moveY();
}
else if (keyPressed === 65 || 68) {
moveX();
}
}
function moveX() {
if (keyPressed === 65) {
blockX -= 3;
document.getElementById("block").style.marginLeft = blockX + "px"
}
else if (keyPressed === 68) {
blockX += 3
document.getElementById("block").style.marginLeft = blockX + "px"
}
}
function moveY() {
if (keyPressed === 87) {
blockY += 3;
document.getElementById("block").style.marginTop = blockY + "px"
}
else if (keyPressed === 83) {
blockY -= 3;
document.getElementById("block").style.marginTop = blockY + "px"
}
}
</script>
</body>
</html>
解决方法
您需要像这样比较keyPressed变量
(keyPressed === 87 || keyPressed === 83)
此外,您还可以使用以下功能监听按键事件:
document.addEventListener("keydown",function(event) {
move(event)
});
var blockX = 0;
var blockY = 0;
var keyPressed = 0;
function move(event) {
keyPressed = event.keyCode;
if (keyPressed === 87 || keyPressed === 83) {
moveY();
} else if (keyPressed === 65 || keyPressed === 68) {
moveX();
}
}
function moveX() {
if (keyPressed === 65) {
blockX -= 3;
document.getElementById("block").style.marginLeft = blockX + "px"
} else if (keyPressed === 68) {
blockX += 3
document.getElementById("block").style.marginLeft = blockX + "px"
}
}
function moveY() {
if (keyPressed === 87) {
blockY += 3;
document.getElementById("block").style.marginTop = blockY + "px"
} else if (keyPressed === 83) {
blockY -= 3;
document.getElementById("block").style.marginTop = blockY + "px"
}
}
#block {
width: 50px;
height: 50px;
background-color: #555;
margin-top: 0px;
margin-left: 0px;
}
<div id="block" class="block"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。