Robert Garrett
099926d368
Some checks failed
Basic checks / Basic build-and-test supertask (push) Failing after 48s
I didn't check that it also *installs* all of it's components! That's what I get for not having a list of package contents... although I'd probably just end up missing something there 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.1</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>
|