-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (146 loc) · 7.43 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
<!DOCTYPE html>
<html>
<head>
<title>Minesweeper</title>
<link type="text/css" rel="stylesheet" href="./css/style.css" />
<script type="text/javascript" src="js/minesweeper.js" ></script>
</head>
<body onload="startGame();">
<div>
<div class="game_wrapper">
<h1> Minesweeper </h1>
<table class ="menu">
<tr>
<th><button id="howToPlayBtn" class="menu-button">How to Play</button></th>
<th><button id="difficultyBtn" class="menu-button">Difficulty</button></th>
</tr>
</table>
<div id="howToPlayModal" class="modal">
<div class="modal-content">
<span id="closeHowToPlay" class="close">×</span>
<h1 class="menu-title"> How to Play</h1>
<p>Your goal is to find all the mines!</p>
<p style="text-decoration: underline">Controls</p>
<table style="text-align: left;">
<tr>
<td><p><strong>Left Click:</strong></p></td>
<td><p>will reveal the tile.</p></td>
</tr>
<tr>
<td><p><strong>Right Click:</strong></p></td>
<td><p>will place or remove a flag.</p></td>
</tr>
<tr>
<td><p><strong>Middle Click: </strong></p></td>
<td><p>will reveal the surrounding tiles.</p></td>
</tr>
</table>
<p style="text-decoration: underline">Icons</p>
<table style="text-align: left;">
<tr>
<td><div class="icon tile tile_1"></div></td>
<td><p>Numbered tiles tell you how many mines surrounding that tile.</p></td>
</tr>
<tr>
<td><div class="icon tile flag"></div></td>
<td><p>Flags can be placed on tiles that you think is a mine, but not all mines need to be flagged for you to win</p></td>
</tr>
<tr>
<td><div class="icon tile mine_hit"></div></td>
<td><p>When you incorrectly select a tile that is a mine you automatically lose, revealing all other flags.</p></td>
</tr>
<tr>
<td><div class="icon tile mine_marked"></div></td>
<td><p>When you place a flag on a tile that did not contain a mine. Flags that are correctly marked will stay the same icon.</p></td>
</tr>
</table>
<p> You're ready to play! Now get out there are start sweeping!</p>
</div>
</div>
<div id="difficultyModal" class="modal">
<div class="modal-content">
<span id="closeDifficulty" class="close">×</span>
<h1 class="menu-title">Difficulty</h1>
<table style="text-align: left;">
<tr>
<td><input id="easyRadio" type="radio" name="myRadios" onchange="setDifficulty(this);" value="0" checked/></td>
<td>
<label for="easyRadio"><p><strong> Easy </strong> 9x9 grid with 10 mines.</p></label>
</td>
</tr>
<tr>
<td><input id="mediumRadio"type="radio" name="myRadios" onchange="setDifficulty(this);" value="1" /></td>
<td>
<label for="mediumRadio"><p><strong> Medium </strong> 16x16 grid with 40 mines.</p></label>
</td>
</tr>
<tr>
<td><input id="hardRadio"type="radio" name="myRadios" onchange="setDifficulty(this);" value="2" /></td>
<td>
<label for="hardRadio"><p><strong> Hard </strong> 30x16 grid with 99 mines.</p></label>
</td>
</tr>
</table>
<button id="startGameBtn" class="menu-button">Start Game</button>
</div>
</div>
<div>
<span id="notification" class="notification"></span>
</div>
<div class="game">
<table class="game_stats">
<tr>
<td>
<img style="float: left;" id="mine_hundred" src="images/time0.gif"></img>
<img style="float: left;" id="mine_ten" src="images/time0.gif"></img>
<img style="float: left;" id="mine_one" src="images/time0.gif"></img>
</td>
<td> <div id="smiley" class="smiley" onmousedown="smileyDown();" onmouseup="smileyUp();" onclick="startGame();"></div></td>
<td>
<img style="float: right;" id="time_one" src="images/time0.gif"></img>
<img style="float: right;" id="time_ten" src="images/time0.gif"></img>
<img style="float: right;" id="time_hundred" src="images/time0.gif"></img>
</td>
</tr>
</table>
<div id="minefield" class="minefield"></div>
</div>
</div>
</div>
</body>
<script>
var howToPlayModal = document.getElementById('howToPlayModal');
var difficultyModal = document.getElementById('difficultyModal');
var howToPlayBtn = document.getElementById("howToPlayBtn");
var difficultyBtn = document.getElementById("difficultyBtn");
var startGameBtn = document.getElementById("startGameBtn");
// Get the <span> element that closes the modal
var spanHowToPlay = document.getElementById("closeHowToPlay");
var spanDifficulty = document.getElementById("closeDifficulty");
howToPlayBtn.onclick = function() {
howToPlayModal.style.display ="block";
}
difficultyBtn.onclick = function() {
difficultyModal.style.display="block";
}
startGameBtn.onclick = function() {
difficultyModal.style.display="none";
startGame();
}
// When the user clicks on <span> (x), close the modal
spanHowToPlay.onclick = function() {
howToPlayModal.style.display = "none";
}
spanDifficulty.onclick = function() {
difficultyModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == howToPlayModal) {
howToPlayModal.style.display = "none";
} else if (event.target == difficultyModal) {
difficultyModal.style.display = "none";
}
}
</script>
</html>