-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
123 lines (119 loc) · 5.45 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Savage Sailors</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Finger+Paint|Lato" rel="stylesheet">
<link rel="stylesheet" href="./css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
</head>
<body>
<div class="navi">
<div class="logo">
SAVAGE SAILORS
</div>
<div class="menuImg">
<img src="./img/menu_icon.png" alt="">
</div>
</div>
<div id="mySidenav" class="sidenav">
<img class="closebtn" src="./img/menu_close.png"/>
<div class="navDiv" id="setUp">the set up...
<div class="navSub" id="setUpSub">
<p>Once upon a time, you fancied yourself a world traveler so you decided to grab up your favorite friends and struck out into the open sea. Leaving the harbor everything is just fine and dandy...</p>
<p>You’ve been sailing around for awhile now all peaches and smiles...when you stumble on an island of pirate misfits! To top it off they’re hopped up on radioactive coconut beer. They've loaded into their boats and are on their way to sink your boats and take all your stuff! </p>
<p>Now, you’re not some broke joke of a sailor! You sail with a small armada of pleasure boats so you’re actually well equipped to fend off their attack! You have a Catamaran, a Fishing boat, and a Tender; each with various sizes. If you’ve ever played a game that rhymes with cattle chip, you know how to play Savage Sailors!</p>
</div>
</div>
<div class="navDiv" id="howTo">how to play
<div class="navSub">
<p>Take turns with the Savages firing shots at each other. The Savages will shoot first; after all, you aren’t unprovoked in your hostilities here! </p>
<p>On your turn, click a square on the enemy’s board to shoot at. ‘Hit’ or ‘Miss’ will then be displayed. Trade shots with the Savages until all of their ships (or yours) are destroyed. </p>
<p>Keep track of the health of the ships in the Boats and Enemy Boats section. Enemy boats will only show red if they’re sunk. Whoever survives, lives to sail another day!</p>
<p>If you take all the enemies down with you, you win (because those savages don't get the pleasure of seeing another sail).</p>
<p>Hint: to use your radar <i>'inspect'</i> one of your enemy's squares</p>
</div>
</div>
<div class="navDiv" id="navReset">reset game
<div class="navSub">
<button id="navResetBtn">Reset</button>
</div>
</div>
<div class="navDiv" id="navAbout">about the creator
<div class="navSub">
<p>
Compliments of Tyler Goodman.
More Info Coming Soon!
</p>
</div>
</div>
</div>
<div class="messageContainer">
<div class="messageBoard">
<div class="messageEnemy"></div>
<div class="messageHero"></div>
</div>
</div>
<div class="container">
<div class="board hide">
<div class="reset">
<div class="resetBtn hide">
Play Again (Reset)
</div>
</div>
<div class="enemy hide">
</div>
<div class="welcome">
</div>
<div class="hero hide">
</div>
<div class="vert">
<div class="vertBtn hide">
Switch Boat Orientation
</div>
</div>
</div>
<div class="goWrapper">
<div class="goBtn">
<div class="goBtnText">PLAY</div>
</div>
</div>
</div>
<div class="info">
<div class="infoHeader">
<div class="coconutHeader"></div>
<div class="enemyHeader"></div>
<div class="spacerHeader"></div>
<div class="boatsHeader"></div>
<div class="notsureyetHeader"></div>
</div>
<div class="infoWrapper">
<div class="coconutWrapper">
<img class="" src="./img/nut.png" id="coco1"/>
<img class="" src="./img/coconut.png" id="cocoTree"/>
</div>
<div class="enemyboats">
<div class="boats_sub_em">
<img class="notplaced" src="./img/olbusted.png" id="toon"/>
<img class="notplaced" src="./img/skiff.png" id="skif"/>
</div>
<img class="notplaced" src="./img/emTrawler.png" id="traw"/>
</div>
<div class="spacer"></div>
<div class="boats">
<div class="boats_sub">
<img class="notplaced" src="./img/tender.png" id="dingy"/>
<img class="notplaced" src="./img/fishing.png" id="fish"/>
</div>
<img class="notplaced" src="./img/cat.png" id="cat"/>
</div>
<div class="coconutWrapper">
<img class="" src="./img/coconut.png" id="cocoTreeBack"/>
<img class="" src="./img/nut.png" id="coco2"/>
</div>
</div>
</div>
</body>
</html>