如何获取x和y值来检测html5 canvas中两个图像之间的冲突?

I am trying to make two images collide (one is a cannonball called figBola and the other a ballon called figSprite), the problem I have is that I always get a value of 0 in both a.x, a.y and b.x, b.y when using alert(); in my colliding function when I am supposed to get the position of both images in that moment which equal x and y. Both of my images width and height are returned correctly. This is what I have tried so far (the colision code is at the bottom):

我试着让两个图像发生碰撞(一个是一个叫figBola的炮弹，另一个是一个叫做figSprite的气球)，我的问题是我总是在a中得到一个0的值。x,a。y,b。x、b。y当使用alert();在我的碰撞函数中，当我得到两个图像的位置时，它等于x和y，我的图像的宽度和高度都被正确地返回。这是我迄今为止尝试过的(colision代码在底部):

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

collision code where i am passing images as varibles:

冲突代码，我将图像作为变量传递:

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

1 个解决方案

#1

OK, here's your problem: an Image object doesn't have x and y properties, but it does have width and height. Thus, when you try to access the x and y properties in your collision function, they come up as undefined.

你的问题是:一个图像对象没有x和y属性，但是它有宽度和高度。因此，当你试图访问碰撞函数中的x和y属性时，它们是未定义的。

It looks like you have the coordinates of each object stored in variables already (xcanon, ycanon, etc.), so those can be used as additional arguments in your collision function, however, this may not be your best bet. You could also define x and y properties of each Image object, however, I think a bit of refactoring is your best bet here. Try creating a custom JavaScript object for each item you're working with:

看起来您已经将每个对象的坐标存储在变量中(xcanon、ycanon等)，因此这些可以用作冲突函数中的附加参数，但是，这可能不是您的最佳选择。您也可以定义每个图像对象的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);

If you use this code, be sure to update your draw-- er... dibujar methods. :)

如果你使用这段代码，一定要更新你的绘制——呃…dibujar方法。:)

PS: Sorry, but my Spanish-JavaScript reading skills aren't in their prime.

PS:对不起，我的西班牙语- javascript阅读能力还不太好。

#1