Question

我试图让两个图像碰撞（一个是一个叫做figBola的炮弹，另一个是一个叫做figSprite的气球），我的问题是我总是在ax，ay和bx中得到0值，当时使用alert（）;在我的碰撞函数中，我应该在那个等于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;
}

碰撞代码，我将图像作为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);
    }
}

Answer 1

好的，这是您的问题：Image对象没有x和y属性，但它确实有width和{ {1}}。因此，当您尝试访问height函数中的x和y属性时，它们会显示为collision。

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

Image

如果您使用此代码，请务必更新您的绘图 - dibujar 方法。：）

PS：对不起，但是我的西班牙语 - JavaScript阅读技巧还没有达到顶峰。

如何获取我的x和y值来检测html5画布中两个图像之间的碰撞？

1 个答案: