如何在jquery/javascript中处理游戏中的多按键？_Javascript_Jquery

如何在jquery/javascript中处理游戏中的多按键？

javascript jquery

如何在jquery/javascript中处理游戏中的多按键？,javascript,jquery,Javascript,Jquery,我正在尝试为我正在做的一个“小游戏”测试做一个多按键组合验证。基本上是一个来自凡人的角色，我用ASDW键移动它。。。但是如果我想同时躲避和阻挡（比如S+K），会发生什么呢。但我无法让它工作：S 现在。。。不仅如此，如果我只按S键，它会闪开。然后我按下K键（同时按住S键），它会在俯冲时阻塞。如果我释放K，它应该会继续下降。这也可能吗如何处理javascript中的技能组合示例？比如，如果我按下S->D->Punch键，我将完成一项技能（不是同时按下，而是按顺序）有没有什么可能的方法来做这些

我正在尝试为我正在做的一个“小游戏”测试做一个多按键组合验证。基本上是一个来自凡人的角色，我用ASDW键移动它。。。但是如果我想同时躲避和阻挡（比如S+K），会发生什么呢。但我无法让它工作：S

现在。。。不仅如此，如果我只按S键，它会闪开。然后我按下K键（同时按住S键），它会在俯冲时阻塞。如果我释放K，它应该会继续下降。这也可能吗

如何处理javascript中的技能组合示例？比如，如果我按下S->D->Punch键，我将完成一项技能（不是同时按下，而是按顺序）

有没有什么可能的方法来做这些

这是我在一个简单HTML中的全部代码，因此您可以完整地看到它：

附言：看预加载图像部分的评论，我的意思是，当试图将角色从一种方式移动到另一种方式时，动画是起伏的。。。为什么呢？我做错了什么

<! DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <style>
    #reptile_wrapper {
      top: 120px;
      left: 140px;
      position:relative;
    }

    #container {
      margin-top: 240px;
      margin-left: 470px;
      width: 890px;
      height: 301px; /* entire one 547px */
      background: url("img/bgs/pit_background.png") no-repeat;
      background-size: 100%;
    }

    #pit {
      top: 0px;
      position: relative;
      width: 890px;
      height: 300px;
      background: url("img/bgs/pit.png") no-repeat;
      background-size: 100%;
    }

    #pit_chain {
      position: absolute;
      width: 150px;
      height: 340px;
      background: url("img/bgs/pit_chains.png") no-repeat;
      margin-left: 695;
    }

  </style>
</head>
<body>

<audio src="sounds/mk3thepit.mp3" preload="auto" loop="true" autoplay="true" autobuffer></audio>
<div id="pit_chain">
</div>
<div id="container">
  <div id="pit">
    <div id="reptile_wrapper">
      <img src="img/reptile_idle.gif"/>
    </div>
  </div>
</div>

<script>

  /* Preload all the images and gifs */
  function preloadImages(srcs, imgs, callback) {
    var img;
    var remaining = srcs.length;
    for (var i = 0; i < srcs.length; i++) {
      img = new Image();
      img.onload = function() {
        --remaining;
        if (remaining <= 0) {
          callback();
        }
      };
      img.src = srcs[i];
      imgs.push(img);
    }
  }

  // then to call it, you would use this
  var imageSrcs = ["img", "img/bgs"];
  var images = [];

  preloadImages(imageSrcs, images, startGame());
  /* End of preloading images and gifs */

  var duckImages = ["d01", "d02"];
  var defaultY = '120px';

  reptileIdleAnimation();

  function startGame() {
    var keys = [];
    window.addEventListener("keydown",
    function(e){
      keys[e.keyCode] = e.keyCode;
      var keysArray = getNumberArray(keys);

      if(keysArray.toString() == "68"){
        $("#reptile_wrapper img").attr('src', 'img/reptile_walk_forward.gif')
        .parent().css({left: '+=5px'});
      }else if(keysArray.toString() == "17,65"){
        // document.body.innerHTML += " Select all!"
      }
    },
    false);

    window.addEventListener('keyup',
    function(e){
      keys[e.keyCode] = false;
      reptileIdleAnimation();
    },
    false);

    function getNumberArray(arr){
      var newArr = new Array();
      for(var i = 0; i < arr.length; i++){
        if(typeof arr[i] == "number"){
          newArr[newArr.length] = arr[i];
        }
      }
      return newArr;
    }
  }
