<!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>
