您的位置：首页 > Web前端 > HTML5
h5 canvas 简易祖玛游戏

2017-06-14 16:42 281 查看
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>祖玛游戏</title>
<style type="text/css">
body{
background: #000;
}
.canvas{
width: 600px;
height: 600px;
margin: 10px auto;
border: 1px solid red;
}
canvas{
background: #fff;
}
</style>
</head>
<body>
<div class="canvas">
<canvas id="box" width="600" height="600">

</canvas>
</div>
</body>
<script type="text/javascript">
var box=document.getElementById('box');
var oc=box.getContext('2d');

var a=-0.5*Math.PI;
var b=1*Math.PI;

var dia;

var diy;
var dix;
var bull=[];

var iround=0;
box.onmousemove=function(e){
var x2=e.clientX-box.offsetLeft;
var y2=e.clientY-box.offsetTop;
console.log("x2="+x2)
console.log("y2="+y2)
var a1=x2-300;
var b1=y2-250;
var c1=Math.sqrt(a1*a1+b1*b1);
console.log("c1="+c1)
if (a1>0&&b1>0) {
iround=Math.asin(b1/c1)+0.5*Math.PI;
}else if (a1>0) {
iround=Math.asin(a1/c1);
}
if(a1<0&&b1>0){
iround=-(Math.asin(b1/c1)+0.5*Math.PI);
}else if(a1<0){
iround=Math.asin(a1/c1);
}
console.log(iround)
}

var img=new Image();
img.src='img/person.png'
img.onload=function(){
tab()
}

//生成子弹
var bullet=[];
box.onclick=function(e){
var x3=e.clientX-this.offsetLeft;
var y3=e.clientY-this.offsetTop;
var a3=x3-300;
var b3=y3-250;
var c3=Math.sqrt(a3*a3+b3*b3);

var speed=5;

var xs=speed*a3/c3;
var ys=speed*b3/c3;

bullet.push({
x:300,
y:250,
xs:xs,
ys:ys
});
}

function pz(x1,y1,x2,y2){
var disx=x1-x2;
var disy=y1-y2;
var c=Math.sqrt(disx*disx+disy*disy)
if (c<40) {
return true;
} else{
return false;
}
}

function tab(){
var timer1=setInterval(function(){
bull.push({
x:300,
y:0,
na:-0.5*Math.PI
});
},400);

var timer2=setInterval(function(){

//          console.log(na)
for (var i=0;i<bull.length;i++) {
bull[i].na+=1*Math.PI/180;
if (bull[i].na>2*Math.PI) {
//              bull[i].na=a;
alert('再来一次');
clearInterval(timer1);
clearInterval(timer2);
clearInterval(timer3);
}
if (bull[i].na<1*Math.PI) {
dia=bull[i].na-a;
bull[i].y=250-250*Math.cos(dia);
bull[i].x=250*Math.sin(dia)+300;
} else{
dia=bull[i].na-b;
bull[i].x=175-175*Math.cos(dia)+50;
bull[i].y=250-175*Math.sin(dia);
}
}

for (var i=0;i<bullet.length;i++) {
bullet[i].x=bullet[i].x+bullet[i].xs;
bullet[i].y=bullet[i].y+bullet[i].ys;
}

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

var timer3=setInterval(function(){
oc.clearRect(0,0,box.width,box.height);
//          oc.clearRect(0,0,box.width,box.height);
oc.beginPath();
oc.arc(300,250,250,-90*Math.PI/180,180*Math.PI/180,false);
oc.stroke();

oc.beginPath();
oc.arc(225,250,175,1*Math.PI,2*Math.PI,false);
oc.stroke();

oc.beginPath();
oc.arc(400,250,20,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,2*Math.PI,false);
oc.closePath();
oc.fill();
}

//          绘制青蛙
oc.save();
oc.translate(300,250);
oc.beginPath();
oc.rotate(iround);
oc.translate(-40,-40);
oc.drawImage(img,0,0)
oc.closePath();
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,2*Math.PI,false);
oc.closePath();
oc.stroke();
oc.fill();
oc.restore();
}

//绘制文字
oc.save();
oc.font='60px impact';
oc.textBaseline='top';
oc.fillStyle='red';
oc.shadowOffsetX=10;
oc.shadowOffsetY=10;
oc.shadowColor='green';
oc.shadowBlur=5;
var w=oc.measureText('祖玛游戏').width;
var h=60;
oc.fillText('祖玛游戏',(box.width-w)/2,450);
oc.restore();
},1000/24);

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