我试图制作一个简单的射手,但我在探测射击与敌人(蓝球)之间的碰撞时遇到了一些问题。我尝试了几件事,但我无法弄清楚
有人可以帮我吗?
var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var tileldig = Math.floor((Math.random() * 300) + 1);
var tekst = document.getElementById("tekst")
var kuler = [
{r: 10, x: canvas.width/2, y: canvas.height-100, f: "red", dy:0},
//{r: 50, x: tileldig, y: 50, vx:0 , vy: 3, f: "green"},
]
var fiender = [
{r: 20, x: tileldig, y: -20, vx:0 , vy: 1, },
]
/*var skudder = [
{r: 10, x:0+kuler.x, y: 0+kuler.y, f: "black"},
]*/
function spill() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < kuler.length; i++) {
kuler[i].x += 0;
kuler[i].y += kuler[i].dy;
ctx.fillStyle = kuler[i].f;
ctx.beginPath();
ctx.arc(kuler[i].x, kuler[i].y, kuler[i].r, 2*Math.PI, 0);
ctx.closePath();
ctx.fill();
if (kuler[0].x >= canvas.width-kuler[0].r) {
kuler[0].x = canvas.width-kuler[0].r
};
if (kuler[0].x <= 0+kuler[0].r) {
kuler[0].x = 0+kuler[0].r
};
if (kuler[0].y >= canvas.height-kuler[0].r) {
kuler[0].y = canvas.height-kuler[0].r
};
if (kuler[0].y <= 0+kuler[0].r) {
kuler[0].y = 0+kuler[0].r
};
for (var j = 0; j < fiender.length; j++) {
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(fiender[j].x, fiender[j].y, fiender[j].r, 2*Math.PI, 0);
ctx.closePath();
ctx.fill();
fiender[j].y += fiender[j].vy;
if (fiender[j].y >= canvas.height) {
fiender.splice(j,1);
console.log("ute");
};
if (fiender[j].y + fiender[j].r >= kuler[i].y && fiender[j].x + fiender[j].r == kuler[i].x) { // remove kuler[i] and fiender[j] }
fiender.splice(j, 1);
kuler.splice(i,1);
};
if(j > 1){
fiender.splice(j,1)
}
}
}
document.onkeydown = function tast (e) {
switch (e.keyCode) {
case 37:
kuler[0].x -= 10;
break;
case 39:
kuler[0].x += 10;
break;
case 38:
kuler[0].y -= 10;
break;
case 40:
kuler[0].y += 10;
break;
case 32:
newskudd()
console.log("hit space")
break;
}
};
requestAnimationFrame(spill);
}
function newskudd () {
var nyttskudd =
{x:kuler[0].x, y:kuler[0].y, r:5, dy:-5, f:"black"};
kuler.push(nyttskudd);
};
setInterval(
function(){
fiender.push({r: 20, x: Math.floor((Math.random() * 300) + 1), y: -20, vx:0 , vy: 1, f: "green"});
}, 1000);
spill();
/*for (var i = 0; i < kuler.length; i++) {
for (var j = 0; j < fiender.length; j++) {
if (kuler[i].y >= fiender[j].y) { // remove kuler[i] and fiender[j] }
};
}*/
/*if (circles.x >= canvas.height- circles.r){
circles.splice(i,1);
}*/
如果您想观看演示,请点击链接:DEMO
答案 0 :(得分:0)
您的条件应如下所示:
var distanceFromCenters = Math.sqrt(Math.pow(Math.abs(fiender[j].x - kuler[i].x),2) + Math.pow(Math.abs(fiender[j].y - kuler[i].y),2 );
if (distanceFromCenters <= (fiender[j].r + kuler[i].r)) {
// you have a collision