-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
72 lines (72 loc) · 3.42 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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Bubble wrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary">
<meta property="og:title" content="Bubble wrap">
<meta name="description" property="og:description" content="A rather satisfying bubble wrap popping game">
<meta property="og:image" content="https://img.itch.zone/aW1nLzU2MjkwNjYuanBn/508x254%23mb/dqfs0R.jpg">
<link rel="preload" href="assets/prepop.svg" as="image">
<link rel="preload" href="assets/popped.svg" as="image">
<link rel="icon" href="favicon.png">
</head>
<div id="menu" class="dialog">
<div class="dialog-inner">
<header>
<h1>Bubble Wrap</h1>
<p>A rather satisfying bubble wrap popping game.</p>
</header>
<p>
<button type="button" class="play-dialog-button xlarge glowing">Play!</button><br>
<button type="button" class="how-dialog-button large">How to play?</button><br>
<button type="button" class="options-dialog-button large">Options</button>
</p>
</div>
<footer>
<p>Inspired by <a href="https://twitter.com/bygloo/status/1366402596827779075" target="_blank">ッ</a>. <a href="https://github.com/cheeaun/bubble-wrap" target="_blank">Made</a> by <a href="https://twitter.com/cheeaun" target="_blank">cheeaun</a>.</p>
<p>Sounds: <a href="https://freesound.org/people/Anthousai/sounds/399334/" target="_blank">1</a>, <a href="https://freesound.org/people/CGEffex/sounds/89534/" target="_blank">2</a>, <a href="https://freesound.org/people/Vilkas_Sound/sounds/463395/" target="_blank">3</a>, <a href="https://freesound.org/people/rhodesmas/sounds/320655/" target="_blank">4</a>.</p>
<p>Music by Eric Matyas <a href="https://soundimage.org/attribution-info/" target="_blank">soundimage.org</a></p>
</footer>
</div>
<div id="game">
<div id="toolbar">
<button type="button" class="menu-dialog-button">menu</button>
<span>Level <span id="level">1</span></span>
<button type="button" id="reset-button" disabled>restart</button>
</div>
<div id="bubble-wrap"><div id="bubble-wrap-inner"></div></div>
</div>
<div id="post-level" class="dialog" hidden>
<div class="dialog-inner">
<h2>Great job!</h2>
<p class="content"></p>
<p>
<button type="button" class="play-dialog-button xlarge glowing">Next level!</button>
<br>
<button type="button" class="menu-dialog-button large">Back to menu</button>
</p>
</div>
</div>
<div id="options" class="dialog" hidden>
<div class="dialog-inner">
<h2>Options</h2>
<form id="options-form">
<label><input type="checkbox" id="bgm-check"> <span>Background music</span></label>
<label><input type="checkbox" id="sfx-check"> <span>Sound effects</span></label>
</form>
<p><button type="button" class="menu-dialog-button large">Back to menu</button></p>
</div>
</div>
<div id="how" class="dialog" hidden>
<div class="dialog-inner">
<h2>How to play?</h2>
<p>👆 Tap on the bubbles to pop them!</p>
<p>🍾 After a period of time, the bubbles will "unpop" and you'll have to pop them again!</p>
<p>📈 Pop all of them to level up!</p>
<p>⚡️ As you level up, the bubbles will "unpop" faster!</p>
<p>⌨️ You can use your keyboard to pop them too! Simply type any random keys on your keyboard!</p>
<p><button type="button" class="menu-dialog-button large">Back to menu</button></p>
</div>
</div>
<script type="module" src="/main.js"></script>