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

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

• javascript

• How Keys function is defined? – zerkms Commented Sep 6, 2012 at 21:22
• 1 You will find many related issues here on SO. I always wrote a short explanation of this problem some time ago. – Felix Kling Commented Sep 6, 2012 at 21:29
• @Felix Kling: now I know where to point people - because I've answered such questions here probably at least 5 times. – zerkms Commented Sep 6, 2012 at 21:31
• @zerkms: Thanks, though I have to admit, it's not a very good explanation (I might improve it). I've seen quite a few questions about this, but it seems to be a bit tricky to find them... – Felix Kling Commented Sep 6, 2012 at 23:35

3 Answers 3

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/

That will teach me to scan code too fast. The ments are right and this code isn't pointing to the current problem.

The variable this gets reset every time you enter a new function.

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

I don't see any jQuery here. You need to supply more code, such as Keys source code. But I guess that you need to use http://api.jquery./event.which/ , for example, keydown.which === 'w'