/
index.html
137 lines (132 loc) · 5.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, user-scalable=no">
<title>在线走迷宫游戏</title>
<link rel="shortcut icon" href="./img/favicon.svg" type="image/x-icon">
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<link rel="stylesheet" href="./css/materialize.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body class="teal lighten-4">
<div class="container center-align">
<div class="row"></div>
<!-- Github buttons -->
<div class="row right-align">
<a href="https://github.com/knightyun/maze-game">
<img alt="" src="https://img.shields.io/github/stars/knightyun/maze-game?style=social">
<img alt="" src="https://img.shields.io/github/forks/knightyun/maze-game?style=social">
</a>
</div>
<!-- 迷宫模块 -->
<div class="row">
<div class="maze">
<!-- 迷宫地图 -->
<canvas id="maze-map" class="z-depth-5"></canvas>
<!-- 小球 -->
<div id="maze-ball" class="deep-orange accent-3"></div>
</div>
</div>
<!-- 控制面板 -->
<div class="row center-align">
<div class="control teal col s12 m6 offset-m3
card-panel z-depth-3 row">
<!-- 地图尺寸 -->
<div class="row valign-wrapper" style="margin-bottom: 0;">
<div class="col s5">
<p class="teal-text text-lighten-5">地图大小：</p>
</div>
<div class="range-field col s7">
<input type="range" class="maze-size teal lighten-2"
value="31" min="31" max="101" step="2" />
</div>
</div>
<!-- 游戏难度 -->
<div class="row input-field teal lighten-1" style="margin-top: 0;">
<div class="col s5">
<p class="teal-text text-lighten-5">游戏难度：</p>
</div>
<div class="col s7">
<select class="game-level">
<option value="0" selected>简单</option>
<option value="2">困难</option>
<option value="1">复杂</option>
</select>
</div>
</div>
<!-- 游戏控制 -->
<div class="row">
<div class="col s6">
<button class="start-game btn waves-effect waves-light
teal-text text-lighten-5" onclick="startGame()">
开始游戏
</button>
</div>
<div class="col s6">
<button class="btn waves-effect offset-m3 waves-light
teal-text text-lighten-5" onclick="reGenMaze()">
重新生成
</button>
</div>
</div>
</div>
</div>
<!-- 游戏提示 -->
<div class="fixed-action-btn">
<a class="game-hint btn-floating btn-large scale-transition
waves-effect waves-light z-depth-3 teal lighten-1 scale-out"
onclick="drawHintPath()">提示</a>
</div>
<!-- 彩蛋 -->
<div class="row">
<a class="waves-effect waves-light btn modal-trigger"
href="#modal-surprise">Modal</a>
<div id="modal-surprise" class="modal">
<div class="modal-content">
<div class="fireworks"></div>
<div class="surprise-msg">
<h4 class="orange-text">恭喜通关</h4>
<p class="orange-text text-darken-4 center-align">
祝贺你喜提彩蛋一枚
</p>
<p>✨🎉🎉🎉✨</p>
<p class="orange-text text-darken-4 center-align">
相信每一个能通关此地图的玩家
</p>
<p class="orange-text text-darken-4 center-align">
内心都住着一个有趣的灵魂
</p>
<p class="orange-text text-darken-4 center-align">
有着百折不挠的毅力，持之以恒的耐心
</p>
<p class="orange-text text-darken-4 center-align">
希望未来的你，也能长此以往
</p>
<p class="orange-text text-darken-4 center-align">
愿坚强和自信与你同在^_^
</p>
<a href="#!" class="modal-close waves-effect
waves-green btn-flat right red-text text-darken-3">关闭</a>
</div>
</div>
</div>
</div>
</div>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> -->
<script src="./js/materialize.min.js"></script>
<script>
M.AutoInit();
document.addEventListener('DOMContentLoaded', function () {
var elms = document.querySelectorAll('.modal');
var instances = M.Modal.init(elms, { endingTop: '0' });
});
</script>
<!-- <script src="http://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> -->
<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.fireworks.min.js"></script>
<script src="./js/maze.js"></script>
</body>
</html>