Click here to Skip to main content
Click here to Skip to main content

Tagged as

Beginning HTML5 Game Programming – Binding Input

, 27 Feb 2012
Rate this:
Please Sign up or sign in to vote.
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.

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! ^^

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Stephen Dycus
Team Leader DejaMi Inc.
United States United States
No Biography provided

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140821.2 | Last Updated 27 Feb 2012
Article Copyright 2012 by Stephen Dycus
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid