-
Notifications
You must be signed in to change notification settings - Fork 132
/
index.html
161 lines (156 loc) · 6.51 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/style.css">
<title>Star Battle</title>
</head>
<body>
<!-- Game -->
<div id="app">
<div id="logo">
<img src="./img/logo-01.png" alt="logo">
</div>
<div id="container" class="absolute">
<div id="start" class="column">
<p class="message pre">
1. 使用 W、A、S、D 控制飞船，按下 Space 发射。
2. 燃料初始值为15，每秒递减1点，当燃料值为0时，游戏结束。
3. 触碰掉下的燃料瓶可增加15点，最大值为30点。
4. 击中敌方飞船增加5分。行星需击中两次，增加10分。击中友方扣除10分。
5. 撞击敌方损失15点燃料，撞击友方扣除10分。
6. 游戏允许负分。
7. 按下 P 暂停游戏，按下 M 静音。
开始您的星际大战吧！
</p>
<button id="start-btn" class="btn">
<p>开始游戏</p>
<p>加载中...</p>
</button>
</div>
<div id="play" class="absolute">
<canvas id="canvas" class="absolute"></canvas>
<div class="content absolute">
<div class="header">
<ul class="info">
<li>
<img src="./img/time3.png" alt="time">
<span id="time">00</span>
</li>
<li>
<img src="./img/fuel2.png" alt="fuel">
<span id="fuel">00</span>
</li>
<li>
<img src="./img/score.png" alt="score">
<span id="score">00</span>
</li>
<li>
<img src="./img/playerBullet.png" alt="score">
<span id="shoot">00</span>
</li>
</ul>
<ul class="option">
<li id="game-font-size-add">
<img class="pause" src="./img/a+.png" alt="time">
</li>
<li id="game-font-size-reduce">
<img class="pause" src="./img/a-.png" alt="time">
</li>
<li id="game-mute-btn">
<img class="pause" src="./img/mute.png" alt="time">
<img class="pause" src="./img/speaker.png" alt="time">
</li>
<li id="game-pause-btn">
<img class="pause" src="./img/play.png" alt="time">
<img class="pause" src="./img/pause.png" alt="time">
</li>
</ul>
</div>
</div>
</div>
<div id="over" class="column absolute">
<div class="game-data">
<p class="message">
<span>
<img src="./img/time3.png" alt="time">
</span>
<span>
--
</span>
<span class="time">00</span>
</p>
<p class="message">
<span>
<img src="./img/score.png" alt="score">
</span>
<span>
--
</span>
<span class="score">00</span>
</p>
<p class="message">
<span>
<img src="./img/playerBullet.png" alt="score">
</span>
<span>
--
</span>
<span class="shoot">00</span>
</p>
</div>
<input type="text" id="name" placeholder="请输入您的名字" />
<button id="submit-btn" class="btn" disabled>
继续游戏
</button>
</div>
<div id="rank" class="column absolute">
<table class="scroll">
<thead>
<tr>
<th>名次</th>
<th>名字</th>
<th>分数</th>
<th>秒数</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button id="restart-btn" class="btn">
返回开始
</button>
</div>
</div>
</div>
<footer>
<span>Crafted with by
<a href="http://4ark.me"> @4Ark</a>/<a href="https://github.com/gd4Ark/star-battle">GitHub</a>
</span>
</footer>
<script src="js/config/config.js"></script>
<script src="js/utils/utils.js"></script>
<script src="js/utils/res.js"></script>
<script src="js/class/scene.js"></script>
<script src="js/class/cooldown.js"></script>
<script src="js/class/element.js"></script>
<script src="js/class/animation.js"></script>
<script src="js/class/plane.js"></script>
<script src="js/class/bullet.js"></script>
<script src="js/class/player.js"></script>
<script src="js/class/enemy.js"></script>
<script src="js/class/meteorite.js"></script>
<script src="js/class/friend.js"></script>
<script src="js/class/star.js"></script>
<script src="js/class/fuel.js"></script>
<script src="js/scenes/start.js"></script>
<script src="js/scenes/play.js"></script>
<script src="js/scenes/over.js"></script>
<script src="js/scenes/rank.js"></script>
<script src="js/game.js"></script>
<script src="js/main.js"></script>
</body>
</html>