We already had a build from Emscripten, but the formatting was incompatible with itch.io. This build was made for a single web page and not to be embedded on Itch.io. Therefore, we strived to simplify the HTML and customize the CSS classes to our liking.

There were problems with the way Emscripten controls the canvas. Apart from the usual fullscreen bottom, there was a Resize canvas and  Lock/hide mouse pointer, for resizing and hiding the mouse in fullscreen, respectively. We've opted to rewrite these functionalities in a new .JavaScript, but we aim to integrate these better in the future.

After this step, we had a functional WebGL build on Itch.io, though no UI and functionalities for mobile devices had yet been included. The game would open, the sound would play, but there wasn't any interactivity.

To support mobile devices better, new UI  elements were created with HTML and CSS. Still, there wasn't any way to connect them with the game code.  For this purpose, this JavaScript Function was created to send the bottom's interaction to the game:

function simulateKey(keyCode, isDown) {
  const event = new KeyboardEvent(isDown ? 'keydown' : 'keyup', {
    keyCode: keyCode,
    which: keyCode,
    bubbles: true,
    cancelable: true
  });
  document.dispatchEvent(event);
}

This, combined with these HTML:

<button class="shoot" ontouchstart="simulateKey(32, true)" ontouchend="simulateKey(32, false)">space</button>

Allowed to interact with the game.

Despite this progress, a new problem emerged; now we were stuck with these inputs on the PC. To solve this issue, we added a function to hide the mobile control when no longer necessary:

// Detect if it's a touch device (Android or otherwise)
if ('ontouchstart' in window || navigator.maxTouchPoints > 0) {
  // Detect Android specifically
  const isAndroid = /Android/i.test(navigator.userAgent);
  if (isAndroid) {
    // If it's Android, display the touch controls
    document.getElementById('touch-controls').style.visibility = 'visible';
    document.getElementById('fullscreen-btn').style.visibility = 'hidden';
  }
}

With this final touch, we were able to hide the extra UI when the game was running on a PC browser and enable the UI in a mobile device browser.

We hope this devlog was insightful. We strive to improve this code in the future.