-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathsimple-maze.html
118 lines (116 loc) · 2.54 KB
/
simple-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
<html>
<style>
table {
width: 80%;
height: 80%;
}
td {
border: solid;
}
td.focus {
background-image: url("./images/lizard_icon_pink.png");
background-position: center;
background-repeat: no-repeat;
background-size: 30%;
transform: rotate(180deg);
}
td.black {
background-color: black;
}
td.focus.black {
background-image: url("./images/normal_explosion.png");
background-position: center;
background-repeat: no-repeat;
}
div {
margin-top: 10px;
font-size: 25px;
}
input[type="text"] {
font-size: 25px;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.querySelector('input[name="instruction"]').addEventListener('change', changeEventHandler,false);
}
function changeEventHandler(event) {
let current = document.getElementsByClassName("focus")[0];
var instruction = event.target.value;
let newEl, col;
switch (instruction) {
case "go forward":
col = getCol(current);
newEl = current.parentElement.nextElementSibling.querySelector("." + col);
break;
case "go back":
col = getCol(current);
newEl = current.parentElement.previousElementSibling.querySelector("." + col);
break;
case "go left":
newEl = current.previousElementSibling;
break;
case "go right":
newEl = current.nextElementSibling;
break;
default:
newEl = current;
break;
}
current.classList.remove("focus");
newEl.classList.add("focus");
}
function getCol(el) {
var re = /^.*(col\d+).*$/;
var className = el.className;
return className.replace(re, '$1');
}
</script>
<body>
<table>
<tbody>
<tr>
<td class="col1 black"></td>
<td class="col2 focus"></td>
<td class="col3 black"></td>
<td class="col4 black"></td>
<td class="col5"></td>
</tr>
<tr>
<td class="col1 black"></td>
<td class="col2"></td>
<td class="col3 black"></td>
<td class="col4 black"></td>
<td class="col5"></td>
</tr>
<tr>
<td class="col1 black"></td>
<td class="col2"></td>
<td class="col3"></td>
<td class="col4 black"></td>
<td class="col5"></td>
</tr>
<tr>
<td class="col1 black"></td>
<td class="col2 black"></td>
<td class="col3"></td>
<td class="col4 black"></td>
<td class="col5"></td>
</tr>
<tr>
<td class="col1 black"></td>
<td class="col2 black"></td>
<td class="col3"></td>
<td class="col4"></td>
<td class="col5"></td>
</tr>
</tbody>
</table>
<div>
<form>
<label for="instruction">What should I do?</label>
<input type="text" name="instruction">
</form>
</div>
</body>
</html>