-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
executable file
·134 lines (118 loc) · 3.22 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>我是一只鱼</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
<style>
.mui-content {
text-align: center;
}
#start {
margin-top: 90%;
position: absolute;
margin-left: -38px;
padding-left: 50px;
padding-right: 50px;
}
#setting {
margin-top: 110%;
position: relative;
}
#can {
/*background-color: rgba(173, 237, 247, 0.7);*/
background-image: url(images/bg.png) ;
background-size: 100% 100%;
position: absolute;
}
.dot {
position: absolute;
top: 36%;
left: 65%;
/*background-color:#E3E3E3;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,.3) inset;*/
-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/
-webkit-animation-duration: 1s;/*动画持续时间*/
-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/
-webkit-animation-delay: 0s;/*动画延迟时间*/
-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/
-webkit-animation-direction: alternate;/*定义动画方式*/
}
@keyframes ripple {
0% {
opacity:0.35;
width:30px;
height:30px;
}
100% {
opacity: 0.65;
width:80px;
height:80px;
}
}
.dotTip {
position: absolute;
top: 35%;
left: 65%;
opacity: 0.5;
color: #ffffff;
}
</style>
</head>
<body>
<canvas id="can"></canvas>
<div class="mui-content">
<button id="start" type="button" style="color: #98713a" class="mui-btn mui-btn-warning mui-btn-outlined">开始游戏</button>
<button id="setting" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">游戏设置</button>
</div>
<div id="tip">
<div class="dotTip">点击任意处</div>
<div class="dot">
<img width="100%" height="100%" src="images/finger3.png">
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="common/common.js"></script>
<script src="game/index.js"></script>
<script src="game/freeModel.js"></script>
<script type="text/javascript">
mui.init()
mui(".mui-content").on('tap', '#start', function() {
mui.openWindow({
url: 'main.html',
id: 'main'
});
});
mui(".mui-content").on('tap', '#setting', function() {
mui.openWindow({
url: 'setting.html',
id: 'setting'
});
});
var actor = new actor();
actor.init();
var actor2 = new model();
actor2.init();
var timer = setInterval(function() {
for(var i = 0; i < actor.num; i++) {
mx[i] = Math.floor(Math.random() * wWidth);
my[i] = Math.floor(Math.random() * wHeight);
}
}, 1500);
var timer = setInterval(function() {
for(var i = 0; i < actor2.num; i++) {
mx2[i] = Math.floor(Math.random() * wWidth);
my2[i] = Math.floor(Math.random() * wHeight);
}
}, 4000);
function gameLoop() {
window.requestAnimationFrame(gameLoop);
actor.draw();
actor2.draw();
}
gameLoop();
</script>
</body>
</html>