Problem with HTML5 in iFrame and arrow keys

11 posts

Flag Post

Hello!
I’m testing a HTML5 game (made in Construct 2) wich I uploaded as an iFrame and everything is working fine but the key system. The player moves the character with right and left arrow keys and jump with the up arrow key. The problem is that when I press the up arrow to jump, not only the character jumps but the hole site scrolls ups too.

Is there any solution or will I have to change the input jump key in my game?

Thanks for the attention people!

 
Flag Post
//CSS
body {
   overflow:hidden;
}
 
Flag Post

Nope, that unfrotunatly does not work.

Anyone have any idea of how to resolve that?

 
Flag Post

Replace “body” with whatever your frame is. The goal is to remove the scroll bars.

 
Flag Post

Draco18s, it works perfetcly for the scrollers of the game screen, thanks a lot for that!
But does not work with the scrollers of the entire page in the browser.
Every time I press the up arrow the hero jumps and the entire page goes up, like I were heading up in the content of the hole site.

 
Flag Post

Try a different control scheme? (WASD)

 
Flag Post

Yep, I had to change the control scheme, unfortunatly.
The game is here: http://www.kongregate.com/games/gdacas/the-world-is-ending

 
Flag Post

Still, in some point, when I press the space bar, the game loses focus.

Anyone knows what could I do to set the focus at every tick to the game? Or some other solution?

Thanks in advance fellow developers!

 
Flag Post

I fixed it.
The thing is that I was listening for the “Key is down”. When I tried to listen to “Key is pressed” the focus stayed in the game.

 
Flag Post

What a nice game! It really refreshed me this morning 5/5.

 
Flag Post

use this code :

var keys = {};
window.addEventListener(“keydown”,
function(e){
keys[e.keyCode] = true;
switch(e.keyCode){
case 37: case 39: case 38: case 40: // Arrow keys
case 32: e.preventDefault(); break; // Space
default: break; // do not block other keys
}
},
false);
window.addEventListener(‘keyup’,
function(e){
keys[e.keyCode] = false;
},
false);

I used in my game :
http://www.kongregate.com/games/mindbreakgames/30level