Question

So I’m writing a game, and I’ve got a module that returns the keys currently being pressed via jQuery. No problems there. The problem comes when I attempt to access the keys pressed:

var Keys = require('./lib/keys')

Player.prototype.update = function () {
    Keys(function (err, keydown) {
        console.log(keydown, keydown['w']);
        /* // To move a player up, for example:
          if (keydown['w']) {
            this.y += this.speed;
          }            
        */
    });
};

And the console shows that what keys are pressed, but attempting to access one gives me an undefined instead of true.

Object    undefined
s: true
w: true
x: true
__proto__: Object

Anyone have any thoughts?

Update: key module

var $ = require('./jquery')

var Keys = function (callback) {
  var keydown = {};

  function keyName(event) {
    return String.fromCharCode(event.which).toLowerCase();
  }

  $(document).bind('keydown', function (event) {
    keydown[keyName(event)] = true;
    return false;
  });

  $(document).bind('keyup', function (event) {
    return false;
  });

  callback(null, keydown);
}

module.exports = Keys;

/*************
* UPDATE *
*************/

This is the final fix:

./lib/keys.js
var $ = require(‘./jquery’)

var Keys = function () {
  this.keydown = {};

  var keyName = function (event) {
    return String.fromCharCode(event.which).toLowerCase();
  }

  var self = this;
  $(document).bind('keydown', function (event) {
    self.keydown[keyName(event)] = true;
    return false;
  });

  $(document).bind('keyup', function (event) {
    self.keydown[keyName(event)] = false;
    return false;
  });
};

Keys.prototype.getKeys = function (callback) {
  callback(null, this.keydown);
}

module.exports = new Keys;

./lib/player.js
var Keys = require(‘./keys’)

var Player = function (game, keys) {
  // stuff
}

Player.prototype.update = function() {
  var self = this;
  Keys.getKeys(function(err, keys) {
    if (keys['w']) {
      self.y -= self.speed;
    }
    if (keys['a']) {
      self.x -= self.speed;
    }
    if (keys['s']) {
      self.y += self.speed;
    }
    if (keys['d']) {
      self.x += self.speed;
    }
  });

Answer 1

That happens because of Keys has asynchronous processes in it.

It’s just a known chrome issue that shows the object value by reference. So you see the object value a moment after you call console.log

To see it more clear open chrome webdev tools and put debugger; instead of console.log and see what’s actually in keydown object. And I bet it will be just an empty object.

And I’ll just leave it here: http://felix-kling.de/blog/2011/08/18/inspecting-variables-in-javascript-consoles/