1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>004.Maze-Runner</title>
8 <link rel="stylesheet" href="./style.css">
9 <link rel="stylesheet" href="../assets/common.css">
10 <link rel="shortcut icon" href="../assets/favicon.png" type="image/png">
11 <script src="../assets/common.js"></script>
12</head>
13
14<body>
15 <!-- Modal Section -->
16 <input class="modal-state" id="modal" type="checkbox" />
17 <div class="modal">
18 <label class="modal__bg" for="modal"></label>
19 <div class="modal__inner" style="width: 30%;">
20 <label class="modal__close" for="modal"></label>
21 <h2>004.Maze-Runner</h2>
22 <p class="modal__p">
23 <ul>
24 <li>A simple maze game which uses the concept of
25 <span style="color:var(--lightGold)">
26 backtracking (DFS)
27 </span>
28 to generate the maze.
29 </li>
30 <li>
31 Initially the starting cell is marked as visited.
32 </li>
33 <li>
34 If the current cell has any neighbours which have not been visited, then randomly selected neighbour
35 is
36 marked as visited and made as the current cell.
37 </li>
38 <li>
39 If the current cell has no unvisited neighbours,then the current cell is backtracked to the previous
40 cell.
41 </li>
42 <li>
43 The process continues until all cells have been visited.
44 Refer to
45 <a href="https://en.wikipedia.org/wiki/Maze_generation_algorithm#Randomized_depth-first_search:~:text=branch%20before%20backtracking.-,Recursive%20implementation,-%5Bedit%5D"
46 target="_blank" style="color:var(--lightGold)">
47 Maze Generation Algorithm
48 </a>
49 </li>
50 <li>
51 Who knows the maze better,in maze runner?<br/>Close this box and try typing his name.
52 </li>
53 </ul>
54 </p>
55 </div>
56 </div>
57
58 <!-- Main Content -->
59 <h1>Maze Runner</h1>
60 <p id="tooltip"></p>
61 <div id="maze"></div>
62 <div class="controls">
63 <button id="a" class="left">⬅</button>
64 <button id="d" class="right">⬅</button>
65 <button id="w" class="top">⬆</button>
66 <button id="s" class="bottom">⬇</button>
67 </div>
68
69 <!-- Footer -->
70 <div class="footer">
71 <label for="modal">(i)</label>
72 <a class="arrow" href="../"></a>
73 </div>
74</body>
75<script src="./script.js"></script>
76
77</html>