html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Maze</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="menu-button" onclick="toggleMenu()">⦁⦁⦁</div>
<div id="theme-menu">
<button onclick="showSetup()" class="menu">Back to Main</button>
<button onclick="setTheme('dark')" class="menu">Dark Theme</button>
<button onclick="setTheme('light')" class="menu">Light Theme</button>
<button onclick="setTheme('matrix')" class="menu">Matrix Theme</button>
</div>
<div id="setup">
<h1 id="title">Maze</h1>
<label>Width (squares): <input id="widthSlider" type="range" min="5" max="50" value="20"></label>
<span id="widthValue">20</span>
<label>Height (squares): <input id="heightSlider" type="range" min="5" max="50" value="20"></label>
<span id="heightValue">20</span>
<label>Animation:
<select id="animate">
<option value="true">Animated</option>
<option value="false">Instant</option>
</select>
</label>
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@import url('https://fonts.googleapis.com/css2?family=Rubik+Maze&display=swap');
:root {
--bg-color: #1e1e2f;
--text-color: #fff;
--maze-bg: #111133;
--player-color: #0f0;
--wall-color: #aaa;
--exit-color: red;
}
* {
font-family: 'Rubik Maze', sans-serif;
color: white;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
background-color: var(--bg-color);
color: var(--text-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
js
js
1
BROWSER
Console
Run