How to handle multi key press for game purposes in jquery/javascript?

Question

I'm trying to do a multi-key press combination validation for a "little game" test im doing. Basically is a character from Mortal Kombat which I move with ASDW keys... but what happens if I want to duck and block at the same time (would be S + K) for example. And I couldn't make it work :S

Now... not only that, if I'm pressing only S, which will duck. Then I press K (while keeping S pushed) it should block while ducking. If I release the K, it should keep ducking. Is this one possible as well?

How to handle for example combinations for doing skills in javascript? Like if I press S->D->Punch would do a skill (not pressed at the same time but a sequence)

Is there any possible way of doing all this?

This is my entire code inside a simple HTML so you can see it entirely:

P.S: Look at the comment in the preload image part, i mean, the animations are choppy while trying to move the character from one way to another... why is that? what am i doing wrong?

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

Thanks.

Sounds possible to me, some keyboards will limit the amount of simultaneous buttons pressed, but two shouldn't be a problem on most modern keyboards, but without any code, how should we know what the problem is ? — adeneo, Dec 15 '13 at 17:01
Please show us how you capture the keypress. Include your JS code. — SquareCat, Dec 15 '13 at 17:03
@SquareCat posted all my code, see also the image preloading which isn't working, should i use those img.src in my code? :( but how? — user3078876, Dec 15 '13 at 17:05

score 1 · Answer 1 · edited May 23 '17 at 12:19

1

You don't necessarily need to rely on jQuery for capturing the keys.

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

As you can see, detecting multiple keypresses and releases at the same time is not a problem, technically speaking.

I think the only browser culprit here (for plain JS) is e.keyCode. If you want to use jQuery you can rewrite the listener definitions so that they use jQuery.

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

See the answer supplied; you can use this code to handle the preloading properly.

Hope that helps!

edited May 23 '17 at 12:19

Community

1
1

answered Dec 15 '13 at 17:12

SquareCat

5,699
9
41
75

let me take a look :) what if I want to make a button sequence? would i need to use a setTimeout function or anything? like "if you pressed A,D,F,G in less than 1 second and in that order, i would throw a skill? would be that approach? – user3078876 Dec 15 '13 at 17:21
hey Square, it works but the animation of the gif gets choppy, why is that? :( going to try it out with the preloader you gave me – user3078876 Dec 15 '13 at 17:30
Nope :( tried using it with the preloader and still animation is choppy, updated code so you can see how it looks – user3078876 Dec 15 '13 at 17:40
Remeber those are animated gifs, is it possible that, is choppy because im not letting the animated gif to animate?? whenever I "keydown"? – user3078876 Dec 15 '13 at 19:03
I think that might be possible, not specifically because of the key events but maybe the load on the browser is too high. Could you test your script on some other system, preferably with the same AND another browser, so that you can collect some data? – SquareCat Dec 15 '13 at 19:20
Don't know why i couldn't make the background images work, but here it is http://jsfiddle.net/S8dj5/1 look what happens also if you press S+K (to block while ducking) and then release K, it does like a little jump passing the floor. – user3078876 Dec 15 '13 at 19:35

How to handle multi key press for game purposes in jquery/javascript?

1 Answers1