-
Notifications
You must be signed in to change notification settings - Fork 34
/
index.html
70 lines (58 loc) · 2.03 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
<html>
<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" />
<title>Bomb Guy</title>
<script src="index.js"></script>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.box {
width: 10px;
height: 11px;
display: inline-block;
border: 1px solid black;
}
.spoiler {
background-color: #333;
color: #333;
padding: 5px;
}
.spoiler:hover {
color: white;
}
p {
max-width: 800px;
}
</style>
</head>
<body>
<canvas width="270" height="270" id="GameCanvas"></canvas>
<h3>How to play</h3>
<p>
The user controls the player square using the arrow keys, and place bombs using the space key.
</p>
<ul>
<li> <span class="box" style="background-color: #0f0;"></span> The green square is the <b>player</b>.</li>
<li> <span class="box" style="background-color: blue;"></span> Blue squares are <b>destructible walls</b>.</li>
<li> <span class="box" style="background-color: #c00;"></span> Red squares are <b>bombs</b>.</li>
<li> <span class="box" style="background-color: #fc0;"></span> Yellow squares are <b>fire</b>.</li>
<li> <span class="box" style="background-color: green;"></span> Dark green squares are <b>extra bomb</b> power-ups.
</li>
<li> <span class="box" style="background-color: gray;"></span> Gray squares are <b>indestructible walls</b>.</li>
<li> <span class="box" style="background-color: #f0f;"></span> The purple square is an enemy <b>monster</b>.</li>
</ul>
<p>
Bombs have a slight delay before they explode, the fire can blow up destructible walls. If the player touches the
fire or the monster they lose. Initially the player can only place one bomb at a time, but as they collect power ups
they can place more.
</p>
<h3>How to win</h3>
<p>
The objective of the game is to clear the map, like this:
</p>
<img src="goal.png" width=150 />
</body>
</html>