CODEWITHSUNDEEP
javascriptbit-manipulationbitwise-operators
Greg
Greg

Reputation: 21909

JavaScript Bitwise operations

I would like to store all currently-pressed keycodes in a single variable by using bitwise operations when the key is pressed and when the key is released.

I'm not sure how to properly use bitwise operations, but I know this will be very simple to someone who does.

Once complete, it should be simple to see which key is currently depressed by asking "is this key's code in the variable?"

Thanks in advance!

Upvotes: 1

Views: 2383

Answers (4)

jusopi
jusopi

Reputation: 6813

I'm not sure if there is such a thing as a ByteArray in JavaScript but if so, you could do it much like how this fellow did his logic in ActionScript3. While I am a big fan of bitflags & bitwise operations, I don't get the bitshifting he's doing and much of his code is way over my head. I just know it works on as3 projects I've worked on.

Also if you'd like to learn more about bitflags & bitwise operations (aside from the bitshifting) check out this article - http://jwopitz.wordpress.com/2012/02/13/using-bitflags-and-bitwise-math/

Source - https://github.com/richardlord/Asteroids/blob/master/src/no-dependencies/net/richardlord/input/KeyPoll.as

     //init the bytearray
     _states = new ByteArray();
     _states.writeUnsignedInt( 0 );
     _states.writeUnsignedInt( 0 );
     _states.writeUnsignedInt( 0 );
     _states.writeUnsignedInt( 0 );
     _states.writeUnsignedInt( 0 );
     _states.writeUnsignedInt( 0 );
     _states.writeUnsignedInt( 0 );
     _states.writeUnsignedInt( 0 );

    //on a keydown listener (note the bitwise OR for adding
    _states[ event.keyCode >>> 3 ] |= 1 << ( event.keyCode & 7 );

    //on a keyup listener (note the bitwise AND plus bitwise NOT
    states[ ev.keyCode >>> 3 ] &= ~(1 << (ev.keyCode & 7));

    //check for keydown
    return ( states[ keyCode >>> 3 ] & (1 << (keyCode & 7)) ) != 0;

    //check for keyup
    return ( states[ keyCode >>> 3 ] & (1 << (keyCode & 7)) ) == 0;

Upvotes: 0

Randy the Dev
Randy the Dev

Reputation: 26740

This is technically impossible to do in a single variable, no datatype in javascript can store the 256 bits required to hold the bitmask (which supports bitwise operations), you will need to use an array instead.

Also, unless you have text to speech software which you've macroed to magically execute js functions for you, asking your computer: "is this key's code in the variable?" won't do squat.

The way you would do it would be to initialize an array with 256 indexes, and then when a key is pressed, you find the relevant index and set it to true and when a key is released, you set it to false

It's the only way to do it. There actually isn't any other.

Upvotes: 5

Felix Kling
Felix Kling

Reputation: 817198

I don't think that it is possible the way you want to do it. Have a look at the available keycodes. There you see, that e.g. backspace is 8 and tab is 9.

In binary, that would be 1000 and 1001. Using binary operators, you would use OR | to "combine" the values, which would result in 1001.

You would check if a value is set via AND &, e.g. 1001 & 1000 to see, if the backspace key was pressed. Unfortunately, this would also evaluate to true if only the tab key was pressed (as its value is 1001).

That said, you can only use such bitwise comparison techniques, if the different values you want to test are powers of 2 only, i.e. 1, 2, 4, 8, 16, 32 and so on, as this represents in binary 1, 10, 100, 1000,...

For example if we can have a status variable and possible statuses would be OPEN = 2, LIGHT ON = 4 and ALARM ON = 8.
Assume that it is OPEN and LIGHT ON, i.e.

  0010
| 0100
------- 
  0110

Here we can easily check whether the ALARM is on, be using AND: 0110 & 1000 = 0. But if we would encode ALARM ON with 6 = 0110, we could not check this.

What you could do is, to map the key codes to a some power of 2 value and apply binary operations there. The Wikipedia article about bitmasks might be worth reading.

I hope my explanation was somehow clear.

Upvotes: 3

lincolnk
lincolnk

Reputation: 11238

javascript bit operations are generally reliable for the first 31 bits, and things go downhill from there. So, you can 31 different keys which you have given a value to act as a flag. for instance, if you wanted to track the four arrows and A and B, you would do something like this.

var KEYS = { 
    LEFT:  1 << 0,
    UP:    1 << 1,
    RIGHT: 1 << 2,
    DOWN:  1 << 3,
    A:     1 << 4,
    B:     1 << 5
}

var flags = 0;

myElement.addEventListener ('keydown', function (e) { 

    switch (e.keyCode) {

        case 37: // left
        flags = flags | KEYS.LEFT;
        break;
        case 38: // up
        flags = flags | KEYS.UP;
        break;

        ... etc ...

    }

}

} , false);

function checkKeys () {

    if ( (flags & KEYS.LEFT) === KEYS.LEFT)
        alert('LEFT key pressed');
    }

    if ( (flags & KEYS.UP) === KEYS.UP )
        alert('UP key pressed');
    }

    ... etc ...

}

Upvotes: 0

Related Questions