Surface level rename walkers -> water (I need a better grid framework)
This commit is contained in:
parent
f20aee872e
commit
fb01e550bd
39
hidepage.js
39
hidepage.js
@ -1,39 +0,0 @@
|
|||||||
function hide_page() {
|
|
||||||
// to unhide the hidden element, we also need to un-ID it
|
|
||||||
// to make the CSS rule stop applying
|
|
||||||
// janky hack, but it makes it not have 1 frame of showing on load.
|
|
||||||
hidden.id = '';
|
|
||||||
hidden.style.display = '';
|
|
||||||
shown.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function unhide_page() {
|
|
||||||
shown.style.display = '';
|
|
||||||
hidden.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function hide_actually_everything() {
|
|
||||||
hidden.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
// get the elements we need to hide
|
|
||||||
var shown = document.getElementById("page-content");
|
|
||||||
var hidden = document.getElementById("page-content-hidden");
|
|
||||||
|
|
||||||
// assign functions to buttons
|
|
||||||
document
|
|
||||||
.getElementById("button-hide-page")
|
|
||||||
.addEventListener("click", hide_page);
|
|
||||||
document
|
|
||||||
.getElementById("button-unhide-page")
|
|
||||||
.addEventListener("click", unhide_page);
|
|
||||||
document
|
|
||||||
.getElementById("button-hide-everything")
|
|
||||||
.addEventListener("click", hide_actually_everything);
|
|
||||||
|
|
||||||
// check URL params and see if we should hideall
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
if (urlParams.has('hideall')) {
|
|
||||||
hide_page();
|
|
||||||
hide_actually_everything();
|
|
||||||
}
|
|
||||||
28
index.html
28
index.html
@ -2,39 +2,23 @@
|
|||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<title>walkers!</title>
|
<title>water?</title>
|
||||||
<link rel="stylesheet" href="walkers.css">
|
<link rel="stylesheet" href="water.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="page-content">
|
<div id="page-content">
|
||||||
<h1>a demo of my random walker javascript</h1>
|
<h1>water time</h1>
|
||||||
|
|
||||||
<p>code started out from <a href="https://jackmckew.dev/interactive-random-walkers-with-javascript.html" target="_blank">Jack McKew's blogpost</a>, but very few parts of that original is left</p>
|
move the mouse to gaming
|
||||||
|
|
||||||
<h2>walker controls</h2>
|
|
||||||
<ul>
|
|
||||||
<li><button id="button-create-walker">create one</button></li>
|
|
||||||
<li><button id="button-destroy-walker">kill one :(</button></li>
|
|
||||||
<li><button id="button-reset-walkers">kill them all D:</button></li>
|
|
||||||
</ul>
|
|
||||||
<h2>hide text</h2>
|
|
||||||
<p>click to hide all page contents: <button id="button-hide-page">hide</button></p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="page-content-hidden">
|
|
||||||
<button id="button-unhide-page">unhide</button>
|
|
||||||
<button id="button-hide-everything">hide more</button>
|
|
||||||
<p>if you click "hide more" it'll hide all this too, and you'll need to reload to get it back
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- this is the canvas that makes up the page background -->
|
<!-- this is the canvas that makes up the page background -->
|
||||||
<div id="canvas-container">
|
<div id="canvas-container">
|
||||||
<canvas id="walker-canvas"></canvas>
|
<canvas id="water-canvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
<script src="walkers.js" walkers></script>
|
<script src="water.js" water></script>
|
||||||
<script src="hidepage.js" hidepage></script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user