Add a basic "load game" button

This will ensure the user has interacted with the page before the game
starts, thus allowing the sound to play correctly.

It doesn't re-load the game if the user quits. I'd like to figure out
how to do that.

The need to push the button isn't immediately obvious. It should be over
top (or in place of) the canvas to best convey that the user must start
the game.
This commit is contained in:
2025-12-19 11:46:18 -06:00
parent d34d0a31f2
commit 6d5afc2445

View File

@@ -41,8 +41,9 @@
<h1> <h1>
Robert's Bad Asteroids Game Robert's Bad Asteroids Game
</h1> </h1>
<canvas id="game-canvas" width="1280" height="720"></canvas> <canvas id="game-canvas" width="800" height="600"></canvas>
<main> <main>
<button id="gameload-button">Load Game</button>
<article> <article>
<h2>Description</h2> <h2>Description</h2>
<p> <p>
@@ -98,6 +99,8 @@
<script type="module"> <script type="module">
import init from './asteroids.js' import init from './asteroids.js'
document.getElementById("gameload-button").onclick = async function loadGame() {
console.log("Game Load button was pressed!");
let compressed = await fetch("./asteroids_bg.wasm.gz") let compressed = await fetch("./asteroids_bg.wasm.gz")
let wasm_stream = compressed.body.pipeThrough(new DecompressionStream("gzip")) let wasm_stream = compressed.body.pipeThrough(new DecompressionStream("gzip"))
let blob = await new Response(wasm_stream).blob(); let blob = await new Response(wasm_stream).blob();
@@ -107,6 +110,7 @@
throw error; throw error;
} }
}); });
}
</script> </script>
</body> </body>