-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
73 lines (73 loc) · 3.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Battle Wars EX</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<link rel= "icon" type="image/png" href="assets/images/battleshipIcon.png"/>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Righteous&display=swap" rel="stylesheet">
</head>
<body>
<div id="battleIcon"><img src="assets/images/battleshipIcon.png"></div>
<header><h1>∅ Battle Wars EX ∅</h1></header>
<!-- Steel Game Board -->
<div id="gBoard">
<div id="messageBox"></div>
<!-- GridBoard -->
<table>
<tr>
<td id="00"></td><td id="01"></td><td id="02"></td><td id="03"></td><td id="04"></td><td id="05"></td><td id="06"></td>
</tr>
<tr>
<td id="10"></td><td id="11"></td><td id="12"></td><td id="13"></td><td id="14"></td><td id="15"></td><td id="16"></td>
</tr>
<tr>
<td id="20"></td><td id="21"></td><td id="22"></td><td id="23"></td><td id="24"></td><td id="25"></td><td id="26"></td>
</tr>
<tr>
<td id="30"></td><td id="31"></td><td id="32"></td><td id="33"></td><td id="34"></td><td id="35"></td><td id="36"></td>
</tr>
<tr>
<td id="40"></td><td id="41"></td><td id="42"></td><td id="43"></td><td id="44"></td><td id="45"></td><td id="46"></td>
</tr>
<tr>
<td id="50"></td><td id="51"></td><td id="52"></td><td id="53"></td><td id="54"></td><td id="55"></td><td id="56"></td>
</tr>
<tr>
<td id="60"></td><td id="61"></td><td id="62"></td><td id="63"></td><td id="64"></td><td id="65"></td><td id="66"></td>
</tr>
</table>
<!-- UI: guessBox & fireButton -->
<form>
<input type="text" id="guessBox" placeholder="A0">
<input type="button" id="fireButton" value="Fire!" >
</form>
</div>
<!-- Trigger/Open The Modal -->
<button id="rulesBtn">Game Rules</button>
<!-- The Modal -->
<div id="rulesModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p> </br><h2> ∅ ∅ Battle Wars Game Rules ∅ ∅ </h2> </br>
<h3>∅ The objective of Battle Wars is to try and sink all of the CPU's ships.</br>
∅ All of the CPU's ships are somewhere on the game board. </br>
∅ The Axis is comprised of rows and columns: </br>
∅ A-G for the Rows | 0-6 for the Columns </br>
∅ You try and hit them by calling out the coordinates of one
of the squares on the board.</br>
∅ Sink all 3 of the CPU's and you WIN!
</h3>
</p>
</div>
</div>
<div id="battleIcon"><img src="assets/images/battleshipIcon.png"></div>
<script src="js/main.js"></script>
</body>
</html>