-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·191 lines (180 loc) · 9.5 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE HTML>
<!--
Photon by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<!--
Copyright Ethan Baker. All rights reserved.
-->
<html>
<head>
<title>Infinite Insanity</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/images.css"/>
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!--Ads-->
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-9866393017887774",
enable_page_level_ads: true
});
</script>
</head>
<body class="is-preload" oncontextmenu="return false">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-129027038-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-129027038-2');
</script>
<!--Firebase-->
<script src="https://www.gstatic.com/firebasejs/5.5.8/firebase.js"></script>
<!-- Header -->
<section id="header">
<div class="inner">
<h1><strong>Infinite Insanity: </strong>Insanity 2</h1>
<p>A game that will quite literally make you insane.</p>
<ul class="actions special">
<li><a href="./game/game.html" class="button scrolly">Play</a></li>
</ul>
</div>
<br><br><br><br><br>
</section>
<section id="two" class="main style2">
<div class="container">
<div class="row gtr-150">
<div class="col-6 col-12-medium">
<ul class="major-icons">
<li>Walls | Water<br><span class="icon style6 major " id="wall"></span><span class="icon style6 major " id="water"></span></li>
<li>Trampolines | Treadmills<br><span class="icon style6 major " id="jump"></span><span class="icon style6 major " id="speed"></span></li>
<li>Coins | Underwater Coins<br><span class="icon style6 major " id="coin"></span><span class="icon style6 major " id="water-coin"></span></li>
<li>Gravity Blocks | Lava<br><span class="icon style6 major " id="gravity"></span><span class="icon style6 major " id="death"></span></li>
<li>Switches | Doors<br><span class="icon style6 major " id="switch"></span><span class="icon style6 major " id="door"></span></li>
<li>Moveable Blocks | The Player (You)<br><span class="icon style6 major " id="pushable"></span><span class="icon style6 major " id="player"></span></li>
</ul>
</div>
<div class="col-6 col-12-medium">
<header class="major">
<h2>How to play:</h2>
</header>
<p>In Infinite Insanity, you are a square trying to collect all of the yellow coins.
You have to manuever through tough obstacles and challenges in order to collect the coins</p><br>
<p>To move, you can use the arrow keys. If you want to jump, you can use either the space bar or the up arrow.
</p><br>
<p>There are many special blocks in Infinite Insanity. One type of special blocks are treadmills. Treadmills will accelerate you in the direction they are moving.
Another special block are the trampolines. Trampolines will bounce you up very high if you jump. They both look like how they are represented on the left.
But you need to be careful, as treadmills will move you without you pressing any keys, and trampolines will bounce you up without moving as well.
</p><br>
<p>The next special blocks are the switches and doors. Switches can toggle doors to be on or off once pressed. The last and final special item are the moveable blocks.
Moveable blocks can be moved by the player and can stand on hazardous blocks like lava. Use these to your advantage to advance through the level.
</p><br>
<p>
In addition to the special blocks, there is also water. Water makes you slow and sluggish. However, you can swim around
and float around. Maneuvering around water is hard, so be cautious! The last special block are gravity blocks. They will change your gravity and put you upside-down.
</p><br>
<p>
There are a bunch of secrets in the game that are waiting to be unlocked. Try your best to find them!
</p>
</div>
</div>
</div>
</section>
<section id="three" class="main style1 special">
<div class="container">
<header class="major">
<h2>Character Selection</h2>
</header>
<p>Choose a different skin for your character!</p>
<div class="row gtr-150">
<div class="col-4 col-12-medium">
<h3>Color Selection</h3>
<p>Choose a color from the left button to set as your character color and save the color with the right one!</p>
<ul class="actions special">
<li><input type="color" id="color-picker" value="#000000"/></li>
<li><button onclick="setNewSkin('color')">Save Skin</button></li>
</ul>
</div>
<div class="col-4 col-12-medium">
<h3>Special Skins</h3>
<p>Unlock these special skins! Enter the special code to unlock a special skin!</p>
<br>
<ul class="actions special">
<li><input id=special-skin value="Put code here!" onclick="document.querySelector('#special-skin').value = ''" onfocusout="setTimeout(() => {document.querySelector('#special-skin').value = 'Put code here!'}, 2000)"></li>
<li><button onclick="setNewSkin('specialSkin')">Save Skin</button></li>
</ul>
</div>
<div class="col-4 col-12-medium">
<h3>Secret Skins</h3>
<p>Find these secret skins in the game! Enter the special code to unlock a special skin!</p>
<br>
<ul class="actions special">
<li><input id=secret-skin value="Put code here!" onclick="document.querySelector('#secret-skin').value = ''" onfocusout="setTimeout(() => {document.querySelector('#secret-skin').value = 'Put code here!'}, 2000)"></li>
<li><button onclick="setNewSkin('secretSkin')">Save Skin</button></li>
</ul>
</div>
</div>
</div>
</section>
<section id="four" class="main style2 special">
<div class="container">
<header class="major">
<h2>High Scores:</h2>
</header>
<h3>Initials | Deaths</h3>
<p id=highScores></p>
</div>
</section>
<section id="one" class="main style1">
<div class="container">
<div class="row gtr-150">
<div>
<header class="major">
<h2>Credits</h2>
</header>
<p>Main developer --- Ethan Baker<br>
Graphics --- Ethan Baker | Nate Connor | Charles Boye<br>
Level Design --- Ethan Baker | Matthew Westbrook | Jack Bradford | Jacob Andrews<br>
Beta Testers --- Charles Boye | Nate Connor | Matthew Burrows<br>
</p>
</div>
</div>
</div>
</section>
<section id="four" class="main style2 special">
<div class="container">
<header class="major">
<h2>Connect</h2>
</header>
<ul class="actions special">
<li>Discord<iframe src="https://discordapp.com/widget?id=514553893091409932&theme=dark" class=side-by-side width="400" height="400" allowtransparency="true" frameborder="0"></iframe></li>
<li width=350 height=400>Twitter<a class="side-by-side twitter-timeline" href="https://twitter.com/ethanbaker03?ref_src=twsrc%5Etfw">Tweets by ethanbaker03</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></li>
<li>Instagram<a href="https://instawidget.net/v/user/ebaker03" class="side-by-side" id="link-03901133fc00ba6288dbcdfa0c30c8d85266eedc4ad814e2a15c09f0fb8431bc">@ebaker03</a><script src="https://instawidget.net/js/instawidget.js?u=03901133fc00ba6288dbcdfa0c30c8d85266eedc4ad814e2a15c09f0fb8431bc&width=350px"></script></li>
</ul>
</div>
</section>
<section id="footer">
<ul class="icons">
<li><a href="" class="icon alt fa-discord"><span class="label">Discord</span></a></li>
<li><a href="https://github.com/ethanbaker/insanity2" class="icon alt fa-github"><span class="label">GitHub</span></a></li>
<li><a href="mailto:ethandbaker01@gmail.com" class="icon alt fa-envelope"><span class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© Ethan Baker. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</section>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/util.js"></script>
<script src="fb/firebase.js"></script>
</body>
</html>