I can not make my collision work

Question

I am new at javascript and I cannot work out where I am going wrong with the code. I think I know where the code is broken but I am not sure.

I think this is where the issue is:

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

where it says bulletList[key]

When I run the page it says "Cannot read property 'x' of undefined"

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

Your bug is here:

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

You are assuming that the arrays tileList and bulletList have the same amount of keys, but they do not, you have to validate for that in the testCollisionTile or make sure they do have the same amount of items before you start the for loop

---

On a second thought I think you should be comparing every tile with every bullet:

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

---

Here is a spin on your code I'm using most of your code but I did change many key points
http://heldersepu.github.io/hs-scripts/HTML/canvasCollisions.html