How do you capture keyboard and mouse input for an HTML5 game?

Question

Is there an accepted method for capturing player input in HTML5 games? I have seen several methods, and the browsers seem to be in varying states of implementation; On MDN they tell you not to use both the newer and older implementations. I'm open to methods utilizing various libraries, but I would also like to see a pure JavaScript and DOM version as well.

Answer 1

What "several methods" have you seen? AFAIK, there's one method, which involves listening for the appropriate DOM Level 2/3 events like keydown via the addEventListener function. There might be some inconsistencies with the way you retrieve key codes, which you can deal with by using var keyCode = event.keyCode || event.which. There are also some inconsistencies with mouse button numbers, only the higher ones though. That's about it.

The only reason why, i see, you could be confused is if you were looking at old IE APIs. You want HTML5, so that's IE9+ and those browsers conform to the standards i described above.

For the keyboard events, you can probably just listen to the document object, though this depends on how you serve your game. For mouse events, you can listen to the canvas object directly.

Answer 2

As @dreta said there's only one way and it's by using a keypress event handler just like this:

var keyInput = document.getElementById("keyInput");

function inputFunc(e) {
    If (e.keyCode == 82) {// 82 = R
        //Do Something
    };
};
keyInput.addEventListener("keypress", inputFunc);

You can also visit this website where you can check the keyCode char keyCode char