-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (165 loc) · 6.31 KB
/
index.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/style.css">
<title>Shortest path game</title>
</head>
<body>
<div id="site-wrapper">
<table>
<thead>
<tr>
<th>
<h2>Control</h2>
</th>
<th>
<h2>Data</h2>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="control">
<details open>
<summary>Bước 0. Luật trò chơi</summary>
<pre>
Cho một sân chơi kích thước n x n.
Hãy tìm đường đi từ điểm bắt đầu đến điểm kết thúc biết rằng
Các ô trắng là đường đi
Các ô đen là vật cản, không đi được
Tại một ô bất kỳ, chỉ có thể đi lên, xuông, trái, phải nếu không bị cản. Không được đi chéo
Cố gắng né tránh các ô trừ điểm và ưu tiên đi vào những ô cộng điểm
</pre>
</details>
<details open>
<summary>Bước 1. Khởi tạo playground</summary>
<input type="number" placeholder="Nhập kích thước" id="playgroundInitInput">
<button id="playgroundInitBtn">Khởi tạo</button>
</details>
<details open>
<summary>Bước 2. Điểm bắt đầu</summary>
<label for="xStartingPoint">Tọa độ x</label>
<input type="number" id="xStartingPoint"><br>
<label for="yStartingPoint">Tọa độ y</label>
<input type="number" id="yStartingPoint"><br>
<button id="startingPointInitBtn">Đặt điểm bắt đầu</button>
</details>
<details open>
<summary>Bước 3. Điểm kết thúc</summary>
<label for="xEndingPoint">Tọa độ x</label>
<input type="number" id="xEndingPoint"><br>
<label for="yEndingPoint">Tọa độ y</label>
<input type="number" id="yEndingPoint"><br>
<button id="endingPointInitBtn">Đặt điểm kết thúc</button>
</details>
<details open>
<summary>Bước 4. Thêm vật cản</summary>
<label for="xBarrierPoint">Tọa độ x</label>
<input type="number" id="xBarrierPoint"><br>
<label for="yBarrierPoint">Tọa độ y</label>
<input type="number" id="yBarrierPoint"><br>
<button id="addBarrierBtn">Thêm vật cản</button>
</details>
<details open>
<summary>Bước 5. Thêm ô tăng điểm</summary>
<label for="xIncreasePoint">Tọa độ x</label>
<input type="number" id="xIncreasePoint"><br>
<label for="yIncreasePoint">Tọa độ y</label>
<input type="number" id="yIncreasePoint"><br>
<button id="addIncreaseBtn">Thêm ô tăng điểm</button>
</details>
<details open>
<summary>Bước 6. Thêm ô trừ điểm</summary>
<label for="xDecreasePoint">Tọa độ x</label>
<input type="number" id="xDecreasePoint"><br>
<label for="yDecreasePoint">Tọa độ y</label>
<input type="number" id="yDecreasePoint"><br>
<button id="addDecreaseBtn">Thêm ô trừ điểm</button>
</details>
</div>
</td>
<td>
<div id="dataDisplay">
<div id="playgroundData">
<p id="playgroundDataP"></p>
<br>
</div>
<br>
<div id="startingPointData">
<p>Điểm bắt đầu</p>
<br>
</div>
<div id="endingPointData">
<br>
<p>Điểm kết thúc</p>
<br>
</div>
<div id="barrierData">
<br>
<p>Danh sách vật cản: </p>
<br>
</div>
<div id="increasePointData">
<br>
<p>Danh sách ô cộng điểm: </p>
<br>
</div>
<div id="decreasePointData">
<br>
<p>Danh sách ô trừ điểm: </p>
<br>
</div>
<div id="createGraphStatus"></div>
<div id="bfsOnGraphStatus">
<br>
<p>BFS - Những đỉnh đã duyệt</p>
<br>
</div>
<div id="dfsOnGraphStatus">
<br>
<p>DFS - Những đỉnh đã duyệt</p>
<br>
</div>
<div id="idsOnGraphStatus">
<br>
<p>IDS - Những đỉnh đã duyệt</p>
<br>
</div>
<div id="greedySearchOnGraphStatus">
<br>
<p>Greedy Search - Những đỉnh đã duyệt</p>
<br>
</div>
<div id="aStarSearchOnGraphStatus">
<br>
<p>A star - Những đỉnh đã duyệt</p>
<br>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<br>
<button id="createGraphBtn">Tạo graph</button>
<br>
<button id="dijkstraSearchBtn">Tìm bằng Dijkstra</button>
<br>
<button id="bfsOnGraphBtn">Tìm bằng BFS</button>
<br>
<button id="dfsOnGraphBtn">Tìm bằng DFS</button>
<br>
<button id="idsOnGraphBtn">Tìm bằng IDS(Sâu dần)</button>
<br>
<button id="greedySearchOnGraphBtn">Tìm bằng giải thuật tham lam</button>
<br>
<button id="aStarSearchOnGraphBtn">Tìm bằng giải thuật A*</button>
<div id="root"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>