-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
101 lines (97 loc) · 2.59 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
<!DOCTYPE html>
<html>
<head>
<title>Squares</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
canvas {
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
#menu {
position: absolute;
width: 500px;
height: 600px;
background-color: white;
-webkit-box-shadow: -2px 2px 7px rgba(0,0,0,0.5);
-moz-box-shadow: -2px 2px 7px rgba(0,0,0,0.5);
-ms-box-shadow: -2px 2px 7px rgba(0,0,0,0.5);
-o-box-shadow: -2px 2px 7px rgba(0,0,0,0.5);
box-shadow: -2px 2px 7px rgba(0,0,0,0.5);
}
h1 {
text-align: center;
font-size: 2em;
}
p {
text-align: justify;
padding: 30px;
}
#links {
text-align: center;
margin: 0;
padding: 0;
}
a {
font-family: Impact, sans-serif;
font-weight: bold;
font-size: 2.5em;
text-transform: uppercase;
-moz-text-shadow: 0px 2px 0px grey;
-ms-text-shadow: 0px 2px 0px grey;
-o-text-shadow: 0px 2px 0px grey;
text-shadow: 0px 2px 0px grey;
}
a:active {
-moz-text-shadow: 0px 0px 0px grey;
-ms-text-shadow: 0px 0px 0px grey;
-o-text-shadow: 0px 0px 0px grey;
text-shadow: 0px 0px 0px grey;
}
#signed
{
margin-top: -50px;
float: right;
color: black;
font-family: arial;
font-size: 0.7em;
font-variant: italic;
padding-right: 10px
}
#signed a{
color: black;
font-family: arial;
font-size: 0.7em;
font-variant: italic
}
#signed a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<h1>Rectangular 13k</h1>
<p>The goal is to make the red rectangle go through the red line in the right of the window using the arrow keys. Beware of black circles, if you touch one of them you will have to restart.<br />
Use the space key to deploy your parachute and collect the red circles to "reload" it.<br/>
If you fall down the screen, the rectangle will reappear on the top, at the same place.<br />
To start, press Play :
</p>
<p id="links" >
<a>Play</a><br /><br />
<a>Quit</a>
</p>
<p>Better with Chrome, works on other browsers but it seems to be really slow.</p>
<p id="signed">Any suggestions or problems : <a href="https://twitter.com/yhoyhoj">@yhoyhoj</a></p>
</div>
<canvas></canvas>
<script type="text/javascript" src="js/Player.js"></script>
<script type="text/javascript" src="js/Square.js"></script>
<script type="text/javascript" src="js/Mine.js"></script>
<script type="text/javascript" src="js/Bonus.js"></script>
<script type="text/javascript" src="js/input.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>