Skip to content

Instantly share code, notes, and snippets.

@quintuple-mallard

quintuple-mallard/maze.html

Last active August 31, 2025 07:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save quintuple-mallard/56679bb8af0bf98be66911f010bad099 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save quintuple-mallard/56679bb8af0bf98be66911f010bad099 to your computer and use it in GitHub Desktop.
Download ZIP
Maze Instructions
Raw
maze.html
<main>
<form id="instructions">
<div>Instructions</div>
<textarea></textarea>
<button type="submit">Run Code</button>
</form>
<div id="maze">
<div class="cell start"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell wall"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell wall"></div>
<div class="cell wall"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell wall"></div>
<div class="cell wall"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell space"></div>
<div class="cell target"></div>
<div id="blob">
<div class="eye left"></div>
<div class="eye right"></div>
</div>
</div>
<div id="won-screen">You won</div>
<div id="lost-screen">You lost</div>
</main>
Raw
script.js
const cellsPerRow = 7;
const blob = {
elem: document.querySelector("#blob"),
row: 0,
col: 0,
direction: "down",
};
function getCellAt(row, col) {
const idx = row * cellsPerRow + col + 1;
return document.querySelector(`.cell:nth-child(${idx})`);
}
function cellEnterable(row, col) {
if (row < 0 || col < 0) {
return false;
}
if (row >= cellsPerRow || col >= cellsPerRow) {
return false;
}
const cell = getCellAt(row, col);
return ["space", "start", "target"].some((cls) =>
cell.classList.contains(cls)
);
}
function move() {
return new Promise((resolve, reject) => {
if (blob.direction == "down") {
blob.row += 1;
} else if (blob.direction == "up") {
blob.row -= 1;
} else if (blob.direction == "right") {
blob.col += 1;
} else if (blob.direction == "left") {
blob.col -= 1;
}
if (!cellEnterable(blob.row, blob.col)) {
reject();
}
blob.elem.addEventListener("transitionend", resolve);
blob.elem.style.setProperty("--cell-row", blob.row);
blob.elem.style.setProperty("--cell-col", blob.col);
});
}
function turnLeft() {
return new Promise((resolve, reject) => {
if (blob.direction == "up") {
blob.direction = "left";
} else if (blob.direction == "down") {
blob.direction = "right";
} else if (blob.direction == "right") {
blob.direction = "up";
} else if (blob.direction == "left") {
blob.direction = "down";
}
const rotation =
parseInt(getComputedStyle(blob.elem).getPropertyValue("--rotation")) - 90;
blob.elem.addEventListener("transitionend", resolve);
blob.elem.style.setProperty("--rotation", `${rotation}deg`);
});
}
function turnRight() {
return new Promise((resolve, reject) => {
if (blob.direction == "up") {
blob.direction = "right";
} else if (blob.direction == "down") {
blob.direction = "left";
} else if (blob.direction == "right") {
blob.direction = "down";
} else if (blob.direction == "left") {
blob.direction = "up";
}
const rotation =
parseInt(getComputedStyle(blob.elem).getPropertyValue("--rotation")) + 90;
blob.elem.addEventListener("transitionend", resolve);
blob.elem.style.setProperty("--rotation", `${rotation}deg`);
});
}
function showWinScreen() {
document.querySelector("#won-screen").style.display = "grid";
}
function showLostScreen() {
document.querySelector("#lost-screen").style.display = "grid";
}
function checkForWin() {
if (getCellAt(blob.row, blob.col).classList.contains("target")) {
showWinScreen();
}
}
function crash() {
throw new Error("Invalid jikiscript");
}
function jikiToJS(jiki) {
jiki = jiki.trim().split("\n");
const cleaned = [];
for (const line of jiki) {
switch (line) {
case "move()":
cleaned.push(move);
break;
case "turn_left()":
cleaned.push(turnLeft);
break;
case "turn_right()":
cleaned.push(turnRight);
break;
default:
cleaned.push(crash);
}
}
return cleaned;
}
const instructions = document.querySelector("#instructions");
const jikiscript = document.querySelector("#instructions textarea");
instructions.addEventListener("submit", (e) => {
e.preventDefault();
const codeArray = jikiToJS(jikiscript.value);
codeArray
.reduce((acc, fn) => acc.then(fn), Promise.resolve())
.then(checkForWin)
.catch(showLostScreen);
});
Raw
style.css
:root {
--num-cols: 7;
--cell-size: calc(100% / var(--num-cols));
}
body {
background: black;
}
main {
padding: 2vmin;
display: flex;
gap:10%;
background:white;
height:80vmin;
width:80vmin;
margin: 10vmin auto;
}
#instructions {
display: flex;
flex-direction: column;
& > * + * {
margin-top: 5%;
}
;
div {
font-size: 20px;
font-weight: bold;
}
textarea {
height:35%;
border-radius:5px;
border: 1px solid #aaa;
font-size: 16px;
}
button {
background: purple;
color: white;
padding: 5%;
}
}
#maze {
height:50%;
width: 50%;
display:grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
position: relative;
}
.cell {
border:1px solid black;
&.start {
background: pink;
}
&.target {
background: lightgreen;
}
&.wall {
background: #666;
}
}
#blob {
--size: calc(var(--cell-size) / 5 * 3);
--spacing: calc(var(--cell-size) / 5 * 1);
--cell-row: 0;
--cell-col: 0;
--rotation: 0deg;
width: var(--size);
height: var(--size);
margin: var(--spacing);
top: calc(var(--cell-size) * var(--cell-row));
left: calc(var(--cell-size) * var(--cell-col));
rotate: var(--rotation);
position: absolute;
background:blue;
border-radius:100%;
transition: all 0.5s;
.eye {
content: "";
position:absolute;
width:30%;
height:30%;
background:black;
border-radius:100%;
bottom:-15%;
display:grid;
place-items:center;
&:before {
content: "";
border-radius:100%;
background:white;
width:25%;
height:25%;
}
&.left {
left:10%;
}
&.right {
right:10%;
}
}
}
#won-screen, #lost-screen {
position:absolute;
inset:0;
font-size: 20vmin;
display:grid;
place-items:center;
color:black;
font-weight:bold;
}
#lost-screen {
background:rgba(255,0,0, 0.5);
display:none;
}
#won-screen {
background:rgba(0,255,0, 0.5);
display:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment