Question

我正在尝试为我正在进行的“小游戏”测试进行多键按压组合验证。基本上是Mortal Kombat中的一个角色，我用ASDW键移动...但是如果我想同时躲避和阻挡（例如S + K）会发生什么。而我无法使其发挥作用：S

现在......不仅如此，如果我只按下S，它会躲开。然后我按下K（同时保持S推），它应该在避开时阻止。如果我释放K，它应该继续躲避。这也是可能的吗？

如何处理例如在javascript中执行技能的组合？就像我按下S-＆gt; D-＆gt; Punch会做一个技能（不是同时按下而是按顺序）

有没有办法做到这一切？

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

P.S：看一下预载图像部分中的注释，我的意思是，当试图将角色从一个方向移动到另一个时，动画是不稳定的......为什么会这样？我做错了什么？

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

感谢。

Answer 1

您不一定需要依赖jQuery来捕获密钥。

Here is a plain javascript solution

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;
}

正如您所看到的，从技术上讲，从同一时间检测多个按键和释放不是问题。

我认为这里唯一的浏览器罪魁祸首（对于普通的JS）是e.keyCode。如果你想使用jQuery，你可以重写监听器定义，以便他们使用jQuery。

In this question i asked for a proper but plain image preloader

参见提供的答案;您可以使用此代码正确处理预加载。

希望有所帮助！

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

1 个答案: