Robert Garrett
4d899d3c97
Some checks failed
Basic checks / Basic build-and-test supertask (push) Failing after 1m3s
The canvas element no longer exists in the page source. Instead, there is a div styled to look similar and contain a button. The button is styled to match the ones in the Bevy app. When pressed, the button creates the canvas element, replaces the fake canvas div, and loads the WASM to do it's thing.
149 lines
3.9 KiB
HTML
149 lines
3.9 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>
|
|
</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>
|