-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.php
244 lines (222 loc) · 6.49 KB
/
index.php
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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
body {
margin: 0px;
padding: 0px;
text-align:center;
}
canvas {
border:1px solid #000;
margin:0 auto;
background:skyblue;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="600"></canvas>
<script>
var cw = 400;
var ch = 600;
// frame time 每帧时长
var ft = 20;
// 地心引力
var g = 9.8;
// 飞行初速度（向上）
var v0 = 8; // 10
// 水平飞行速度
var v = 0.12;
// 长度换算比例
var scale = 1/30;
// interval句柄
var timer;
var state = 0;// 0 init, 1=> gameing, 2 pause, 3 gameover
// 初始坐标
var x=100;
var y=280;
// 当前坐标
var cx = 0;
var cy = 0;
// 运动时间
var t=0;
// 得分计数器
var score = 0;
// 距离计数器
var distance = 0;
// 点击计数器
var click = 0;
var wall = [];
// 上一个墙生成的距离
var last_wall = 0;
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
timer = setInterval(function(){
if (state === 0) {
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
// 计算当前上抛时间
t += ft;
// 计算当前位移
h = Math.sin(t/200);
// 计算当前位置
cx = x;
cy = y-(h/scale); // 偏移像素
draw_photo(cx,cy);
} else if (state ===1) {
// clear
context.clearRect(0, 0, canvas.width, canvas.height);
// 计算当前上抛时间
t += ft;
// 计算当前位移
h = (v0 * (t/1000)) - ((g*(t/1000)*(t/1000))/2);
hy = f_h(v0,g);// 顶点y
hx = f_t(v0, g, v/scale);// 顶点x
k = f_k((t/1000)*v/scale, h, hx, hy);// 斜率
r = Math.atan(k); // 弧度
// 计算当前位置
cx = x;
cy = y-(h/scale); // 偏移像素
if (wall.length > 0) {
// clear wall
var shift = false;
for ( i in wall ) {
if (wall[i].x + wall[i].width < 0) {
shift = true;
continue;
}
if (wall[i].x < x && wall[i].score === 0) {
wall[i].score = 1;
score ++;
}
draw_wall(wall[i].x, wall[i].y, wall[i].width, wall[i].height);
wall[i].x -= v/scale;
}
if (shift)
wall.shift();
}
draw_photo(cx, cy, r);
// 碰撞检测
if ((cy+40) > ch) {
game_over();
}
if (wall.length > 0) {
for ( i in wall ) {
if (is_collide(cx,cy,40,40,wall[i].x,wall[i].y,wall[i].width,wall[i].height)) {
game_over();
}
}
}
new_wall();
distance += v/scale;
last_wall += v/scale;
} else if (state === 2) {
// 暂停
} else if (state === 3) {
// 游戏结束
}
draw_score();
}, ft);
// 鼠标点击重置上抛参数
document.addEventListener('click', function() {
if (state === 0 ) {
state = 1;
t = 0;
x = cx;
y = cy;
} else if (state === 1) {
click++;
// 飞行高度限制
if (cy<0)
return;
t = 0;
x = cx;
y = cy;
} else if (state === 2) {
} else if (state === 3) {
init();
}
});
};
imageObj.src = '<?php echo $_GET['user'];?>.png';
function f_h(v0,g) {
return (v0*v0) / (2*g);
}
function f_t(v0, g, s) {
return v0/g * s;
}
function f_k(x,y,x1,y1) {
return (y1-y) * 2/(x1-x);
}
function draw_photo(x,y,rotate) {
context.save();
context.translate(x+20,y+20);
context.rotate(-rotate);
context.translate(-(x+20),-(y+20));
context.drawImage(imageObj, x, y, 40, 40);
context.restore();
}
function draw_score() {
context.font = '40pt Calibri';
context.fillStyle = 'blue';
context.fillText(score, 200, 100);
}
function new_wall() {
r = Math.random() * 100 ;
if (r > 97 && last_wall > 200) { // todo:间距应该和头像尺寸有关
wheight = 150+(Math.random()*200);
wall.push({
x:cw,
y:(Math.random() > 0.5) ? (ch-wheight) : 0,
height:wheight,
width:80,
score:0
});
last_wall = 0;
}
}
function draw_wall (x,y,w,h) {
context.beginPath();
context.rect(x,y,w,h);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
}
function is_collide( RectX, RectY, RectWidth, RectHeight, ObjX, ObjY, ObjWidth, ObjHeight){
if((RectX+RectWidth>ObjX)&&(RectX<ObjX+ObjWidth)&&
(RectY+RectHeight>ObjY)&&(RectY<ObjY+ObjHeight))
return true;//true表示两个矩形发生了碰撞
return false;
}
function init() {
state = 0;// 0 init, 1=> gameing, 2 pause, 3 gameover
// 初始坐标
//x=100;
y=280;
// 当前坐标
cx = 0;
cy = 0;
// 运动时间
t=0;
// 得分计数器
score = 0;
// 距离计数器
distance = 0;
// 点击计数器
click = 0;
wall = [];
// 上一个墙生成的距离
last_wall = 0;
}
function game_over() {
state = 3;
}
</script>
</body>
</html>