3
\$\begingroup\$

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.

\$\endgroup\$
2
\$\begingroup\$

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.

| improve this answer | |
\$\endgroup\$
2
\$\begingroup\$

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

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.