</script>
</body>
</html>


#爬行动物皮{
顶部：120px；
左：140像素；
位置：相对位置；
}
#容器{
边缘顶部：240px；
左边距：470像素；
宽度：890px；
高度：301px；/*整件547px*/
背景：url（“img/bgs/pit_background.png”）不重复；
背景大小：100%；
}
#坑{
顶部：0px；
位置：相对位置；
宽度：890px；
高度：300px；
背景：url（“img/bgs/pit.png”）不重复；
背景大小：100%；
}
#坑槽链{
位置：绝对位置；
宽度：150px；
高度：340px；
背景：url（“img/bgs/pit_chains.png”）不重复；
左边距：695；
}
/*预加载所有图像和GIF*/
函数预加载映像（srcs、imgs、回调）{
var-img；
剩余var=srcs.length；
对于（变量i=0；i如果（剩余），您不一定需要依赖jQuery来捕获密钥

var-keys=[]；
document.body.innerHTML=“当前按下的键：”
window.addEventListener（“向下键”，
职能（e）{
密钥[e.keyCode]=e.keyCode；
var keysArray=getNumberArray（键）；
document.body.innerHTML=“当前按下的键：”+keysArray；
if（keysArray.toString（）=“17,65”）{
document.body.innerHTML+=“全选！”
}
},
假）；
window.addEventListener（'keyup'，
职能（e）{
密钥[e.keyCode]=假；
document.body.innerHTML=“当前按下的键：”+getNumberArray（键）；
},
假）；
函数getNumberArray（arr）{
var newArr=新数组（）；
对于（变量i=0；i

正如您所见，从技术上讲，同时检测多个按键和释放不是问题
我认为这里唯一的浏览器罪魁祸首（对于纯JS）是e.keyCode


请参阅提供的答案；您可以使用此代码正确处理预加载
希望有帮助！听起来可能，一些键盘会限制同时按下的按钮数量，但在大多数现代键盘上，两个按钮应该不是问题，但如果没有任何代码，我们怎么知道问题出在哪里？请向我们展示如何捕捉按键。包括您的JS代码。@SquareCat发布了我的所有代码，另请参阅imag如果预加载不起作用，我应该在代码中使用那些img.src吗？（但是如何使用？让我看看：）如果我想创建一个按钮序列呢？我需要使用setTimeout函数还是其他什么？比如“如果你在不到1秒的时间内按A、D、F、G，然后按顺序，我会抛出一个技能？这是一种方法吗？嘿，Square，它可以工作，但gif的动画会变得不稳定，这是为什么呢？：（要用你给meNope的预加载程序来尝试它：（尝试将其与预加载程序一起使用，但静态动画是起伏的，更新的代码，以便您可以看到它的外观这些是动画gif，是否可能是起伏的，因为我不让动画gif动画？？每当我“按下键”？我认为这可能是可能的，不一定是因为关键事件，但可能是浏览器上的负载太高。您能否在其他系统上测试您的脚本，最好是使用同一个和另一个浏览器，以便您可以收集一些数据？
var keys = [];
document.body.innerHTML = "Keys currently pressed: "
window.addEventListener("keydown",
  function(e){
    keys[e.keyCode] = e.keyCode;
    var keysArray = getNumberArray(keys);
    document.body.innerHTML = "Keys currently pressed:" + keysArray;
    if(keysArray.toString() == "17,65"){
      document.body.innerHTML += " Select all!"
    }
  },
  false);

window.addEventListener('keyup',
  function(e){
    keys[e.keyCode] = false;
    document.body.innerHTML = "Keys currently pressed: " + getNumberArray(keys);
  },
  false);

function getNumberArray(arr){
  var newArr = new Array();
  for(var i = 0; i < arr.length; i++){
    if(typeof arr[i] == "number"){
      newArr[newArr.length] = arr[i];
    }
  }
  return newArr;
}