您的位置：首页 > 其它
canvas制作简易祖玛游戏

2017-06-14 16:34 197 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width:600px;
margin: 30px auto;
}
body{
background: #000;
}
#canvas{
background: #fff;
}
</style>
</head>
<body>
<div id="box">
<canvas id="canvas" width="600" height="600"></canvas>
</div>

</body>
<script type="text/javascript">
var c = document.getElementById("canvas");
var oc= c.getContext("2d");
var oImg = new Image();
oImg.src = "img/person.png";
oImg.onload = function(){

//小球绘制和运动准备参数
var bull=[];
//  bull[0]={
//      x:300,
//      y:0,
//      startX:300,
//      startY:0,
//      deg:0,
//      r:200
//  }
//生成多个小球，上面的就可以不要了
setInterval(function(){
bull.push({
x:300,
y:0,
startX:300,
startY:0,
deg:0,
r:200
})
},400);

//绘制子弹（红球）
var bullet=[];
c.onclick = function(e){
var e = e||event;
var x = e.clientX - this.offsetLeft;
var y = e.clientY - this.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a*a+b*b);
var speed = 5;
var xs = speed*a/c;
var ys = speed*b/c;
console.log(xs);
console.log(ys);
bullet.push({
x:300,
y:200,
x2:xs,
y2:ys
})
};

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;
}

}

//小球运动
setInterval(function(){
for(var i=0;i<bull.length;i++){
bull[i].deg++;
//当珠子到达270deg的时候变轨
if(bull[i].deg==270){
bull[i].r = 150;
bull[i].startX = 250;
bull[i].startY = 50;
}
//当珠子到小洞的时候，游戏结束
if(bull[i].deg==270+180){
alert("游戏结束");
window.location.reload();

4000
}
var a = bull[i].r*Math.sin(bull[i].deg*Math.PI/180);
var b = bull[i].r*Math.cos(bull[i].deg*Math.PI/180);
bull[i].x = bull[i].startX + a;
bull[i].y = bull[i].r - b +  bull[i].startY;
}

//让红色子弹运动
for(var i=0;i<bullet.length;i++){
bullet[i].x = bullet[i].x + bullet[i].x2;
bullet[i].y = bullet[i].y + bullet[i].y2;
}

//检测碰撞的话就删除碰撞
for(var i=0;i<bull.length;i++){
for(var j=0;j<bullet.length;j++){
if(pz(bull[i].x,bull[i].y,bullet[j].x,bullet[j].y)){
bull.splice(i,1);
bullet.splice(j,1);
break;
}
}
}

},30)

setInterval(function(){
oc.clearRect(0,0,c.width,c.height);
//绘制大道 2个半圆
//  3/4的圆
oc.beginPath();
oc.arc(300,200,200,-90*Math.PI/180,180*Math.PI/180,false);
oc.stroke();

//1/2的圆
oc.beginPath();
oc.arc(250,200,150,180*Math.PI/180,360*Math.PI/180,false);
oc.stroke();

//画小洞
oc.beginPath();
oc.arc(400,200,20,0,2*Math.PI,false);
oc.stroke();

//画小黑球
for(var i=0;i<bull.length;i++){
oc.beginPath();
oc.arc(bull[i].x,bull[i].y,20,0,2*Math.PI,false);
oc.closePath();
oc.fill();
}

//绘制青蛙
oc.save();
oc.beginPath();
oc.translate(300,200);
oc.rotate(iround);
oc.translate(-40,-40);
oc.drawImage(oImg,0,0);
oc.restore();

//绘制子弹
for(var i=0;i<bullet.length;i++){
oc.save();
oc.fillStyle='red';
oc.beginPath();
oc.arc(bullet[i].x, bullet[i].y,20,0,2*Math.PI,false);
oc.closePath();
oc.fill();
oc.restore();
}

//绘制文字
oc.save();
oc.font = "60px 宋体";
oc.textBaseline = "top";
oc.fillStyle = "red";
oc.shadowBlur = 2;
oc.shadowOffsetX = 5;
oc.shadowOffsetY = 5;
oc.shadowColor = "#d8d8d8";
var w = oc.measureText('简易祖玛').width;
oc.fillText('简易祖玛',(c.width - w)/2,450);
oc.restore();
},30);

//青蛙跟着鼠标动
var iround = 0;
c.onmousemove = function(e){
var e = e||event;
var x1 = e.clientX - this.offsetLeft;
var y1 = e.clientY - this.offsetTop;

var a = x1 - 300;
var b = y1 - 200;
var c = Math.sqrt(a*a+b*b);
//第四项限
if(a>0 && b>0){
iround = Math.asin(b/c) + 90*Math.PI/180;
}
//第一项限
else if(a>0 && b<0){
iround = Math.asin(a/c);
}
//第三项限
if(a<0 && b>0){
iround = -(Math.asin(b/c) + 90*Math.PI/180);
}
//第二项限
else if(a<0 && b<0){
iround=Math.asin(a/c);
}
}

};

</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航