JavaScript 事件侦听器使字符在按右箭头键时向右移动 [英] JavaScript eventlistener making a character move right on arrow-right key press

查看：22
本文介绍了JavaScript 事件侦听器使字符在按右箭头键时向右移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个简单的 JScript HTML 和 CSS 游戏，在该游戏中，角色必须跳跃，但也可以在按下右箭头时向右移动.我有跳转功能，但在尝试复制它以创建右箭头功能时，它不起作用.

所需的输出: 修正当前代码，使按下右箭头时，角色也可以向右移动，也可以跳跃.按下右箭头键后，角色会继续向右移动.在 keyup 上，它会停止(我是否必须为 keyup 和这种可能性创建另一个动画)或者肯定有更简单的方法?

使用更新后的解决方案，它向右移动，但随后跳回到位置 left:0 而不是停留在它移动的位置.

说明:这是一种可接受的编码方式，还是整个代码都应该在事件侦听器中?(例如整个游戏循环)添加额外按键移动功能的最佳实践是什么.调用这样的 CSS 动画是可以接受的还是不好的做法，如果不能，为什么?

我的 JavaScript

var character = document.getElementById("character");var敌人 = document.getElementById(敌人");函数跳转(){if(character.classlist!=动画"){character.classList.add(动画");}设置超时(功能(){character.classList.remove(动画");},500);}功能右(){if(character.classlist!=正确"){character.classList.add("right");}设置超时(功能(){character.classList.remove(右");},500);}var checkDead =setInterval(function(){var characterTop = parseInt(window.getComputedStyle(character).getPropertyValue("top"));var敌人Left = parseInt(window.getComputedStyle(enemy).getPropertyValue(left"));console.log(characterTop);//在处理 css 时将其注释掉/*如果(敌人左<30 &&敌人左> 0 &&字符顶部>=360){敌人.style.animation =无"；//移除动画敌人.style.display =无"；alert(戳.....我让你在那里！");}*/},10);addEventListener(keyup", function(e) {如果(e.keyCode == 38)跳转()})addEventListener(keyright", function(e) {if(e.keyCode == 40) right()})

我为 keyright 添加的事件侦听器基于用于 keyup 的事件侦听器(有效).

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

动画在 CSS 中生成

<代码>*{填充:0;边距:22；}#游戏{宽度:500px；高度:500px；边框:4px 实心 #171918;}#特点{宽度:30px；高度:120px；背景颜色:绿色；位置:相对；顶部:320px；边框半径:20px；/*动画:跳跃300ms */}/* 名为 animate 的新类 */.animate{动画:跳跃500ms；}.对{动画:右 500 毫秒；}#敌人{宽度:60px；高度:60px；背景颜色:红色；边框半径:14px；位置:相对；顶部:320px；左:440px；动画:moveenemy 1s 无限线性；}@keyframes moveenemy{0%{left:440px;}50%{top:58px;}100%{left:0px;顶部:320x;}}@关键帧跳转{0%{顶部:380px;}30%{top:50px;}50%{top:40px;}100%{top:380px;}}@关键帧正确{0%{左:0px;}100%{left:30px;}}/* 添加天空*/#天空{宽度:500px；高度:340px；背景颜色:天蓝色；位置:绝对；顶部:118px；}/* 添加地面 */#地面{宽度:500px；高度:170px；背景色:素色；位置:绝对；顶部:450px；}

HTML

<html lang="en"><头><元字符集=UTF-8"><title>文档</title><link rel="样式表";href="style.css"><身体><h1>B</h1><p>战斗</p><div id="游戏"><div id=天空"></div><div id="ground"></div><div id=敌人"></div><div id="字符"></div>

<script src="script.js"></script></html>

解决方案

现在按下右箭头时角色会向右移动，按下向上箭头时角色会跳跃>

当您从按键上松开手时会触发 keyup...而不是当您按下右箭头时！

var character = document.getElementById("character");var 敌人 = document.getElementById("enemy");函数跳转(){如果(character.classlist ！=动画"){character.classList.add("动画");}设置超时(函数(){character.classList.remove("animate");}, 500);}功能右(){var leftVal = parseInt(window.getComputedStyle(character).getPropertyValue("left"))character.style.left = (leftVal + 30) + "px";}函数左(){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敌人左 = parseInt(window.getComputedStyle(enemy).getPropertyValue("left"));//console.log(characterTop);//在处理 css 时将其注释掉/*如果(敌人左<30 &&敌人左> 0 &&字符顶部>=360){敌人.style.animation =无"；//移除动画敌人.style.display =无"；alert("戳.....我找到你了！");}*/}, 10);addEventListener("keyup", function(e) {if (e.keyCode === 37) {剩下()}})addEventListener("keyup", function(e) {if (e.keyCode === 38) {跳()}})addEventListener("keyup", function(e) {if (e.keyCode === 39) {对()}})

* {填充:0；边距:22；}#游戏 {宽度:500px；高度:500px；边框:4px 实心 #171918；}#特点 {宽度:30px；高度:120px；背景颜色:绿色；位置:相对；顶部:320px；边框半径:20px；左:0px;/*动画:跳跃300ms */}/* 名为 animate 的新类 */.animate {动画:跳跃500ms；}.对 {动画:右 500 毫秒；}#敌人{宽度:60px；高度:60px；背景颜色:红色；边框半径:14px；位置:相对；顶部:320px；左:440px；动画:moveenemy 1s 无限线性；}@keyframes moveenemy {0% {左:440px；}50%{顶部:58px；}100% {左:0px；顶部:320 倍；}}@keyframes 跳转 {0% {顶部:380px；}30%{顶部:50px；}50%{顶部:40px；}100% {顶部:380px；}}@关键帧正确{0% {左:0px；}100% {左:30px；}}/* 添加天空*/#天空{宽度:500px；高度:340px；背景颜色:天蓝色；位置:绝对；顶部:118px；}/* 添加地面 */#地面 {宽度:500px；高度:170px；背景颜色:素瓷；位置:绝对；顶部:450px；}

<html lang="zh-cn"><头><meta charset="UTF-8"><title>文档</title><link rel="stylesheet" href="style.css"><身体><h1>B</h1><p>战斗</p><div id="游戏"><div id="天空"></div><div id="地面"></div><div id="敌人"></div><div id="字符"></div>

<script src="script.js"></script></html>

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>

解决方案

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>

这篇关于JavaScript 事件侦听器使字符在按右箭头键时向右移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