如何解决窗口 addEventListener 按键不起作用
我正在编写一个游戏,当您按下箭头键时,立方体会在屏幕上移动。但它不起作用。有人可以帮我吗?
var playerElement = document.getElementById('playerEl');
var playerY = 0;
var playerX = 0;
window.addEventListener('keydown',function(e) {
switch (e.keyCode) {
case 37:
playerX -= 100;
playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%);";
break;
case 38:
playerY -= 100;
playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%);";
break;
case 39:
playerX += 100;
playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%);";
break;
case 40:
playerY += 100;
playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%);";
break;
}
},true);
#playerEl {
width: 50px;
height: 50px;
background: grey;
display: inline-block;
transform: translate(1%,1%);
}
<body style="height:100vh;width:100vw;">
<div id="playerEl"></div>
</body>
解决方法
使用 javascript 设置 transform
style
属性时,不必在字符串中添加 ;
。
应该这样做:
playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%)";
这是您的代码,;
字符串中没有 transform
。
var playerElement = document.getElementById('playerEl');
var playerY = 0;
var playerX = 0;
window.addEventListener('keydown',function(e) {
switch (e.keyCode) {
case 37:
playerX -= 100;
playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%)"; // Removed semi-colon from string
break;
case 38:
playerY -= 100;
playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%)"; // Removed semi-colon from string
break;
case 39:
playerX += 100;
playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%)"; // Removed semi-colon from string
break;
case 40:
playerY += 100;
playerElement.style.transform = "translate(" + playerX + '%,' + playerY + "%)"; // Removed semi-colon from string
break;
}
},true);
#playerEl {
width: 50px;
height: 50px;
background: grey;
display: inline-block;
transform: translate(1%,1%);
}
<body style="height:100vh;width:100vw;">
<div id="playerEl"></div>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。