<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1 {
width: 600px;
height: 600px;
background: #f7fcfc;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="div1">
<canvas id="c1" width="600" height="600"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("c1");
var ctx = canvas.getContext('2d');
var yImg = new Image();
yImg.src = 'img/siteRotate.png';
yImg.onload = function() {
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(300, 200, 200, -90 * Math.PI / 180, 180 * Math.PI / 180, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(250, 200, 150, 180 * Math.PI / 180, 360 * Math.PI / 180, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(400, 200, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
ctx.stroke();
for(var i = 0; i < ball.length; i++) {
ctx.beginPath();
ctx.moveTo(ball[i].x, ball[i].y);
ctx.arc(ball[i].x, ball[i].y, 18, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
ctx.fill();
}
ctx.save();
ctx.translate(300,200);
ctx.rotate(iRotate);
ctx.translate(-50,-50);
ctx.drawImage(yImg,0,0);
ctx.restore();
for(var i = 0; i < bullet.length; i++) {
ctx.save();
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.moveTo(bullet[i].x, bullet[i].y);
ctx.arc(bullet[i].x, bullet[i].y, 18, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
ctx.fill();
ctx.restore();
}
// ctx.save();
// ctx.font = '60px impact';
// ctx.textBaseline = 'top';
// ctx.fillStyle = 'red';
// ctx.shadowOffsetX = 10;
// ctx.shadowOffsetY = 10;
// ctx.shadowColor = 'green';
// ctx.shadowBlur = 5;
// var w = ctx.measureText('简易祖玛').width;
// var h = 60;
// ctx.fillText('简易祖玛',(canvas.width - w)/2 , 450);
// ctx.restore();
}, 1000 / 60);
setInterval(function() {
for(var i = 0; i < ball.length; i++) {
ball[i].angle++;
if(ball[i].angle == 270) {
ball[i].r = 150;
ball[i].startX = 250;
ball[i].startY = 50;
}
if(ball[i].angle == 450) {
alert('游戏结束');
window.location.reload();
}
ball[i].x = Math.sin(ball[i].angle * Math.PI / 180) * ball[i].r + ball[i].startX;
ball[i].y = ball[i].r - Math.cos(ball[i].angle * 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( knock(bullet[i].x,bullet[i].y,ball[j].x,ball[j].y)){
bullet.splice(i,1);
ball.splice(j,1);
break;
}
}
}
}, 30);
var ball = []; //小球进洞
setInterval(function() {
ball.push({
x: 300,
y: 0,
r: 200,
startX: 300,
startY: 0,
angle: 0
})
}, 500)
var iRotate = 0; //中心旋转
canvas.onmousemove = function (ev){
var ev = ev || window.event;
var x = ev.clientX - canvas.offsetLeft;
var y = ev.clientY - canvas.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);
}
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 = []; //子弹发射
canvas.onmousedown = function (ev){
var ev = ev || window.event;
var x = ev.clientX - canvas.offsetLeft;
var y = ev.clientY - canvas.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a*a + b*b);
var speed = 5;
var sX = speed * a/c;
var sY = speed * b/c;
bullet.push({
x: 300,
y: 200,
sX: sX,
sY: sY
})
}
function knock(x1,y1,x2,y2){ //碰撞检测
var a = x1 - x2;
var b = y1 - y2;
var c = Math.sqrt(a*a + b*b);
if( c < 36){
return true;
}else{
return false;
}
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号