Prevent page scroll for HTML5 games

11 years ago

There is quite a common and irritating problem when playing HTML5/Javascript games on Gamejolt. If you control a character with the arrow keys or use the SPACE key, the game page will scroll up or down as soon as you use any of those keys. There are some game engines that already prevent this issue, but in most of the cases this is still a problem that should not be overlooked, because it can make your game unplayable. :(

I faced the same issues while working on Strider. Strider is a javascript game and to fix that I’ve used the following routines:

(function ItsATrap() {

		
			window.addEventListener('keydown', function(e){

    switch(e.keyCode){

    case 32: 

    case 37: 

    case 38: 

    case 39: 

    case 40:

        e.preventDefault(); 

        break;

    default: 

        break;

    }

}, false);

}());

This should prevent the arrow keys and space bar key press events to be transmitted to your page when a KeyboardEvent occurs.