开发者

A better way of writing (javascript)

开发者 https://www.devze.com 2023-03-02 05:35 出处:网络
Probably a lack of understanding of javascript here: engine.keyboard = {};// keyboard object engine.keyboard.key = {

Probably a lack of understanding of javascript here:

engine.keyboard = {};   // keyboard object

engine.keyboard.key = {
_pressed: {},

UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39,

isDown: function(keyCode)
{
    return this._pressed[keyCode];
},

onKeyDown: function(event)
{
    this._pressed[event.keyCode] = true;
},

onKeyUp: function(event)
{
    delete this._pressed[event.keyCode];
}

}

engine.keyboard.addListeners = function()
{
window.addEventListener('keydown', engine.keyboard.key.onKeyDown, false);
window.addEventListener('keyup', engine.keyboard.key.onKeyUp, false);
}

When I call, engine.keyboard.key.isDown(38), I get an error that this.开发者_开发问答_pressed is undefined.

Perhaps there is a better way of defining all these? I'm working on a very basic game but just experimenting with different ways of splitting it all up. So at the moment, I have engine, engine.keyboard, engine.camera and engine.map which all do there own tiny bits. I've used the same engine.EXAMPLE = {} at the start of each one. Perhaps this is inefficient?

Cheers.


The problem is that you are only passing the function as event handler. By doing so it has no relation to the engine.keyboard.key object anymore.

What this inside a function refers to depends on how it is called. In order for this to refer to engine.keyboard.key, the function has to be called like

engine.keyboard.key.onKeyDown()

So what you need is:

window.addEventListener('keydown', function(event) {
    engine.keyboard.key.onKeyDown(event);
}, false);

window.addEventListener('keyup', function(event) {
    engine.keyboard.key.onKeyUp(event);
}, false);

Also note that addEventListener is not available in up to IE8. There you have to use attachEvent.

I suggest to read the excellent articles about event handling on qurirksmode.org.


Further suggestion:

To decouple the function from the object in a way, you can create a closure:

engine.keyboard = {};  
engine.keyboard.key = (function() {
    var _pressed = {};

    var key = {
        UP: 38,
        DOWN: 40,
        LEFT: 37,
        RIGHT: 39,

        isDown: function(keyCode)  {
            return _pressed[keyCode];
        },

        onKeyDown: function(event) {
            _pressed[event.keyCode] = true;
        },

        onKeyUp: function(event) {
            delete _pressed[event.keyCode];
        }
    }
    return key;
}());

Here there is no problem to pass engine.keyboard.key.onKeyDown as the functions don't rely on this anymore. _pressed is now a variable in scope the functions are defined in, so they have all access to it.

This is just to show what can be done.


That's a standard key handler. I do not believe there is a better way to do things.

0

精彩评论

暂无评论...
验证码 换一张
取 消