-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·155 lines (137 loc) · 4.36 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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/style.css"/>
</head>
<body class="background" onload="startwithBG('src/defaultBG.jpg')" style="margin:0;padding:0">
<!--<input type="button" class="button" id="startButton" value="Start" onClick="startGame()"/>
-->
<div id="score" style="display:none;">SCORE: 0</div>
<div id="combo" style="display:none;">COMBO: 0</div>
<canvas id="game" width="500" height="500"></canvas>
<audio id="audio"></audio>
<script src="lib/jQuery.js"></script>
<script src="lib/leap-0.6.4.js"></script>
<script src="lib/leap-plugins-0.1.12.js"></script>
<script src="interface.js"></script>
<script src="gamepad.js"></script>
<script src="beatmap.js"></script>
<script src="render.js"></script>
<script src="event.js"></script>
<script src="judgement.js"></script>
<script src="main.js"></script>
<div id="title">
<h1 onmouseover="ShowInfo('A Leap Motion OSU! Game')" onmouseout="CloseInfo()">
<span class="titlebr">{</span>Motionosu<span class="titlebr">}</span>
</h1>
</div>
<div id="infop">
<p class="info" id="info"></p>
</div>
<div id="link">
<p class="link1">
<a href="javascript:void(0)" style="text-decoration:none"
onclick="startGame(1)"
onmouseover="ShowInfo('Faded(Alan Walker) <sup>1.51</sup>')"
onmouseout="CloseInfo()">
Level 01</a><br/>
<a href="javascript:void(0)" style="text-decoration:none"
onclick="startGame(2)"
onmouseover="ShowInfo('Terror(Neru) <sup>1.97</sup>')"
onmouseout="CloseInfo()">
Level 02</a><br/>
<a href="javascript:void(0)" style="text-decoration:none"
onclick="startGame(3)"
onmouseover="ShowInfo('Taketori Hishou <sup>5.04</sup>')"
onmouseout="CloseInfo()">
Level 03</a><br/>
<a href="javascript:void(0)" style="text-decoration:none"
onclick="startGame(4)"
onmouseover="ShowInfo('Neko Neko Super Fever Night <sup>？</sup>')"
onmouseout="CloseInfo()">
Level 04</a><br/>
<a href="javascript:void(0)" style="text-decoration:none"
onclick="startGame(5)"
onmouseover="ShowInfo('Serenade of Love <sup>？</sup>')"
onmouseout="CloseInfo()">
Level 05</a><br/>
</p>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
.button {
position: absolute;
top: 50%;
left: 50%;
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 40px;
margin: 4px 2px;
cursor: pointer;
}
#score {
position: absolute;
top: 0;
left: 0;
margin: auto;
margin-top: 15px;
margin-left: 25px;
font-size: 20px;
font-family: Comic Sans MS;
}
#combo {
position: absolute;
top: 0;
left: 0;
margin: auto;
margin-top: 50px;
margin-left: 25px;
font-size: 20px;
font-family: Comic Sans MS;
}
.waves-effect{
border-radius: 100%;
background-color:#D8D8D8;
left: 20px;
top: 20px;
transform: scale(0);
width: 10px;
height: 10px;
position:absolute;
}
.waves-effect-animation{
animation: animation-definition 1s ease-out;
/*兼容各大浏览器*/
-moz-animation: animation-definition 1s ease-out;
-webkit-animation: animation-definition 1s ease-out;
-o-animation: animation-definition 1s ease-out;
}
@keyframes animation-definition {
from{
transform: scale(0.1);
opacity: 0.6;
}
to{
transform: scale(1); /*因为涟漪的大小为标签的最长边，为了保证点击标签边缘时，涟漪也能覆盖整个标签，scale值最小应为2*/
opacity: 0;
}
}
</style>
</head>
<body>
<div class="waves" style="width: 1250px;height: 800px;">
<canvas></canvas>
<div class='waves-effect'></div>
</div>
</body>
</html>