Как обрабатывать многократное нажатие клавиш для игровых целей в jquery / javascript?

0

Я пытаюсь сделать многократную проверку комбинации клавиш для теста "маленькой игры". В основном это персонаж из Mortal Kombat, который я перемещаю с помощью клавиш ASDW... но что произойдет, если я захочу укусить и заблокировать одновременно (например, S + K). И я не мог заставить это работать: S

Теперь... не только это, если я нажимаю только S, который будет утка. Затем я нажимаю K (сохраняя S нажатой), он должен блокироваться, когда он уклоняется. Если я выпущу K, он должен продолжать уклоняться. Возможно ли это также?

Как обрабатывать, например, комбинации для выполнения навыков в javascript? Например, если я нажимаю S-, то D-> Punch будет делать навык (не нажатый одновременно, а последовательность)

Есть ли какой-либо возможный способ сделать все это?

Это весь мой код внутри простого HTML, чтобы вы могли его полностью увидеть:

PS: Посмотрите на комментарий в части изображения предварительной загрузки, я имею в виду, анимация изменчивая, пытаясь переместить персонажа из одного пути в другой... почему? Что я делаю не так?

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

Благодарю.

  • 0
    Может показаться возможным, некоторые клавиатуры ограничивают количество одновременных нажатий кнопок, но две не должны быть проблемой на большинстве современных клавиатур, но без какого-либо кода, как мы должны знать, в чем проблема?
  • 0
    Пожалуйста, покажите нам, как вы захватили нажатие клавиши. Включите ваш код JS.
Показать ещё 1 комментарий
Теги:

1 ответ

1

Вам не обязательно полагаться на jQuery для захвата ключей.

Вот простое решение для JavaScript

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.

В этом вопросе я попросил правильный, но простой предварительный загрузчик изображений.

См. Предоставленный ответ; вы можете использовать этот код для правильной обработки предварительной загрузки.

Надеюсь, это поможет!

Поделиться
  • 0
    позвольте мне посмотреть :) что делать, если я хочу сделать последовательность кнопок? мне нужно использовать функцию setTimeout или что-нибудь? типа «если бы вы нажали A, D, F, G менее чем за 1 секунду и в таком порядке, я бы бросил навык?» - такой подход?
  • 0
    Эй, площадь, это работает, но анимация GIF становится прерывистой, почему это так? :( собираюсь попробовать это с прелоадером, который вы мне дали
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню