-
Notifications
You must be signed in to change notification settings - Fork 10
/
game.html
133 lines (132 loc) · 4.6 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="game.js"></script>
<script src="center.js"></script>
<script src="item.js"></script>
<script src="l10n.js"></script>
<link rel="prefetch" type="application/l10n" href="locales.ini">
<style>
@font-face {
font-family: "Ruji's Handwriting Font v.2.0"; src: url('fonts/RujisHandwritingFontv.2.0.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: "Ruji's Handwriting Font v.2.0";
margin: 0;
background-color: #D2E4B0;
color: #886727;
height: 100vh;
}
#container {
position: relative;
margin: auto;
}
#s, #c, span, #game-over-container, #game-over, #play, #pause {
position: absolute;
}
#s {
top: 0;
z-index: -1;
}
#c {
position: absolute;
top: 0;
}
#about {
bottom: 0;
left: 2px;
}
#pause, #play {
bottom: 0;
right: 2px;
}
#score {
top: 0;
left: 2px;
}
#max {
top: 0;
right: 2px;
}
#play {
display: none;
}
.icon {
cursor: pointer;
}
#game-over-container, #game-over {
-webkit-transition: opacity 2s ease 0s;
transition: opacity 2s ease 0s;
opacity: 0;
visibility: hidden;
}
#game-over-container {
width: 100%;
height: 100%;
background-color: red;
top: 0;
left: 0;
}
#game-over {
color: #490000;
width: 100%;
text-align: center;
top: 35%;
}
#game-over > p {
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="initScreen();">
<div id="container">
<canvas id="c">
</canvas>
<svg id="s">
<ellipse id="e" cx="0" cy="0" rx="0" ry="0" fill="#80AD2B" stroke="#886727" stroke-width="0" />
</svg>
<span id="score">0</span>
<span id="max"></span>
<span id="about" class="icon" onclick="showAbout();">¿?</span>
<svg id="play" class="icon" onclick="pause();"
viewBox="-100 -100 1200 1200">
<path fill="#886727" d="M512 960c-282.77
0-512-229.23-512-512s229.23-512 512-512 512 229.23 512
512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416
416s186.25 416 416 416 416-186.25
416-416-186.25-416-416-416zM384 672l384-224-384-224z"></path>
</svg>
<svg id="pause" class="icon" onclick="pause();"
viewBox="-100 -100 1200 1200">
<path fill="#886727" d="M512 960c-282.77
0-512-229.23-512-512s229.23-512 512-512 512 229.23 512
512-229.23 512-512 512zM512 32c-229.75 0-416 186.25-416
416s186.25 416 416 416 416-186.25
416-416-186.25-416-416-416zM320 640h128v-384h-128zM576
640h128v-384h-128z"></path>
</svg>
</div>
<div id="game-over-container">
</div>
<div id="game-over">
<p data-l10n-id="gameover1"></p>
<p data-l10n-id="gameover2"></p>
<svg id="restart" class="icon" viewBox="-100 -100 1200 1200">
<path fill="#490000" d="M874.022 810.020c-92.652 92.656-220.636
149.98-362.022 149.98-219.488
0-406.69-138.128-479.498-332.188l119.876-44.954c54.604 145.546
195.006 249.142 359.622 249.142 106.040 0
202.020-43
271.506-112.494l-143.506-143.506h384v384l-149.978-149.98zM512
64c-106.040 0-202.026 42.992-271.512 112.488l143.512
143.512h-384v-384l149.994 149.994c92.646-92.662 220.618-149.994
362.006-149.994 219.49 0 406.692 138.128 479.5 332.188l-119.876
44.954c-54.604-145.546-195.006-249.142-359.624-249.142z"></path>
</svg>
</div>
</body>
</html>