How to stop page scrolling when playing game

[suyashmohan]

I recently made a game with phaser and noticed that when I press down key the page goes down. Similarly the same happens with up key. Even space key makes the page scroll down. The game gets the keys and works the way it should work but the page also scrolls. This totally ruins the fun.

How to handle this situation???

[jpdev]

Hi,

 

There is an app function for this:

 

 /**

    * By default when a key is pressed Phaser will not stop the event from propagating up to the browser.

    * There are some keys this can be annoying for, like the arrow keys or space bar, which make the browser window scroll.

    * You can use addKeyCapture to consume the keyboard event for specific keys so it doesn't bubble up to the the browser.

    * Pass in either a single keycode or an array/hash of keycodes.

    * @method Phaser.Keyboard#addKeyCapture

    * @param {Any} keycode

    */

    addKeyCapture: function (keycode)

 

Usage: this.game.input.keyboard.addKeyCapture(Phaser.Keyboard.SPACEBAR);

 

Be aware, that If you use "addKey" the addKeyCapture is called automatically for you.

 

this.rotateLeftKey = this.game.input.keyboard.addKey(Phaser.Keyboard.N);

 

In my case I wanted the user to be able to still press 'n' and have it propagate to the dom-elements of the website that contains the game.

 

For that case, there is the reverse function this.game.input.keyboard.removeKeyCapture(keycode)

[george]

This problem is totally unrelated to phaser. You only have to stop the the default action from being executed. This is done with event.preventDefault().

You have to add an event listener to the window object. Listen for the keydown event. Check if the key code is one of  the codes for top, down, left, right or spacebar. If so stop the default action with event.preventDefault(). If you want real code to copy & paste in your project use google. Have fun!