forked from tony-luisi/minesweeper
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
134 lines (102 loc) · 4.97 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<!-- Page Encoding -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script>
// Define Page Properties
var page = {
title: "Minesweeper", // page title
description: "My take on the classic game. It's quite 'sweep'", // page meta description
path: "../" // set path to how to find root directory
};
</script>
<!-- Include Common Head Features -->
<script type="text/JavaScript" src="../includes/commonHead.js"></script>
<!-- MineSweeper Includes -->
<link rel="stylesheet" href="minesweeper.css">
<script src="lib/tests.js"></script>
<script src="lib/lib.js"></script>
<script src="minesweeper.js"></script>
</head>
<body>
<!-- Masthead -->
<header id="top">
<a href="/">
<img id="masthead" src="../images/PilcrowMicroFull.png" alt="PilcrowMicro">
</a>
</header>
<!-- Navigation -->
<script type="text/JavaScript" src="../includes/nav.js"></script>
<section class="body container pt-5 pb-5">
<section id="audioLinks">
<audio id="bomb">
<source src="audio/bomb.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio><!-- #bomb -->
<audio id="mark">
<source src="audio/mark.wav" type="audio/wav">
Your browser does not support the audio element.
</audio><!-- #mark -->
<audio id="reverse">
<source src="audio/reverse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio><!-- #reverse -->
<audio id="click">
<source src="audio/click.wav" type="audio/wav">
Your browser does not support the audio element.
</audio><!-- #click -->
<audio id="win">
<source src="audio/win.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio><!-- #win -->
</section><!-- #audioLinks -->
<div id="message"></div><!-- #message -->
<div id="notes"></div><!-- #notes -->
<div id="instructions" style="display: none;">
<h3>How to Play Minesweeper</h3>
<h4>The Aim</h4>
<p>
The goal in minesweeper is to identify every place it is safe to stand in the minefield. In the aim of doing this, you can reveal spaces to see if they contain a mine, or you can mark a space to declare that you think a mine is there.
</p>
<h4>Revealing a Space</h4>
<p>
If you click on a square with your left mouse button, it will reveal a square. That square will either be blank, have a number in it, or have a mine in it. If it is a mine game over. Otherwise, the number (or lack therof) tells you how many immediately adjacent squares (laterally and diagonally) contain a mine.
</p>
<h4>Marking a space</h4>
<p>
If you believe a space contains a mine, right click on it and it will "flag" that space. Flagging a space is a reminder to you that a mine is there, however it does not prevent you from revealing that space if you wish.
</p>
<h4>Visualising Surrounding Mines</h4>
<p>
To easier be able to see which squares surround a particular space, simply click with both the left and right mouse buttons simultaneously to highlight the surrounding spaces.
</p>
<h4>Reveal Surrounding</h4>
<p>
If you proceed by marking the spaces you believe to be a mine, and you simultaneously click with both left and right mouse buttons to indicate, if the number in the cell you are clicking on is equal to the number of surrounding flags, the game will automatically reveal all unflagged hidden spaces.
</p>
<h4>Game End</h4>
<p>
At the end of the game, win or lose, all mines will be revealed. If you successfully identified a mine location, it will be green, however if a mine exploded, it will be red. Any incorrectly located flags will stay put.
</p>
<button id="hideInstructions">Hide Instructions</button>
</div><!-- #instructions -->
<div id="boardWrapper">
<div class="board"></div><!-- .board -->
</div><!-- #boardWrapper -->
<div id="buttons row" class="text-center">
<span class="col-sm"><button id="reset">New Game [ F2 ]</button></span>
<span class="col-sm"><button id="easier">It's too Hard [ - ]</button></span>
<span class="col-sm"><button id="harder">It's too Easy [ + ]</button></span>
<span class="col-sm"><button id="showInstructions">Instructions [ i ]</button></span>
</div><!-- #buttons -->
</section><!-- .body-->
<!-- Include Footer -->
<script type="text/JavaScript" src="../includes/footer.js"></script>
</body>
</html>