Hi dudes,

Before anything, many thanks for the awesome website you built, looks promising! This is my first post here, in this forum. I'm here to report an issue I just found while testing my game inside Itch.io.

The issue is that Canvas (HTML Game) isn't focused since it's in an iFrame, making the player unable to move or use the keyboard to interact with the game. This is a critical issue since it makes (at least) my game unplayable. :/

Hacky-fix: The player have to right click the canvas, click "Inspect the element" and close the Inspector in order to enable keyboard events. Not really nice for production ^^

Additional Informations:

• Browser: Mozilla/5.0 (X11; Linux i686; rv:44.0) Gecko/20100101 Firefox/44.0
• OS: Fedora 23
• Game link: https://skyzohkey.itch.io/bombers
• Game framework: Panda.JS v2 (develop branch on GitHub)

Thanks in advance for the replies!

Well, this have been fixed on GitHub. Here's the snippet I used to make it working, if someone else ever have the issue:

// iframe-fix.js
var lastTarget, canvas, body;
window.onload = function() {
  body   = document.querySelector('body'),
  canvas = document.getElementById('canvas');
  var activateCanvas = function (event) {
    lastTarget = event.target;
    window.setFocus();
    console.log("Set focus on window");
  }
  var preventScroll = function (event) {
    var keyCodes = [ 32, 37, 38, 39, 40 ];
    if (lastTarget != canvas) {
      return false;
    }
    console.log('Key pressed: ' + event.keyCode);
    if (keyCodes.includes(event.keyCode)) {
      event.preventDefault();
    }
  }
  var handleMouseDown = function (event) {
    window.focus();
    event.preventDefault();
    event.stopPropagation();
    event.target.style.cursor = 'default';
  }
  body.addEventListener('keydown', preventScroll, false);
  body.addEventListener('click', activateCanvas, false);
  canvas.addEventListener('mousedown', handleMouseDown, false);
}

Simply include this script at the end of your other scripts call ;)