您的位置：首页 > 其它

Canvas实例-简易祖玛

2016-06-29 21:39 337 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航