I am creating a top-down RPG type game, with movement mapped to the WASD keys via the usual method:
>wasd = this.input.keyboard.addKeys('W,A,S,D');
The trouble I’m finding is that these keys remain captured by the game no matter where the user is on the page. The WASD keys are totally unusable on the rest of the page, to the point where you can’t even write with them in a text field.
I’ve been experimenting with varying forms of disabling the keyboard capture, but everything seems to get stumped by the one big problem: How can I tell if the game element is currently in focus? It seems that the problem should be easily solvable if I can just pause all input while the game element is not currently clicked into.
Checking game.hasFocus seems to be the traditional answer, but after experimenting a little bit it seems that it only cares about the browser window as a whole, and will return true as long as the user is tabbed in. I was hoping to finagle my way around it by using document.activeElement, but it seems to do nothing but return the html body element while the canvas is in focus.
So, is there something I’m missing? After a little googling, I couldn’t find many other people in the same situation, so I’m not ruling out the possibility I’ve done something strange here. Is there a way to tell whether or not the game element has lost its focus on the page?