Robert Garrett
6d5afc2445
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.
118 lines
3.0 KiB
HTML
118 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<style>
|
|
body {
|
|
background-color: hsl(200, 3%, 65%);
|
|
}
|
|
h1 {
|
|
color: hsl(200, 3%, 90%);
|
|
background-color: hsl(195, 5%, 17%);
|
|
text-align: center;
|
|
margin: auto;
|
|
padding: 0.5em;
|
|
}
|
|
canvas {
|
|
margin-top: 1em;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: block;
|
|
outline-color: hsl(200, 7%, 50%);
|
|
outline-style: outset;
|
|
border-radius: 8px;
|
|
background-color: rgb(40%, 40%, 40%);
|
|
}
|
|
main {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 70%;
|
|
}
|
|
table {
|
|
margin-bottom: 10px;
|
|
border-collapse: collapse;
|
|
}
|
|
th, td {
|
|
border: 1px solid;
|
|
padding: 0.1em 0.3em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body style="margin: 0px;">
|
|
<h1>
|
|
Robert's Bad Asteroids Game
|
|
</h1>
|
|
<canvas id="game-canvas" width="800" height="600"></canvas>
|
|
<main>
|
|
<button id="gameload-button">Load Game</button>
|
|
<article>
|
|
<h2>Description</h2>
|
|
<p>
|
|
A (work in progress) version of the Asteroids arcade game.
|
|
</p>
|
|
</article>
|
|
<article>
|
|
<h3>Controls</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Input</th>
|
|
<th scope="col">Effect</th>
|
|
</tr>
|
|
</thead>
|
|
<tr>
|
|
<td>W</td>
|
|
<td>Fire thruster</td>
|
|
</tr>
|
|
<tr>
|
|
<td>A</td>
|
|
<td>Rotate Left</td>
|
|
</tr>
|
|
<tr>
|
|
<td>D</td>
|
|
<td>Rotate Right</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spacebar</td>
|
|
<td>Shoot gun</td>
|
|
</tr>
|
|
</table>
|
|
</article>
|
|
<article>
|
|
<h3>Misc</h3>
|
|
<table>
|
|
<tr>
|
|
<td>Source code</td>
|
|
<td><a href=https://github.com/DerVerrater/another-asteroids>https://github.com/DerVerrater/another-asteroids</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>License</td>
|
|
<td><a href="https://www.gnu.org/licenses/agpl-3.0.txt">AGPL-3.0-only</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Program Version</td>
|
|
<!-- This version text is completely unchecked. I'll need to do something about that. -->
|
|
<td><code>v0.5.0</code></td>
|
|
</tr>
|
|
</table>
|
|
</article>
|
|
</main>
|
|
<script type="module">
|
|
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 wasm_stream = compressed.body.pipeThrough(new DecompressionStream("gzip"))
|
|
let blob = await new Response(wasm_stream).blob();
|
|
|
|
init(await blob.arrayBuffer()).catch((error) => {
|
|
if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
|
|
throw error;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|