JavaScript eventlistener making a character move right on arrow-right key press

问题

I have a simple JScript HTML and CSS game in which the character must jump but also move right on pressing the right arrow. I have the jump function working, but on trying to replicate it to create the right-arrow function, it doesn't work.

Desired output: To correct the current code such that on pressing the right arrow, the character can also move right, as well as jump. On pressing the right arrow key, the character would keep moving right. On keyup, it would stop (do I have to actually create another animation for keyup and this eventuality) or surely there is an easier method?

With the updated solution, it goes to the right, but then jumps back to position left:0 instead of staying where it was moved.

Explanation: Is this an acceptable way to be coding, or should the whole code be in an event listener? (e/g the whole game loop) What are the best practices for adding additional key movement functionality. Is calling on CSS animations like this acceptable or not good practice, and if not, why?

My 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()
})

The eventlistener I added for keyright was based on the one (which worked) for keyup.

  addEventListener("keyright", function(e) {
        if(e.keyCode == 40) right()
    })

The animations are generated in the 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;
}

The 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>

回答1:

Now the character would move right when you press right arrow and it would jump when you press up arrow

keyup is triggered when you releases hand from the key... and not when you press the right arrow!

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>

来源：https://stackoverflow.com/questions/66048374/javascript-eventlistener-making-a-character-move-right-on-arrow-right-key-press

标签

javascript

html

css

addeventlistener

keycode