<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *margin{padding:0;margin:0;} body{background:black;} #box1{width:600px;height:600px;background:white; margin:20px auto;} span{background:white;} </style> <script> window.onload = function(){ var oC = document.getElementById('cl'); var oGc = oC.getContext('2d'); var yImage = new Image(); yImage.src = 'person.png'; var iRotate = 0; yImage.onload = function(){ setInterval(function(){ oGc.clearRect(0,0,oC.width,oC.height); oGc.beginPath(); oGc.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false); oGc.stroke(); oGc.beginPath(); oGc.arc(250,200,150,180*Math.PI/180,0,false); oGc.stroke(); oGc.beginPath(); oGc.arc(400,200,20,0,360*Math.PI/180,false); oGc.closePath(); oGc.stroke(); for(var i=0;i<ball.length;i++){ oGc.beginPath(); //oGc.moveTo(ball[i].x,ball[i].y); oGc.arc(ball[i].x,ball[i].y,20,0,360*Math.PI/180,false); oGc.closePath(); oGc.fill(); } oGc.save(); oGc.translate(300,200); oGc.rotate(180*Math.PI/180); oGc.rotate(iRotate); oGc.translate(-40,-40); oGc.drawImage(yImage,0,0); oGc.restore(); for(var i=0;i<bullet.length;i++){ oGc.save(); oGc.beginPath(); oGc.fillStyle = 'red'; oGc.moveTo(bullet[i].x,bullet[i].y); oGc.arc(bullet[i].x,bullet[i].y,20,0,360*Math.PI/180,false); oGc.closePath(); oGc.fill(); oGc.restore(); } oGc.save(); oGc.font = '60px impact'; oGc.textBaseline = 'top'; oGc.fillStyle = 'red'; oGc.shadowOffsetX = 10; oGc.shadowOffsetY = 10; oGc.shadowColor = 'green'; oGc.shadowBlur = 5; var w = oGc.measureText('简易祖玛').width; oGc.fillText('简易祖玛',(oC.width-w)/2,450); oGc.restore(); },1000/60); //这个刷新1000/60最好 } var ball = []; setInterval(function(){ var ballData = { x:300, y:0, r:200, startX:300, startY:0, num:0 }; ball.push(ballData); },500); setInterval(function(){ for(var i=0;i<ball.length;i++){ ball[i].num++; if(ball[i].num == 270){ ball[i].r = 150; ball[i].startX = 250; ball[i].startY = 50; } if(ball[i].num == 270+180){ alert("游戏结束！"); window.location.reload(); } ball[i].x = Math.sin(ball[i].num*Math.PI/180)*ball[i].r+ball[i].startX; ball[i].y = ball[i].r-Math.cos(ball[i].num*Math.PI/180)*ball[i].r+ball[i].startY; } for(var i=0;i<bullet.length;i++){ bullet[i].x += bullet[i].sX; bullet[i].y += bullet[i].sY; } for(var i=0;i<ball.length;i++){ for(var j=0;j<bullet.length;j++){ if(crash(ball[i].x,ball[i].y,bullet[j].x,bullet[j].y)){ ball.splice(i,1); bullet.splice(j,1); break; } } } },30); oC.onmousemove = function(ev){ var ev = ev || event; var disX = ev.clientX - oC.offsetLeft; var disY = ev.clientY - oC.offsetTop; var a = disX-300; var b = disY-200; var c = Math.sqrt(a*a+b*b); if(a > 0 && b >0){ //右上 iRotate = Math.asin(b/c)+90*Math.PI/180; }else if(a > 0 ){ //右下 iRotate = Math.asin(a/c); } if(a < 0 && b > 0){ //左下 iRotate = -(Math.asin(b/c)+90*Math.PI/180); }else if(a < 0 ){ //左上 iRotate = Math.asin(a/c); } }; var bullet = []; oC.onmousedown = function(ev){ var ev = ev || event; var disX = ev.clientX - oC.offsetLeft; var disY = ev.clientY - oC.offsetTop; var a = disX-300; var b = disY-200; var c = Math.sqrt(a*a+b*b); var speed = 5; var spX = speed*a/c; var spY = speed*b/c; bullet.push({ x:300, y:200, sX:spX, sY:spY }); }; function crash(x1,y1,x2,y2){ var x = x1-x2; var y = y1-y2; var c = Math.sqrt(x*x+y*y); if(c <40){ return true; }else{ return false; } } }; </script> </head> <body> <div id="box1"> <canvas id="cl" width="600" height="600"> <span>浏览器不支持canvas</span> </canvas> </div> </body> </html>