<html>
<head>
<meta charset="UTF-8">
<title>祖玛游戏lowB版title>
<style>
* {
margin: 0;
padding: 0;
}
#cv {
width: 600px;
margin: 10px auto;
}
#box {
background: #fff;
}
body {
background: #000;
}
style>
head>
<body>
<div id="cv">
<canvas id="box" width="600" height="600">canvas>*Math
div>
body>
<script>
var oBox = document.getElementById('box');
var oc = oBox.getContext('2d');
var oImg = new Image();
var num = 0;
oImg.src = 'person.png';
oImg.onload = function() {
var bull = [];
bull[0] = {
x: 300,
y: 0,
r: 200,
deg: 0,
istartx: 300,
istarty: 0
}
setInterval(function() {
bull.push({
x: 300,
y: 0,
r: 200,
deg: 0,
istartx: 300,
istarty: 0
});
}, 400);
var bullet = [];
oBox.onclick = function(ev) {
var ev = ev || window.event;
var x = ev.clientX - oBox.offsetLeft;
var y = ev.clientY - oBox.offsetTop;
var a = x - 300;
var b = y - 200;
var c = Math.sqrt(a * a + b * b);
var speed = 5;
var x2 = speed * a / c;
var y2 = speed * b / c;
bullet.push({
x: 300,
y: 200,
x2: x2,
y2: y2,
});
}
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++;
if (bull[i].deg == 270) {
bull[i].r = 150;
bull[i].istartx = 250;
bull[i].istarty = 50;
}
if (bull[i].deg == 270 + 180) {
alert('game over!');
window.location.reload();
}
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 = a + bull[i].istartx;
bull[i].y = bull[i].r - b + bull[i].istarty;
}
for(var i=0;i
for(var i=0;ifor(var j=0;jif(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, oBox.width, oBox.height);
oc.beginPath();
oc.arc(300, 200, 200, -90 * Math.PI / 180, 180 * Math.PI / 180, false);
oc.stroke();
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 * Math.PI / 180, 360 * Math.PI / 180, false);
oc.stroke();
for (var i = 0; i < bull.length; i++) {
oc.beginPath();
oc.arc(bull[i].x, bull[i].y, 20, 0 * Math.PI / 180, 360 * Math.PI / 180, 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.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, 0 * Math.PI / 180, 360 * Math.PI / 180, false);
oc.closePath();
oc.fill();
oc.restore();
};
}, 30);
var iround = 0;
oBox.onmousemove = function(ev) {
var ev = ev || window.event;
var x1 = ev.clientX - oBox.offsetLeft;
var y1 = ev.clientY - oBox.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>
