Canvas实例-简易祖玛

来源：互联网发布：做幻灯片的软件编辑：程序博客网时间：2024/05/04 00:55

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
*{margin:0;padding:0;}
body{background:black;}
#div1{background:white;width:600px;margin:20px auto;}
</style>
<script>
window.onload=function(){
var oC=document.getElementById('c1');
var oGc=oC.getContext("2d");
var i=0;
//canvas引入图片
var yImg=new Image();
yImg.src="person.png";
yImg.onload=function(){

setInterval(function(){
oGc.clearRect(0, 0, oC.width, oC.height);
//画圆
oGc.beginPath();
//弧度=角度*Math.PI/180
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,360*Math.PI/180,false);
oGc.stroke();

oGc.beginPath();
oGc.arc(400,200,20,0*Math.PI/180,360*Math.PI/180,false);
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*Math.PI/180,360*Math.PI/180);
oGc.fill();
}

//图片独立空间
oGc.save();
oGc.translate(300, 200);
// oGc.rotate(i++*Math.PI/180);
oGc.rotate(iRotate);
//以中心点进行旋转
oGc.translate(-40,-40);
oGc.drawImage(yImg,0, 0);
oGc.restore();

//生成小球

for(var i=0;i<bullet.length;i++){
oGc.save();
oGc.fillStyle='red';
oGc.beginPath();
oGc.moveTo(bullet[i].x, bullet[i].y);
oGc.arc(bullet[i].x, bullet[i].y,20,0*Math.PI/180,360*Math.PI/180);
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;
var h = 60;
oGc.fillText('简易祖玛', (oC.width - w)/2 , 450 );
oGc.restore();


}, 1000/60);

//用于园运动的定时器
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].x+bullet[i].sX;
bullet[i].y=bullet[i].y+bullet[i].sY;
}

//每次循环子弹
for(var i=0;i<bullet.length;i++)
{
//循环每次小球
for(var j=0;j<ball.length;j++)
{
if(pz(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y))
{
//对应数组删除
bullet.splice(i,1);
ball.splice(j,1);
break;
}

}

}
//
}, 30);

var ball=[];
// ball[0]={
// x:300,
// y:0,
// r:200,
// num:0,
// startX:300,
// startY:0
// };


//控制球的个数定时器
setInterval(function(){
ball.push({
x:300,
y:0,
r:200,
num:0,
startX:300,
startY:0
})

}, 350);

var iRotate=0;
oC.onmousemove=function(){
var ev=ev||window.event;
var x=ev.clientX-oC.offsetLeft;
var y=ev.clientY-oC.offsetTop;
var a=x-300;
var b=y-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);
}
//左下
else 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()
{
var ev=ev||window.event;
var x=ev.clientX-oC.offsetLeft;
var y=ev.clientY-oC.offsetTop;
var a=x-300;
var b=y-200;
var c=Math.sqrt(a*a+b*b);
//将速度分解成X速度和Y速度
var speed=5;
var sX=speed*a/c;
var sY=speed*b/c;
bullet.push({
x:300,
y:200,
sX:sX,
sY:sY
})
}

}
//碰撞检测:距离小于两小球中心点的距离
function pz(x1,y1,x2,y2)
{
var a=x1-x2;
var b=y1-y2;
var c=Math.sqrt(a*a+b*b);
if(c<40)
{
return true;
}
else
{
return false;
}
}

}
</script>
</head>
<body>
<div id="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
</body>
</html>

0 0