Click here to Skip to main content
12,502,836 members (54,478 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

5.8K views
4 bookmarked
Posted

Beginning HTML5 Game Programming – Binding Input

, 27 Feb 2012 CPOL
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

Backspace8
Tab9
Enter13
Shift16
Ctrl17
Alt18
Caps Lock20
Escape27
Page Up33
Space32
Page Down34
End35
Home36
Arrow Left37
Arrow Up38
Arrow Right39
Arrow Down40
Print Screen44
Insert45
Delete46
048
149
250
351
452
553
654
755
856
957
a65
b66
c67
d68
e69
f70
g71
h72
i73
j74
k75
l76
m77
n78
o79
p80
q81
r82
s83
t84
u85
v86
w87
x88
y89
z90
Numpad 096
Numpad 197
Numpad 298
Numpad 399
Numpad 4100
Numpad 5101
Numpad 6102
Numpad 7103
Numpad 8104
Numpad 9105
Multiply106
Add107
Subtract109
Decimal110
Divide111
F1112
F2113
F3114
F4115
F5116
F6117
F7118
F8119
F9120
F10121
F11122
F12123
Semi-Colon186
Equal Sign187
Comma188
Dash189
Period190
Forward Slash191
Open Bracket219
Back Slash220
Close Braket221
Single Quote222

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

You may also be interested in...

Pro
Pro

Comments and Discussions

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