-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathmaze.html
130 lines (121 loc) · 4.71 KB
/
maze.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Maze</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/maze.js"></script>
<link type="text/css" rel="stylesheet" href="css/maze.css"></link>
</head>
<body onload="init()">
<!--已debug：注意一下，HTML标签不能直接用"符号等符号，转义字符是"e，或者用十进制"表示-->
<a id="topNav" href="#home" onclick="$("#topNav").fadeOut("slow")">2Top </a>
<!--欢迎界面-->
<!--已debug：一定要加spacer做每个div的边界，不然容易在margin上越界，导致所有排版出问题-->
<div id="home"> <div class="spacer"> </div>
<nav>
<ul id="nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#play">Play!</a></li>
</ul>
</nav>
<a href="#home" id="header">
<h1>Maze Game</h1>
</a>
<div id="creator">Made By Kony</div>
<p>Create a maze, and solve it by computer.</p>
<div class="spacer"> </div>
<a id="start-game" href="#game" onclick="gameStart()">Start Game</a>
<div class="spacer"> </div></div>
<!--游戏介绍-->
<div id="about"> <div class="spacer"> </div>
<h2>About</h2>
<p>Glad to meet u. I'm <em>computer maze solver v1.0</em></p>
<p>I create a randon maze, and solve it <strong>in different ways</strong></p>
<p>Here's a solutions I've made</p>
<img src="./src/example.png" alt="The example of a maze." />
<p>This page is designed to be totally user Interactive. Find easter eggs!</p>
<p>And maze solving is totally customized! </p>
<br/>
<p>I can use BFS(Best First Search), A*, WFS and DFS for maze solving</p>
<p>For better efficiency, I choose BFS by default</p>
<br/>
<p>I have four themes for use</p>
<p>You can change themes <strong>at any time</strong></p>
<p><em>--even if the maze is working!--</em></p>
<br/>
<p>The size of maze is limited to be 10 x 10 ~ 160 x 160</p>
<p>Default maze is 120 x 80</p>
<p><em>--Don't worry, I can handle all the invalid input!--</em></p>
<br/>
<p>And, There's more awaiting:</p>
<ul>
<li>More Customized color schemes, even designed by urself</li>
<li>More maze solving algorithms</li>
<li>Multiple mazes solving for comparision </li>
<li>And More...</li>
</ul>
<div class="spacer"> </div> </div>
<!--设置界面-->
<div id="settings"> <div class="spacer"> </div>
<h2 style="color: white;">Settings</h2>
<p>
Row <input id="inRow" type="text" class="textInput"/>
Col <input id="inCol" type="text" class="textInput"/>
<button id="cfm-btn" onclick="confirm()">
Confirm
</button>
<a href="#game">
<button id="str-btn" onclick="gameStart()">
Start Game
</button>
</a>
</p>
<p id="solverSelect">
<strong>Solver:</strong>    
BFS <input id="solver0" value=0 type="radio" name="solvers" onclick="solverChange()"/>  
A* <input id="solver1" value=1 type="radio" name="solvers" onclick="solverChange()"/>  
WFS <input id="solver2" value=2 type="radio" name="solvers" onclick="solverChange()"/>  
DFS <input id="solver3" value=3 type="radio" name="solvers" onclick="solverChange()"/>  
</p>
<p>
Show drawing animation
<input id="inAniMaze" type="checkbox" class="checkInput" onclick="checkChange()"/>
<br/>
Show solving animation
<input id="inAniSolv" type="checkbox" class="checkInput" onclick="checkChange()"/>
</p>
<p id="hint_settings" onclick="$(this).fadeOut("slow")"> </p>
<div class="spacer"> </div> </div>
<!--游戏界面-->
<div id="play"> <div class="spacer"> </div>
<a href="#game">
<h2 onclick="gameStart()">
have fun!
</h2>
</a>
<div id="game" class="spacer"></div>
<button id="rst-btn" onclick="gameRestart()">
Restart
</button>
<button id="skp-btn1" onclick="skip1()">
Skip Creating
</button>
<button id="skp-btn2" onclick="skip2()">
Skip Solving
</button>
<br/>
<p>
<strong>Theme:</strong>    
Sweet Dream <input id="color0" value=0 type="radio" name="colors" onclick="colorChange()"/>   
Ice Cream <input id="color1" value=1 type="radio" name="colors" onclick="colorChange()"/>   
Toxic Gream <input id="color2" value=2 type="radio" name="colors" onclick="colorChange()"/>   
Shadow Beam <input id="color3" value=3 type="radio" name="colors" onclick="colorChange()"/>   
</p>
<div id="maze"></div>
<p id="hint_play" onclick="$(this).fadeOut("slow")"> </p>
<div class="spacer" id="btm"> </div> </div>
</body>
</html>