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

两盒软妹~` 提交于 2021-02-11 12:52:43

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!