/
game.html
95 lines (91 loc) · 3.71 KB
/
game.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
<!DOCTYPE html>
<html>
<audio id="audio1" src="./sounds/backgroundStart.m4a" autoplay loop></audio>
<style>
.title{
font-size: 300%;
background: -webkit-linear-gradient(#6dcff6, #00e51f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>
2020: The Game
</title>
<link href="game.css" rel="stylesheet" type="text/css"/>
<h1 class=title> 2020: The Game </h1>
</head>
<div id="gameover" class="popup-results">
<div class='popup-text'>
<h3 class="result">Game Over</h3>
<h3 class="message">You lost all your sanity</h3>
<button id="restart" class="start-button" onclick='playAgain()'>Restart?</button>
</div>
</div>
<div id="overlay" class="screen-overlay"></div>
<dv id="appraisal">
<div id="attack">Attack: <div class="bar"><div id="attack_bar"></div></div></div>
<div id="defense">Defense: <div class="bar"><div id="defense_bar"></div></div></div>
<div id="hp"> HP: <div class="bar"><div id="hp_bar"></div></div></div>
<div id="white_bars"></div> <div id="white_bars2"></div>
</dv>
<center>
<div class="container">
<div id="text">Text</div>
<img id="backImg" src="" style="z-index: -1; width:800px; height:500px; margin:0px;">
<p class="loseSanity" id="sanityText"> Sanity </p>
<div class="description"> <p id="description"> Description </p> </div>
<div id="option-buttons" class="btn-grid">
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
</div>
</div>
</img>
</div> </center>
<div class="progress2 progress" id="sanity" data-progress-percent="100">
<div class="progress-bar progress" id="sanityBar"></div>
</div>
<p class="rotated"> Your Current </p>
<p class="rotated2"> Sanity </p>
<!-- Shop Image -->
<a class="store" href="#storeScreen"><img src="https://cdn.discordapp.com/attachments/849316750683406396/853201679293612032/Untitled-1.png"> </a>
<div id="storeScreen" class="overlay">
<div class="popup">
<div style="width:200px; height:200px;">
<h1 style="margin-left:225%; color:black; margin-top:0px;"> SHOP </h1>
<table style="width:1050px">
<tr>
<td> <div id="boosters"> <h2> ATK </h2> </div></td>
<td> <div id="boosters"> <h2> DEF </h2> </div></td>
<td> <div id="boosters"> <h2> HP </h2> </div> </td>
</tr>
<tr>
<td style="width:33%">
<!-- Attack Image -->
<img id="brainImg" src="https://cdn.discordapp.com/attachments/849316750683406396/853179405474988052/Brain.png">
</td>
<td style="width:33%">
<!-- Defense Image -->
<img src="https://media.discordapp.net/attachments/849316750683406396/853152468049592320/defense.png?width=704&height=704">
</td>
<td style="width:33%">
<!-- Health Image -->
<img src="https://media.discordapp.net/attachments/849316750683406396/853138933398503434/Icon.png?width=704&height=704">
</td>
</tr>
<tr>
<td> <a id="purchase" href="#storeScreen" onclick="increaseAttack(1)"> Purchase <b>brain power</b> with 15% sanity. </a> </td>
<td> <a id="purchase" href="#storeScreen" onclick="increaseDefense(1)"> Purchase <b>face mask</b> with 15% sanity. </a> </td>
<td> <a id="purchase" href="#storeScreen" onclick="increaseHP(1)"> Purchase <b>hand sanitizer</b> with 15% sanity. </a> </td>
</tr>
</table>
</div>
<a id = "Not_Link" class="close" href="#">×</a>
</div>
</div>
<script src="game.js"></script>
</body>
</html>