我试图让两个图像碰撞(一个是一个叫做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);
}
}
答案 0 :(得分:3)
好的,这是您的问题:Image
对象没有x
和y
属性,但它确实有width
和{ {1}}。因此,当您尝试访问height
函数中的x
和y
属性时,它们会显示为collision
。
看起来你已经将每个对象的坐标存储在变量中(undefined
,xcanon
等),因此可以将它们用作ycanon
函数中的附加参数但是,这可能不是你最好的选择。您可以定义每个collision
对象的x
和y
属性,但是,我认为在这里进行一些重构是最好的选择。尝试为您正在使用的每个项目创建自定义JavaScript对象:
Image
如果您使用此代码,请务必更新您的绘图 - dibujar 方法。 :)
PS:对不起,但是我的西班牙语 - JavaScript阅读技巧还没有达到顶峰。