1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
6 <meta name="apple-mobile-web-app-capable" content="yes">
7 <meta name="apple-mobile-web-app-status-bar-style" content="black">
8 <title>document</title>
9 <style>
10 *{
11 padding:0;
12 margin:0;
13 }
14 body{
15 background: #000;
16 text-align: center;
17 }
18 canvas{
19 background: url(img/game_bg_2_hd.jpg) no-repeat;
20 }
21 </style>
22 <script>
23 //资源
24 var aImg=[
25 'fish1',
26 'fish2',
27 'fish3',
28 'fish4',
29 'fish5',
30 'bottom',
31 'cannon1',
32 'cannon2',
33 'cannon3',
34 'cannon4',
35 'cannon5',
36 'cannon6',
37 'cannon7',
38 'bullet',
39 'coinAni1',
40 'coinAni2'
41 ];
42 //公共函数
43
44 var json={
45 /*'fish1':oImg,
46 'fish2':oImg*/
47 }; //放的是 图片对象
48
49 function d2a(n){
50 return n*Math.PI/180;
51 }
52 function a2d(n){
53 return n*180/Math.PI;
54 }
55
56 function rnd(n,m){
57 return parseInt(Math.random()*(m-n))+n;
58 }
59
60 function loadImage(arr,fn){
61 var inow=0; //计数 加载完成图片的个数
62 for(var i=0; i<arr.length; i++){
63 var oImg=new Image();
64 (function(index){
65 oImg.onload=function(){
66 inow++;
67 //存图片对象
68 json[arr[index]]=this;
69 //判断所有图片是否加载完成
70 if(inow==arr.length){
71 fn && fn();
72 }
73 }
74 })(i);
75 oImg.src='img/'+arr[i]+'.png';
76 }
77 }
78 //鱼
79 var FISH_SIZE=[
80 null,
81 {w: 55, h: 37, collR: 17},
82 {w: 78, h: 64, collR: 24},
83 {w: 72, h: 56, collR: 20},
84 {w: 77, h: 59, collR: 22},
85 {w: 107, h: 122, collR: 29}
86 ];
87 function Fish(num){
88 this.num=num;
89 this.x=0;
90 this.y=0;
91 this.speed=1;
92 this.rotate=0;
93 this.inow=0;
94 this.collR=FISH_SIZE[num].collR;
95
96 this.move();
97 }
98 Fish.prototype.draw=function(gd){
99 var h=FISH_SIZE[this.num].h;
100 var w=FISH_SIZE[this.num].w;
101 gd.save();
102 gd.translate(this.x,this.y);
103 gd.rotate(d2a(this.rotate));
104 //根据角度，修改阴影位置
105 if(this.rotate>=135 && this.rotate<225){
106 gd.scale(1,-1);
107 }
108 gd.drawImage(json[aImg[this.num-1]],0,this.inow%4*h,w,h,0,0,w,h);
109 gd.restore();
110 };
111
112 Fish.prototype.move=function(){
113 var _this=this;
114
115 setInterval(function (){
116 var speedX=Math.cos(d2a(_this.rotate))*_this.speed;
117 var speedY=Math.sin(d2a(_this.rotate))*_this.speed;
118 //鱼动
119 _this.x+=speedX;
120 _this.y+=speedY;
121 }, 30)
122 //鱼摆尾
123 setInterval(function(){
124 _this.inow++;
125 }, 200)
126 };
127
128 Fish.prototype.catch=function(x,y){
129 var fx=this.x+30;
130 var fy=this.y+30;
131
132 var c=Math.sqrt((x-fx)*(x-fx)+(y-fy)*(y-fy));
133
134 if(c<this.collR){
135 return true;
136 }else{
137 return false;
138 }
139 };
140 //炮台
141 function Bottom(){
142 this.x=0;
143 this.y=530;
144 }
145 Bottom.prototype.draw=function(gd){
146 gd.save();
147 gd.drawImage(json.bottom,0,0,765,70,this.x,this.y,765,70);
148 gd.restore();
149 };
150 //炮
151 var CANNON_SIZE=[
152 null,
153 {w: 74, h: 74},
154 {w: 74, h: 76},
155 {w: 74, h: 76},
156 {w: 74, h: 83},
157 {w: 74, h: 85},
158 {w: 74, h: 90},
159 {w: 74, h: 94}
160 ];
161 function Cannon(num){
162 this.num=num;
163 this.x=424;
164 this.y=560;
165 this.inow=0;
166 this.timer=null;
167 this.rotate=0;
168 }
169
170 Cannon.prototype.draw=function(gd){
171 var w=CANNON_SIZE[this.num].w;
172 var h=CANNON_SIZE[this.num].h;
173 gd.save();
174 gd.translate(this.x,this.y);
175 gd.rotate(d2a(this.rotate));
176 gd.drawImage(json['cannon'+this.num],0,this.inow%5*h,w,h,-w/2,-h/2,w,h);
177
178 gd.restore();
179 };
180 Cannon.prototype.fire=function(){
181 var _this=this;
182 clearInterval(this.timer);
183 this.timer=setInterval(function(){
184 _this.inow++;
185 if(_this.inow==6){
186 _this.inow=0;
187 clearInterval(_this.timer)
188 }
189 },60)
190 };
191 //死鱼
192 function Diefish(num){
193 this.num=num;
194 this.x=0;
195 this.y=0;
196 this.rotate=0;
197 this.inow=0;
198 this.move();
199 }
200 Diefish.prototype.draw=function(gd){
201 var h=FISH_SIZE[this.num].h;
202 var w=FISH_SIZE[this.num].w;
203 gd.save();
204 gd.translate(this.x,this.y);
205 gd.rotate(d2a(this.rotate));
206 if(this.rotate>=135 && this.rotate<225){
207 gd.scale(1,-1);
208 }
209 gd.drawImage(json['fish'+this.num],0,4*h+this.inow%4*h,w,h,0,0,w,h);
210 gd.restore();
211 };
212 Diefish.prototype.move=function(gd){
213 var _this=this;
214 setInterval(function(){
215 _this.inow++;
216 }, 100)
217 }
218 //炮弹尺寸
219 var BULLET_SIZE=[
220 null,
221 {x: 86, y: 0, w: 24, h: 26},
222 {x: 62, y: 0, w: 25, h: 29},
223 {x: 30, y: 0, w: 31, h: 35},
224 {x: 32, y: 35, w: 27, h: 31},
225 {x: 30, y: 82, w: 29, h: 33},
226 {x: 0, y: 82, w: 30, h: 34},
227 {x: 0, y: 0, w: 30, h: 44}
228 ];
229 //炮弹
230 function Bullet(num){
231 this.num=num;
232 this.x=0;
233 this.y=0;
234 this.rotate=0;
235 this.speed=10;
236 this.move();
237 }
238 Bullet.prototype.draw=function(gd){
239 var x=BULLET_SIZE[this.num].x;
240 var y=BULLET_SIZE[this.num].y;
241 var h=BULLET_SIZE[this.num].h;
242 var w=BULLET_SIZE[this.num].w;
243 gd.save();
244 gd.translate(this.x,this.y);
245 gd.rotate(d2a(this.rotate));
246 gd.drawImage(json.bullet,x,y,w,h,-w/2,-h/2,w,h);
247 gd.restore();
248 }
249 Bullet.prototype.move=function(gd){
250 var _this=this;
251 setInterval(function(){
252 var speedX=Math.sin(d2a(_this.rotate))*_this.speed;
253 var speedY=Math.cos(d2a(_this.rotate))*_this.speed;
254 _this.x+=speedX;
255 _this.y-=speedY;
256 }, 30)
257 };
258 function Coin(num){
259 this.num=num;
260 this.x=0;
261 this.y=0;
262 this.inow=0;
263 this.speed=10;
264 this.rotate=0;
265 this.move();
266 }
267 Coin.prototype.draw=function(gd){
268 var fw=FISH_SIZE[this.num].w;
269 var fh=FISH_SIZE[this.num].h;
270 gd.save();
271 if(this.rotate>135 && this.rotate<225){
272 gd.translate(this.x-fw*3/4,this.y+fh/3);
273 }else{
274 gd.translate(this.x,this.y);
275 }
276 if(this.num<3){
277 gd.drawImage(json.coinAni1,0,this.inow%10*60,60,60,0,0,60,60);
278 }else{
279 gd.drawImage(json.coinAni2,0,this.inow%10*60,60,60,0,0,60,60);
280 }
281
282 gd.restore();
283 };
284 Coin.prototype.move=function(){
285 var _this=this;
286 this.rotate=
287 //金币转
288 setInterval(function(){
289 _this.inow++;
290 }, 30)
291 //金币移动
292 setInterval(function(){
293 _this.x+=(100-_this.x)/10;
294 _this.y+=(500-_this.y)/10;
295 },60)
296 }
297
298 window.onload=function(){
299 var c=document.getElementsByTagName('canvas')[0];
300 var gd=c.getContext('2d');
301 loadImage(aImg,function(){
302 var b=new Bottom();
303 var cannon=new Cannon(7);
304 //存放炮弹
305 var aBullet=[];
306 //存放鱼
307 var aFish=[];
308 //存放死鱼
309 var aDieFish=[];
310 //存放金币
311 var aCoin=[];
312 setInterval(function(){
313 //与出场
314 if(Math.random()<0.05){
315 var f=new Fish(rnd(1,6));
316 if(Math.random()>0.5){
317 f.x=900;
318 f.rotate=rnd(135,225);
319 }else{
320 f.x=-100;
321 f.rotate=rnd(-45,45);
322 }
323 f.y=rnd(100,500);
324
325 aFish.push(f);
326 }
327
328 gd.clearRect(0,0,c.width,c.height);
329 b.draw(gd);
330 //画鱼
331 for(var i=0; i<aFish.length; i++){
332 aFish[i].draw(gd);
333 }
334 //画死鱼
335 for(var i=0; i<aDieFish.length; i++){
336 aDieFish[i].draw(gd);
337 }
338 //画炮弹
339 for(var i=0; i<aBullet.length; i++){
340 aBullet[i].draw(gd);
341 }
342 //画金币
343 for(var i=0; i<aCoin.length; i++){
344 aCoin[i].draw(gd);
345 }
346 cannon.draw(gd);
347
348 //检测碰撞
349 for(var i=0; i<aFish.length; i++){
350 for(var j=0; j<aBullet.length; j++){
351 if(aFish[i].catch(aBullet[j].x,aBullet[j].y)){
352 var x=aFish[i].x;
353 var y=aFish[i].y;
354 var num=aFish[i].num;
355 var rotate=aFish[i].rotate;
356 //鱼死
357 aFish.splice(i,1);
358 i--;
359 //生成死鱼
360 var df=new Diefish(num);
361 df.x=x;
362 df.y=y;
363 df.rotate=rotate;
364 aDieFish.push(df);
365 //每个500ms,删除死鱼第一个
366 setTimeout(function(){
367 aDieFish.shift();
368 }, 500)
369
370 //子弹消失
371 aBullet.splice(j,1);
372 j--;
373
374 //生成金币
375 var coin=new Coin(num);
376 coin.x=x;
377 coin.y=y;
378 coin.rotate=rotate;
379 aCoin.push(coin);
380 }
381 }
382 }
383
384
385 //优化鱼
386 for(var i=0; i<aFish.length; i++){
387 if(aFish[i].x<-100 || aFish[i].x>900 || aFish[i].y<-40 || aFish[i].y>c.height+40){
388 aFish.splice(i,1);
389 i--;
390 }
391 }
392 //优化炮弹
393 for(var i=0; i<aBullet.length; i++){
394 if(aBullet[i].x<-100 || aBullet[i].x>900 || aBullet[i].y<-40 || aBullet[i].y>c.height+40){
395 aBullet.splice(i,1);
396 i--;
397 }
398 }
399 //优化金币
400 for(var i=0; i<aCoin.length; i++){
401 if(aCoin[i].x>=80 && aCoin[i].y>=480){
402 aCoin.splice(i,1);
403 i--;
404 }
405 }
406 }, 16)
407 c.onclick=function(ev){
408 //鼠标点击画布的坐标
409 var cX=ev.clientX-c.offsetLeft;
410 var cY=ev.clientY-c.offsetTop;
411 //炮的中心点
412 var x=424;
413 var y=560;
414 //炮旋转的角度
415 var d=Math.atan2(y-cY,x-cX);
416 cannon.rotate=a2d(d)-90;
417 cannon.fire();
418
419 var bullet=new Bullet(cannon.num);
420 bullet.x=cannon.x;
421 bullet.y=cannon.y;
422 bullet.rotate=cannon.rotate;
423
424 aBullet.push(bullet);
425 };
426 })
427 };
428 </script>
429 </head>
430 <body>
431 <canvas width="800" height="600"></canvas>
432 </body>
433 </html>
