document.addEventListener( "keydown" ，myFunction) 不起作用

Question

我正在制作一款游戏，我想使用"w"， "a"， "one_answers";d"键移动，但它不工作这里是我的代码。

let yAxis=0;
let xAxis=0;
let test=document.getElementById("testDiv");
document.addEventListener("keydown",myFunction)


function myFunction(event){
let k=event.key
if(k=="s"){

test.style.top=yAxis +"px";
yAxis+=1;

}else if(k=="d"){
test.style.left=xAxis +"px";
xAxis+=1;

}else if(k=="a"){

test.style.left=xAxis +"px";
xAxis-=1;


}else if(k="w"){

test.style.top=yAxis +"px";
yAxis-=1



}else{
document.getElementById("testY").innerText="Use 'w','s','a' and 'd'. "
}
}

我希望我的div在按'w'键时向上移动，按's'时向下移动，按'd'时向右移动，按'a'时向左移动。

Answer 1

两个问题

1. 是你必须设置元素的position属性，特别是可移动元素，它应该设置为absolute。

2. } else if (k = "w") {不会正常工作-你分配w到k不检查k等于w。你在其他条件下是对的，只是那个不行。

您可能还会发现switch比一系列if/else语句更容易导航，并将更改轴值的代码移动到更新元素位置的语句之前。

注意:在这个例子中，我使用的是10而不是1的增量。

let yAxis = 10;
let xAxis = 10;
const test = document.getElementById('testDiv');
const message = document.getElementById('message');
document.addEventListener('keydown', myFunction);
function myFunction(event) {

switch(event.key) {
case 'w': {
yAxis -= 10;
test.style.top = `${yAxis}px`;
break;
}
case 'd': {
xAxis += 10;
test.style.left = `${xAxis}px`;
break;
}
case 's': {
yAxis += 10;
test.style.top = `${yAxis}px`;
break;
}
case 'a': {
xAxis -= 10;
test.style.left = `${xAxis}px`;
break;
}
default: {
message.textContent = `Use 'w','s','a' and 'd'.`;    
break;
}
};

}

#container { height: 200px; width: 200px; border: 1px solid darkgray; position: relative; }
#testDiv { height: 50px; width: 50px; background-color: blue; position: absolute; top: 10; left: 10; }

<div id="container">
<div id="testDiv"></div>
</div>
<div id="message"></div>

附加文档

• 模板/字符串