-
Notifications
You must be signed in to change notification settings - Fork 4
/
play.html
110 lines (85 loc) · 4.19 KB
/
play.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Berkshire+Swash|Rochester" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<title>Bubble Blaster</title>
</head>
<body class="container">
<div class="colorOverlay">
<header>
<nav class="navbar navbar-default" id="headingNavbar">
<div class="navbar-header">
<img src="assets/images/logo1.jpg" alt="" class="logo">
<a class="navbar-brand" href="index.html">Bubble Blaster</a>
<div class="dropdown">
<button class="dropbtn">Menu</button>
<div id="myDropdown" class="dropdown-content">
<a href="index.html">Home</a>
<a href="#" class="about">About</a>
<a href="play.html" class="newGame">New Game</a>
</div>
</div>
</div>
<ul class="nav navbar-nav">
<li><a href="index.html" id="big-home">Home</a></li>
<li><a href="#" class="about" id="big-about">About</a></li>
<li><a href="play.html" class="newGame" id="big-newGame">New Game</a></li>
</ul>
<select class="nav navbar-nav bg-colors" name="bg-colors">
<option value="default">Background</option>
<option value="blue">Han Blue</option>
<option value="violet">Indigo Dye</option>
<option value="aqua">Liberty</option>
<option value="lilac">Space Cadet</option>
</select>
</nav>
<div id="about" class="overlay">
<a href="javascript:void(0)" class="closebtn closeNav">×</a>
<div class="overlay-content">
<div id="text">
<h2 id="aboutHeader">What is Bubble Blaster?</h2>
<p>Bubble blaster is a fun game where a player pops bubbles. When a player clicks 'Start', bubbles of different sizes rise up from the bottom of the page at different speeds.</p>
<p>Each game is allocated a 30 second span within which you, the player have to pop as many bubbles as you can. When time runs out, the bubbles stop rising and your score is displayed. You can then choose to start a new game. </p>
<p>Enjoy!!!</p>
</div>
</div>
</div>
</header>
<div id="main">
<div class="scoreDisplay">Score
</div>
<div class="timer">Timer
</div>
<button id="start" type="click">Start</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Score</h4>
</div>
<div class="modal-body">
<img src="assets/images/game-over.jpeg" alt="">
<p>Your score:<span class="yourScore"></span> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onClick="window.location.reload()">Close</button>
</div>
</div>
</div>
</div>
<div id="bubbles">
</div>
</div>
</div>
<!-- Javascript Links-->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>