Beginning HTML5 Game Programming – Binding Input

Goals:

• Learn to bind an event to a function for input handling
• Learn about the different supported events for input

So, what’s the last essential component to making your creation a game? Input of course! Otherwise, you’re just watching a movie:

window.addEventListener('keydown', play.Input);

The syntax is pretty simple: (eventType, functionToCall). Input events are bound to functions; I should make a note that it must be an instantiated member function or stand-alone function. This means if you have a class called Game with a member function called input(), you can’t bind an event to that function until you make an instance of the class:

function Game(){
     this.Input = function(){
          //bla bla bla
     }
}

window.addEventListener('keydown',Game.Input); // WON'T WORK

var play = new Game();

window.addEventListener('keydown',play.Input); // WILL WORK

As for the function that is being called, make sure to accept an argument for the event:

this.Input= function (evt) {}

There are a multitude of events to handle in this manner which I’ll briefly explain.

Keyboard Events

• onkeydown – Triggered when a key is pressed
• onkeypress – Triggered when a key is pressed and then released
• onkeyup – Triggered when a key is released

When working with keyboard input, simply use the keyCode member to determine which key was pressed:

this.KeyCheck = function (evt) {
                var KeyID = evt.keyCode;
        switch (KeyID) {
            case 87: case 38:                  // W or Up Arrow
                // Move Up
                break;
            
            case 83: case 40:                  // S or Down Arrow
                // Move Down
                break;
        }
}

Useful Key Codes

Backspace	8
Tab	9
Enter	13
Shift	16
Ctrl	17
Alt	18
Caps Lock	20
Escape	27
Page Up	33
Space	32
Page Down	34
End	35
Home	36
Arrow Left	37
Arrow Up	38
Arrow Right	39
Arrow Down	40
Print Screen	44
Insert	45
Delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
Numpad 0	96
Numpad 1	97
Numpad 2	98
Numpad 3	99
Numpad 4	100
Numpad 5	101
Numpad 6	102
Numpad 7	103
Numpad 8	104
Numpad 9	105
Multiply	106
Add	107
Subtract	109
Decimal	110
Divide	111
F1	112
F2	113
F3	114
F4	115
F5	116
F6	117
F7	118
F8	119
F9	120
F10	121
F11	122
F12	123
Semi-Colon	186
Equal Sign	187
Comma	188
Dash	189
Period	190
Forward Slash	191
Open Bracket	219
Back Slash	220
Close Braket	221
Single Quote	222

Mouse Input

• onclick – Triggered on single click (press and release)
• ondblclick - Triggered on double click
• onmousedown - Triggered when the left mouse button is being pressed
• onmouseup - Triggered when the left mouse button is being released
• onmousemove - Triggered when the mouse moves
• onmouseout - Triggered when mouse moves out of the window
• onmouseover - Triggered when the mouse moves into the window
• onmousewheel - Triggered when mouse wheel scrolls

We have pretty much the same thing going on here. Use the clientX and clientY event members to determine the absolute position of the mouse.

That’s all for now. I’ll be expanding on this topic in the near future. Next will probably be putting it all together with a simple Pong clone before we explore more advanced topics. Stay tuned! ^^