Ten Essential Foundations of Javascript Game Development

Player Input

Games are interactive. Without input from a player, they would be stories.

Input via the keyboard and mouse is the most common method for games that run on desktop or laptop
computers, ← ↑ → ↓, W,A,S,D,<ENTER>,<SPACE>, mouse-look, etc.

Input via a touch screen is added for games that run on mobile devices.

Event Handlers

In order to get input from the player we need to attach event handlers to the browser DOM. This was
more complex back when we had to support older browsers, but modern browsers support the
standard addEventListener method:

Most games run standalone within a single web page, so we typically want to attach our keyboard
event handlers to the top-level document object in order to handle all keyboard events within
the page, independent of focus.

For mouse and touch events, it usually makes more sense to anchor those handlers to the HTML5
<canvas> element to make calculating relative coordinates simpler.

Most of the time, the keyboard event handlers should simply record the current state of the key,
pressed vs not pressed. It should still be the responsibility of the update() method in
the game loop to actually update the game world.

Since we only need to record the state (key pressed vs not pressed) we can use a common onkey
function for both keydown and keyup events and record the state in a player.input object:

Now our update() method can modify the game state based on player.input.

NOTE: I haven’t used it yet, but have recently discovered a small micro-library called keypress
that looks like a promising, lightweight library for dealing with more complex keyboard handling
scenarios (such as modifier-keys, combo-keys, etc) - check it out!

Touch Input

To detect a touch enabled device, you can use the Modernizr library, or you
can treat Modernizr more like a mentor and just learn from it:

var hasTouch = ('ontouchstart' in window);

The touch events follow a similar pattern to mouse events:

touchstart

touchmove

touchend

canvas.addEventListener('touchmove', ontouchmove, false);

Touch events include the targetTouches attribute which is a list of fingers touching the current
DOM element. For the simple case, you can assume a single finger touch:

An important note about the touch events and coordinates. Supposedly, they should provide 3
sets of coordinates: client, page and screen. It makes sense in a <canvas> game to respond to
the touch events on the <canvas> element and use the client coordinates to know where on the
canvas was touched.

This works great in iOS, but on some android devices the clientX and clientY coordinates are
incorrect, they actually contain the same values as the pageX and pageY coordinates.

Ugh! This means you can’t rely on clientX and clientY, so you have to use pageX/Y instead and
convert it to canvas relative coordinates yourself - be wary.

Mouse Input

I haven’t actually had the need for mouse input in any of my games so far, so I’m going to cheat
a little here…