-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.html
115 lines (115 loc) · 3.53 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
<!DOCTYPE html>
<html>
<head>
<title>p5js</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width"
/>
<!-- <link href="http://fonts.gstatic.com/s/pressstart2p/v8/e3t4euO8T-267oIAQAu6jDQyK3nbivNm4I81PZQ.woff2" rel="preload"> -->
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap"
rel="stylesheet"
/>
<!-- <link rel="stylesheet" href="styles.css"> -->
<style>
html,
body {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
background: orange;
}
h1 {
color: fuchsia;
}
p {
font-family: "Press Start 2P", sans-serif;
} /*latin */
@font-face {
font-family: "Press Start 2P";
font-style: normal;
font-weight: 400;
src: local("Press Start 2P Regular"), local("PressStart2P-Regular"),
url(
https://fonts.gstatic.com/s/pressstart2p/v8/e3t4euO8T-267oIAQAu6jDQyK3nVivNm4I81.woff2
)format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
#p5_loader {
width: 100%;
height: 100%;
text-align: center;
/* line-height:100%; padding:70px
0; */
}
.lds-ring {
display: inline-block;
/* position: relative; */ /*
width: 64px; height: 64px; */ /* width: 128px; height: 128px; */
width: 256px;
height: 256px; /* margin:auto; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.lds-ring div {
box-sizing: border-box;
display: block;
position: absolute; /* width: 51px; height:
51px; */ /* width: 102px; height: 102px; */
width: 204px;
height: 204px;
margin: 6px;
border: 10px solid #fb0;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fb0 transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.js"></script> -->
<script src="classes/sprite.js" defer></script>
<script src="classes/mover.js" defer></script>
<script src="classes/hero.js" defer></script>
<script src="classes/tallGrass.js" defer></script>
<script src="classes/wall.js" defer></script>
<script src="classes/door.js" defer></script>
<script src="maps.js" defer></script>
<script src="classes/level.js" defer></script>
<script src="script.js" defer></script>
</head>
<body>
<div id="p5_loader" class="loadingclass">
<div class="lds-ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>