javascript - 如何获取 x 和 y 值来检测 html5 Canvas 中两个图像之间的碰撞？

Question

我正在尝试使两个图像发生碰撞(一个是名为figBola的炮弹，另一个是名为figSprite的气球)，我遇到的问题是，当我在a.x，a.y和b.x，b.y中总是得到0值时使用警报()；在我的碰撞函数中，当我应该获得两个图像在那一刻等于 x 和 y 的位置时。我的图像宽度和高度都正确返回。这是我到目前为止所尝试过的(碰撞代码位于底部):

function iniciar(){

    elemento =  document.getElementById("area");
    lienzo = elemento.getContext("2d");
    figSprite = new Image();
    figSprite.src = "ballon.png";
    figBola = new Image();
    figBola.src = "bola.png";
    figCanon = new Image();
    figCanon.src = "cañon.png";

    //mostrar imagen en canvas
    dibujar_sprite(450,20);
    dibujar_bolita(50,20);
    dibujar_canon(0,20);
    incremento=true;

    xcanon = 0;
    ycanon = 20;
    inccanon = 0;
    inccanon1 = 2;
    //variables de posicion
    xs = 450;
    ys = 20;
    incy = 3;
    intervalo = 25; //miliseg, num veces = 1000/25 = 40
    //definicion del intervalo
    repeticion=undefined;
    xbolita = -50;
    ybolita = -20;
    incx=3;
    disparar=true;
    window.addEventListener("keypress", mover, false);
}

function animacion(){
    lienzo.clearRect(0, 0, 500, 500);
    if(incremento===true && ys < 430)
    {
        ys+=incy;
        dibujar_sprite(xs, ys);

        if(ys+incy > 430)
            incremento = false;
    }

    if(incremento===false && ys > 20)
    {
        ys-=incy;
        dibujar_sprite(xs, ys);

        if(ys-incy <= 20)
            incremento = true;
    }

    ycanon+= inccanon;

    if(ycanon < 20 || ycanon > 450)
    {
        inccanon=0;
    }

    xbolita+= incx;
    dibujar_bolita(xbolita, ybolita);
    dibujar_canon(xcanon, ycanon);

    collision(figSprite, figBola);
}

function btnStart_click(){
    repeticion = setInterval(animacion, intervalo);
    document.getElementById("stop").disabled = false;
    document.getElementById("start").disabled = true;
}

function btnStop_click(){
    clearInterval(repeticion);
    document.getElementById("stop").disabled = true;
    document.getElementById("start").disabled = false;
}

function btnUp_click(){
    inccanon = -2; 
}

function btnDown_click(){
    inccanon = +2;
}

function btnShoot_click(){
    xbolita = 20;
    ybolita = ycanon;
}
//draw images
function dibujar_sprite(x,y){
    lienzo.drawImage(figSprite, x, y);
}

function dibujar_bolita(x,y){
    lienzo.drawImage(figBola, x, y);
}

function dibujar_canon(x,y){
    lienzo.drawImage(figCanon, x, y);
}

function mover(e){
    valor = e.keyCode;

    if(valor === 38)
        ycanon -= inccanon1;

    if(valor === 40)
        ycanon += inccanon1;

    inccanon=0;
}

我将图像作为变量传递的碰撞代码:

function collision(a, b){
    if(a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y)
    {
        alert(a.x);
        alert(a.y);
        alert(b.x);
        alert(b.y);
    }
}

Answer 1

好的，这就是您的问题:Image 对象没有 x 和 y 属性，但它有 width 和高度。因此，当您尝试访问 collision 函数中的 x 和 y 属性时，它们会显示为 undefined .

看起来您已经将每个对象的坐标存储在变量中(xcanon、ycanon 等)，因此这些可以用作您的附加参数collision 函数，但是，这可能不是您最好的选择。您还可以定义每个 Image 对象的 x 和 y 属性，但是，我认为需要进行一些重构这里是你最好的选择。尝试为您正在使用的每个项目创建一个自定义 JavaScript 对象:

function GameItem (image, x, y, width, height) {
    this.image = image;
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}

var spriteImage = new Image();
spriteImage.src = "ballon.png";
sprite = new GameItem(spriteImage, 450, 20, spriteImage.width, spriteImage.height);

// etc.

// collision method now works between two of these objects:
collision(sprite, bola);

如果您使用此代码，请务必更新您的抽屉 - 呃...dibujar方法。 :)

PS:抱歉，我的西类牙语 JavaScript 阅读能力还没有达到巅峰。