Robert Garrett
a5a6f32037
Page visitors may be surprised by the sounds and not know how to turn them off. The answer is "you don't", but practically the browser tab can be muted instead.
154 lines
4.2 KiB
HTML
154 lines
4.2 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;
|
|
}
|
|
#prestart-controls,
|
|
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%);
|
|
}
|
|
#prestart-controls {
|
|
width: 800px;
|
|
height: 600px;
|
|
text-align: center;
|
|
align-content: center;
|
|
}
|
|
button {
|
|
font-size: 20px;
|
|
text-shadow: 0.2em 0.2em 0px rgba(0, 0, 0, 75%);
|
|
padding: 1em;
|
|
border-radius: 2em;
|
|
border-style: solid;
|
|
border-color: black;
|
|
color: rgb(90%, 90%, 90%);
|
|
background-color: rgb(15%, 15%, 15%);
|
|
}
|
|
button:hover {
|
|
background-color: rgb(25%, 25%, 25%);
|
|
border-color: rgb(90%, 90%, 90%);
|
|
}
|
|
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> -->
|
|
<div id="prestart-controls">
|
|
<button id="gameload-button">Load Game</button>
|
|
</div>
|
|
<main>
|
|
<article>
|
|
<h2>Description</h2>
|
|
<p>
|
|
A (work in progress) version of the Asteroids arcade game.
|
|
</p>
|
|
<p>
|
|
<em>Sound Warning!</em> The game now has sound effects, but there are no controls on the page for changing the
|
|
volume (including to mute them). You can mute the browser tab by pressing <code>ctrl</code> + <code>m</code>.
|
|
Proper volume controls are coming soon.
|
|
</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.6.0-dev3</code></td>
|
|
</tr>
|
|
</table>
|
|
</article>
|
|
</main>
|
|
<script type="module">
|
|
import init from './asteroids.js'
|
|
|
|
let button = document.getElementById("gameload-button");
|
|
button.onclick = async function loadGame() {
|
|
console.log("Game Load button was pressed!");
|
|
let canvas = document.createElement("canvas");
|
|
// <canvas id="game-canvas" width="800" height="600"></canvas>
|
|
canvas.setAttribute("id", "game-canvas");
|
|
canvas.setAttribute("width", "800");
|
|
canvas.setAttribute("height", "600");
|
|
button.parentElement.replaceWith(canvas);
|
|
|
|
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>
|