如何解决JavaScript 事件侦听器使字符在按右箭头键时向右移动
我有一个简单的 JScript HTML 和 CSS 游戏，在该游戏中，角色必须跳跃，但也可以在按下右箭头时向右移动。我有跳转功能，但在尝试复制它以创建右箭头功能时，它不起作用。
所需的输出： 修正当前代码，使按下右箭头时，角色也可以向右移动，也可以跳跃。按下右箭头键后，角色会继续向右移动。在 keyup 上，它会停止（我是否必须为 keyup 和这种可能性创建另一个动画）或者肯定有更简单的方法？
使用更新后的解决方案，它向右移动，但随后跳回到位置 left:0 而不是停留在它移动的位置。
说明：这是一种可接受的编码方式，还是整个代码都应该在事件侦听器中？ （例如整个游戏循环）添加额外按键移动功能的最佳实践是什么。像这样调用 CSS 动画是可以接受的还是不好的做法，如果不能，为什么？
我的 JavaScript
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
function jump(){
if(character.classlist!="animate"){
character.classList.add("animate");
}
setTimeout(function(){
character.classList.remove("animate");
},500);
}
function right(){
if(character.classlist!="right"){
character.classList.add("right");
}
setTimeout(function(){
character.classList.remove("right");
},500);
}
var checkDead =setInterval(function(){
var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
var enemyLeft = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"));
console.log(characterTop);
//commented this out while working on css
/*
if(
enemyLeft<30 && enemyLeft>0 && characterTop>=360
)
{
enemy.style.animation="none"; //remove the animation
enemy.style.display="none";
alert("Poke.....I got you there!");
}
*/
},10);
addEventListener("keyup",function(e) {
if(e.keyCode == 38) jump()
})
addEventListener("keyright",function(e) {
if(e.keyCode == 40) right()
})
我为 keyright 添加的事件侦听器基于用于 keyup 的事件侦听器（有效）。
addEventListener("keyright",function(e) {
if(e.keyCode == 40) right()
})
动画在 CSS 中生成
*{
padding:0;
margin:22;
}
#game{
width:500px;
height:500px;
border:4px solid #171918;
}
#character{
width:30px;
height:120px;
background-color:green;
position:relative;
top:320px;
border-radius:20px;
/*animation: jump 300ms */
}
/* new class called animate */
.animate{
animation: jump 500ms;
}
.right{
animation: right 500ms;
}
#enemy{
width:60px;
height:60px;
background-color:red;
border-radius:14px;
position:relative;
top:320px;
left:440px;
animation: moveenemy 1s infinite linear;
}
@keyframes moveenemy{
0%{left:440px;}
50%{top:58px;}
100%{left:0px; top:320x;}
}
@keyframes jump{
0%{top:380px;}
30%{top:50px;}
50%{top:40px;}
100%{top:380px;}
}
@keyframes right{
0%{left:0px;}
100%{left:30px;}
}
/* adding sky*/
#sky{
width:500px;
height:340px;
background-color:skyblue;
position:absolute;
top:118px;
}
/* adding ground */
#ground{
width:500px;
height:170px;
background-color:bisque;
position:absolute;
top:450px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>B</h1>
<p>fight</p>
<div id="game">
<div id="sky"></div>
<div id="ground"></div>
<div id="enemy"></div>
<div id="character"></div>
</div>
<script src="script.js"></script>
</body>
</html>
解决方法
现在按下 right arrow 时角色会向右移动，按下 up arrow 时角色会跳跃
当您从按键上松开手时会触发 keyup...而不是当您按下右箭头时！
var character = document.getElementById("character");
var enemy = document.getElementById("enemy");
function jump() {
if (character.classlist != "animate") {
character.classList.add("animate");
}
setTimeout(function() {
character.classList.remove("animate");
},500);
}
function right() {
var leftVal = parseInt(window.getComputedStyle(character).getPropertyValue("left"))
character.style.left = (leftVal + 30) + "px";
}
function left() {
var leftVal = parseInt(window.getComputedStyle(character).getPropertyValue("left"))
character.style.left = (leftVal - 30) + "px";
}
var checkDead = setInterval(function() {
var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));
var enemyLeft = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"));
//console.log(characterTop);
//commented this out while working on css
/*
if(
enemyLeft<30 && enemyLeft>0 && characterTop>=360
)
{
enemy.style.animation="none"; //remove the animation
enemy.style.display="none";
alert("Poke.....I got you there!");
}
*/
},10);
addEventListener("keyup",function(e) {
if (e.keyCode === 37) {
left()
}
})
addEventListener("keyup",function(e) {
if (e.keyCode === 38) {
jump()
}
})
addEventListener("keyup",function(e) {
if (e.keyCode === 39) {
right()
}
})* {
padding: 0;
margin: 22;
}
#game {
width: 500px;
height: 500px;
border: 4px solid #171918;
}
#character {
width: 30px;
height: 120px;
background-color: green;
position: relative;
top: 320px;
border-radius: 20px;
left:0px;
/*animation: jump 300ms */
}
/* new class called animate */
.animate {
animation: jump 500ms;
}
.right {
animation: right 500ms;
}
#enemy {
width: 60px;
height: 60px;
background-color: red;
border-radius: 14px;
position: relative;
top: 320px;
left: 440px;
animation: moveenemy 1s infinite linear;
}
@keyframes moveenemy {
0% {
left: 440px;
}
50% {
top: 58px;
}
100% {
left: 0px;
top: 320x;
}
}
@keyframes jump {
0% {
top: 380px;
}
30% {
top: 50px;
}
50% {
top: 40px;
}
100% {
top: 380px;
}
}
@keyframes right {
0% {
left: 0px;
}
100% {
left: 30px;
}
}
/* adding sky*/
#sky {
width: 500px;
height: 340px;
background-color: skyblue;
position: absolute;
top: 118px;
}
/* adding ground */
#ground {
width: 500px;
height: 170px;
background-color: bisque;
position: absolute;
top: 450px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>B</h1>
<p>Fight</p>
<div id="game">
<div id="sky"></div>
<div id="ground"></div>
<div id="enemy"></div>
<div id="character"></div>
</div>
<script src="script.js"></script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
