-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
91 lines (90 loc) · 3.94 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script defer src="script.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="babybumper/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
<title>Baby Bumper Game</title>
</head>
<body>
<section id="vol">
<label for="volumeControl">Volume</label>
<input type="range" id="volumeControl" name="volumeControl" min="0" max="100" value="20" />
</section>
<section id="info" class="gone">
<div class="close">x</div>
<article id="instructions">
<h2>How to play:</h2>
<ol>
<li>Enter your baby's name and click <span>Let's Go</span> or press <span>Enter</span></li>
<li>Use the <span>arrow keys</span> to control the baby's direction.</li>
<li>Try to knock over all the furniture in the living room that you can.</li>
<li>Enjoy buying more furniture.</li>
</ol>
</article>
</section>
<section id="modalBG"></section>
<section id="startModal">
<h1>Baby Bumper!</h1>
<p>What's your baby's name?</p>
<input type="text" id="inputBabyName" class="enter-baby-name" />
<button id="start" disabled="disabled">Let's Go!</button>
<div id="instructionsLink"><a href="#">How to play</a></div>
</section>
<section id="endModal" class="hide">
<article class="win hide">
<h1>Congratulations! You helped <span class="enter-baby-name"></span> destroy the living room!</h1>
<img id="baby-win" src="img/baby-win.webp" />
</article>
<!-- Future functionality with timer
<article class="lose hide gone">
<h1>Wah! You and <span class="enter-baby-name"></span> didn't destroy the living room in time!</h1>
<h4>How could you do this to a child? You monster.</h4>
<img id="baby-lose" src="img/baby-lose.webp" />
</article>
--></section>
<main>
<section id="scoreboard">
<div id="scoreTitle">
<div id="babyName"></div>
<div>DAMAGES</div>
</div>
<div id="damages">$ <span id="runningScoreDisplay">0000</span></div>
</section>
<section id="livingRoom">
<figure id="baby" data-name="baby">
<img src="img/baby.webp" id="babyImg" alt="Baby" />
</figure>
<figure class="item" id="sofa" data-name="sofa" data-cost="2500">
<img src="img/sofa.webp" alt="Sofa" />
</figure>
<figure class="item" id="stool" data-name="stool" data-cost="100">
<img src="img/stool.webp" alt="Stool" />
</figure>
<figure class="item" id="twincabinet" data-name="twincabinet" data-cost="450">
<img src="img/twincabinet.webp" alt="Twin Cabinet" />
</figure>
<figure class="item" id="smallbookshelf" data-name="smallbookshelf" data-cost="225">
<img src="img/smallbookshelf.webp" alt="Small Bookshelf" />
</figure>
<figure class="item" id="smallpot" data-name="smallpot" data-cost="25">
<img src="img/smallpot.webp" alt="Small Potted Plant" />
</figure>
<figure class="item" id="cabinet" data-name="cabinet" data-cost="350">
<img src="img/cabinet.webp" alt="Cabinet" />
</figure>
<figure id="rug" class="scenery" data-name="rug" data-cost="2200">
<img src="img/abstract_rug.webp" alt="Abstract mid century rug" />
</figure>
<figure id="wallhangings" class="scenery" data-name="wallhangings" data-cost="825">
<img src="img/wallhangings.webp" alt="Wall hangings" />
</figure>
</section>
</main>
</body>
</html>