Skip to content

Instantly share code, notes, and snippets.

@kaineer

kaineer/index.html

Last active April 27, 2026 08:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kaineer/29bffbc4601023f78e0cbde85fe751f9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kaineer/29bffbc4601023f78e0cbde85fe751f9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<html>
<head>
<title>SVG sample</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main></main>
<div class="arrows">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 64 64"
width="64"
height="64"
>
<defs>
<style>
.arrow-bg {
fill: #f0f0f0;
stroke: #ccc;
stroke-width: 1;
}
.arrow-bg:hover {
fill: #e0e0e0;
cursor: pointer;
}
.arrow {
fill: none;
stroke: #333;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
</style>
</defs>
<!-- Вверх -->
<g id="arrow-up">
<rect class="arrow-bg" x="21" y="2" width="22" height="20" rx="2" />
<polyline
class="arrow"
points="32,7 24,15 29,15 29,18 35,18 35,15 40,15"
/>
</g>
<!-- Вниз -->
<g id="arrow-down">
<rect class="arrow-bg" x="21" y="42" width="22" height="20" rx="2" />
<polyline
class="arrow"
points="32,57 40,49 35,49 35,46 29,46 29,49 24,49"
/>
</g>
<!-- Влево -->
<g id="arrow-left">
<rect class="arrow-bg" x="2" y="21" width="20" height="22" rx="2" />
<polyline
class="arrow"
points="7,32 15,24 15,29 18,29 18,35 15,35 15,40"
/>
</g>
<!-- Вправо -->
<g id="arrow-right">
<rect class="arrow-bg" x="42" y="21" width="20" height="22" rx="2" />
<polyline
class="arrow"
points="57,32 49,40 49,35 46,35 46,29 49,29 49,24"
/>
</g>
<!-- Центральный кружок (опционально, для эстетики) -->
<circle
cx="32"
cy="32"
r="8"
fill="#ddd"
stroke="#ccc"
stroke-width="1"
/>
</svg>
</div>
<script src="./labyrinth.js"></script>
<script src="./script.js"></script>
</body>
</html>
Raw
labyrinth.js
const labyrinth = [
"0:0",
"0:1",
"0:2",
"0:3",
"0:4",
"0:5",
"0:6",
"0:7",
"0:8",
"0:9",
"0:10",
"1:10",
"2:10",
"3:10",
"4:10",
"5:10",
"6:10",
"7:10",
"8:10",
"9:10",
"10:10",
"10:0",
"10:1",
"10:2",
"10:3",
"10:4",
"10:5",
"10:6",
"10:7",
"10:8",
"10:9",
"1:0",
"2:0",
"3:0",
"4:0",
"5:0",
"6:0",
"7:0",
"8:0",
"9:0",
"2:2",
"3:2",
"4:2",
"5:2",
"6:2",
"7:2",
"8:2",
"8:3",
"8:4",
"8:5",
"1:4",
"3:4",
"4:4",
"5:4",
"6:4",
"6:5",
"6:6",
"7:6",
"8:6",
"9:6",
"2:6",
"3:6",
"4:6",
"4:7",
"5:7",
"6:7",
"2:8",
"3:8",
"4:8",
"6:9",
"8:8",
"8:9",
];
Raw
script.js
// util functions
const list = (arrLike) => Array.from(arrLike);
const first = (selector) => document.querySelector(selector);
const all = (selector) => list(document.querySelectorAll(selector));
const child = (el, index = 0) => list(el.children)[index];
const text = (el, value = null) => {
if (value === null) {
return el && el.textContent;
}
el.textContent = value;
};
const html = (el, value = null) => {
if (value === null) {
return el && el.innerHTML;
}
el.innerHTML = value;
};
const on = (el, eventType) => (fn) => el.addEventListener(eventType, fn);
const classes = (el, classObject = null) => {
const list = el.classList;
if (classObject === null) {
return {
has: (className) => list.contains(className),
add: (className) => list.add(className),
rm: (className) => list.remove(className),
toggle: (className, flag) => (list.toggle(className, flag), list),
};
}
Object.keys(classObject).forEach((key) => {
list.toggle(key, classObject[key]);
});
};
const playerPos = {
x: 1,
y: 1,
};
Raw
style.css
:root {
--item-size: 20px;
--item-gap: 6px;
}
body {
text-align: center;
}
.item {
outline: solid 1px #999;
width: var(--item-size);
height: var(--item-size);
border-radius: 8px;
&.filled {
background-color: #333;
}
&.player {
background-color: #ff0;
}
}
main {
display: inline-flex;
flex-direction: column;
gap: var(--item-gap);
margin: 0 auto;
}
.row {
display: flex;
flex-direction: row;
gap: var(--item-gap);
}
.arrows {
margin-top: 64px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment