我编写了以下代码，以使每次我按键盘上的向左箭头键时都将标识为“玩家”的框向左旋转一个角度。我尝试通过声明一个名为“ numberD”的变量并将其设置为0来设置度的初始值。声明。然后，我尝试将numberD的值插入到其后面的语句中，方法是将其插入旋转度语句中。
我没有收到任何语法错误，但是该框没有移动，我知道按键的工作原理是因为我附加了控制台日志，每次按下左键时都会触发。我认为我的问题是，当我声明numberD时，它不知道将其连接CSS元素播放器的transform属性。
任何想法将不胜感激。谢谢！
另外，此示例为CODEPEN LINK。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #1f1f2e;
margin: 0px;
padding: 0px;
}
#arena {
background-color:black;
margin: 0px;
padding: 0px;
width: 500px;
height: 500px;
}
#player {
background-color: white;
width: 10px;
height: 10px;
position: relative;
top:50%;
left:50%;
transform:rotate(0deg);
}
</style>
<script>
document.addEventListener("keydown", keyBoardInput);
function keyBoardInput() {
var i = event.keyCode;
if (i == 37) {
numberD = 0;
numberD ++;
document.getElementById('player').style.transform = "rotate(" +
numberD +"deg)";
console.log('fired');
}
}
</script>
<body>
<div id="arena">
<div id="player"></div>
</div>
</body>
</head>
</html>
最佳答案
每次调用该函数时，都要重置旋转值：numberD = 0;
要解决此问题，您必须在函数外部声明变量。您可以通过将其定义为文档范围的变量来做到这一点：document.numberD = 0;
这是代码：
document.addEventListener("keydown", keyBoardInput);
document.numberD = 0;
function keyBoardInput() {
var i = event.keyCode;
if (i == 37) {
document.numberD++;
document.getElementById('player').style.transform = "rotate(" + document.numberD + "deg)";
console.log('fired');
}
}
这是一个working example.