Question

我是javascript的新手，我无法弄清楚代码哪里出了问题。我想我知道代码在哪里坏了，但我不确定。

我认为这是问题所在：

if (testCollisionTile(tileList[key],bulletList[key]))

上面写着bulletList[key]

的地方

运行页面时，它显示“无法读取未定义的属性'x'”

var canv = document.getElementById("ctx");
var ctx =  canv.getContext('2d');
canv.setAttribute("height", "500px");
canv.setAttribute("width", "500px");
ctx.font = "20px verdana";
canv.style.border = "2px solid #000000";
// var space = new Image();
// space.src = "images/space.jpg";
canv.style.backgroundImage = "url('images/space.jpg')";
var numOfTiles, tileList, score, bulletList, timer, isPaused;
var WIDTH = 500;
var HEIGHT = 500;

 var tile = {
    height:10,
    width:30,
    color: 'red'
 };

 var base = {
    x:150,
    y:400,
    height: 20,
    width: 30,
    color: 'orange',
    pressingLeft:false,
    pressingRight:false,
    //lives:3,
 };

 var bullet = {
    height: 20,
    width: 2,
    color: 'white',
    spdX: -5,
    spdY: -5
 };

 document.onkeydown = (event) => {
    if (event.keyCode ==37) {
        base.pressingLeft = true;
        base.pressingRight =false;
    }
    else if (event.keyCode ==39) {
        base.pressingLeft = false;
        base.pressingRight =true;
    }

    if (event.keyCode ==88) {

        if (isPaused) {
            isPaused = false;
        }

        else  {
        isPaused = true;
        }
 }
 };

 document.onkeyup = (event) => {
    if (event.keyCode ==37) {
        base.pressingLeft = false;
    }
    else if (event.keyCode ==39) {

        base.pressingRight =false;
    }
 };


 drawTile = (t,i) => {
    ctx.save();
    ctx.fillStyle = tile.color;
    ctx.fillRect(t.x,t.y,tile.width,tile.height);
    ctx.restore();
};

drawBase = () => {
    ctx.save();
    ctx.fillStyle = base.color;
    ctx.fillRect(base.x,base.y,base.width,base.height);
    ctx.restore();

};

drawBullet = (b, i) => {
    ctx.save();
    ctx.fillStyle = bullet.color;
    ctx.fillRect(b.x,b.y,bullet.width,bullet.height);
    ctx.restore();

};


updateBasePosition = () => {
if (base.pressingLeft) {
    base.x = base.x - 5;
}
else if (base.pressingRight) {
    base.x = base.x + 5;
}
if (base.x < 0) {
    base.x = 0;
}
if (base.x > WIDTH-base.width) {
    base.x = WIDTH-base.width;
}
};

updateBullets = () => {
    for (key in bulletList) {
        bulletList[key].y -=10;
    } 
}

testCollisionTile = function(tile, bullet) {

    return ( (tile.x <= bullet.x + bullet.width) &&
             (bullet.x <= tile.x + tile.width) &&
             (tile.y <= bullet.y + bullet.height) &&
             (bullet.y <= tikeye.y + tile.height) );
     console.log('hello');
}
update = () => {
    if (!isPaused) {
    ctx.clearRect(0,0, WIDTH, HEIGHT);
    drawBase();
    if (timer % 200 == 0) {     
        var bX = base.x+15;
        var bY = base.y;
        bulletList.push({x:bX,y:bY});
    };

    tileList.forEach(drawTile);

    bulletList.forEach(drawBullet);
    //console.log('hello');

     for (key in tileList) {
        if (testCollisionTile(tileList[key],bulletList[key])) {

        //  console.log('hello');
            delete tileList[key];

        // console.log('hello');

        }
    }

    updateBasePosition();   
    updateBullets();
    timer += 10;
}else {
    ctx.fillText('Game Over', 200,250);
}
};
startGame = () => {
numOfTiles = 0;
var tileX = 5;
var tileY = 150;
tileList=[];
bulletList=[];
tileX = 10;
    for(var j=1;j<=9;j++){
        tileList[numOfTiles] = {x:tileX,y:tileY};
        numOfTiles++;
        tileX += 55;
    }
timer = 0;
isPaused = false;
intervalVar = setInterval(update, 40);

};

startGame();

 <canvas id="ctx" />

Answer 1

您的错误在这里：

 for (key in tileList) {
    if (testCollisionTile( tileList[key], bulletList[key] )) {

您假设数组tileList和bulletList具有相同数量的键，但是它们不相同，因此您必须在testCollisionTile中进行验证或确保它们在开始for循环之前，具有相同数量的项目

再三考虑，我认为您应该将每个图块与每个项目符号进行比较：

for (tkey in tileList) {
    for (bkey in bulletList) {
        if (testCollisionTile( tileList[tkey], bulletList[bkey] )) {
            delete tileList[tkey];
        }
    }
}

这是您的代码上的一个小旋转，我使用了大多数代码，但是我确实更改了许多要点
http://heldersepu.github.io/hs-scripts/HTML/canvasCollisions.html

我无法使碰撞起作用

1 个答案: