-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsnake.html
77 lines (75 loc) · 2.43 KB
/
snake.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<base href=".">
<link rel="stylesheet" href="snake.css">
</head>
<body>
<div class="main">
<p>
<a id="backToHome" class="text_btn" href="https://aliubo.com">回到首页</a>
<a class="text_btn" href="https://github.com/aliubo/SnakeGame">
<img width="20" height="20" src="https://aliubo.com/nav/img/github.svg" alt="">
aliubo/SnakeGame
</a>
Language/语言:
<select id="language-selector">
<option value="zh">中文</option>
<option value="en" selected>English</option>
</select>
Mute/静音:
<select id="mute-selector">
<option value="false" selected>No</option>
<option value="true">Yes</option>
</select>
</p>
<hr>
<p id="hint">
</p>
<div class="canvas-group">
<canvas id="background" width="800" height="600"></canvas>
<canvas id="wall" width="800" height="600"></canvas>
<canvas id="info" width="800" height="600"></canvas>
<canvas id="food" width="800" height="600"></canvas>
<canvas id="snake" width="800" height="600"></canvas>
<canvas id="tip" width="800" height="600"></canvas>
<canvas id="menu" width="800" height="600"></canvas>
</div>
</div>
<script type="module" src="snakeGame.js"></script>
<script>
let $ = e => document.querySelector(e);
window.WebPageText = {
backToHome: {
zh: "回到首页",
en: "Home"
},
hint: {
zh: "暂仅支持键盘操作，'O'确定，'I'选择，'WASD'控制移动, 'P'游戏中暂停",
en: "Currently only supports keyboard operation, 'O' to confirm, 'I' to select, 'WASD' to control movement, 'P' to pause the game",
},
}
let lang = $("#language-selector");
lang.addEventListener("change", e=>{
let val = e.target.value;
GameFunc.changeLanguage(val);
$('#hint').innerText = WebPageText.hint[val];
$('#backToHome').innerText = WebPageText.backToHome[val];
});
lang.childNodes.forEach(e=>{
e.selected = e.value === navigator.language.slice(0, 2);
if(e.selected){
$('#hint').innerText = WebPageText.hint[e.value];
$('#backToHome').innerText = WebPageText.backToHome[e.value];
}
});
let mute = $('#mute-selector');
mute.addEventListener("change", e=>{
let val = e.target.value === 'true';
GameFunc.switchMute(val);
})
</script>
</body>
</html>