just trying to implement collisions in my game.

Im having a problem with how the tiles are tested for collisions and therefore the collisions aren't working.

I have an array that looks like this:

var coll_array = [
[[tile_index],[x],[y]]
]

The tile index is the number of the tile in the image map im using, x is the x position and y is the y position of the tile.

Basically if tile_index isn't 0 then the player should collide into this tile, this is what i am trying to achieve.

Please see update for code example

for some reason the variable collided keeps returning false although i'm not sure why, but i believe it something to do with the way i have my array set up.

Any help would be much appreciated. I have a live version of the game here

username = guest

password = guest.

Please use a new game so you can see the correct console.log

I have put a console log of the array as it comes into the player function so you can see how its set up.

Thankyou

UPDATE

Ok so after some more playing around the code now looks like this:

function Player()
{
  var sprite = new Sprite(),
   collision_array,
   collided,
   x,
   y,
   w = sprite.width,
   h = sprite.height,
   gameW = canvas.width,
   gameH = canvas.height-192,
block_x,
    block_y,
    block_cx,
    block_cy,
    combined_hw = 32,
    combined_hh = 32,
   player_cx,
   player_cy;

this.keys = [];
// What delay do we want to use between switching sprites (in milliseconds)
this.moveSpeed = 4;
this.player = null;

this.init = function(coll_data){
    collision_array = coll_data;
    console.log(collision_array);
};

this.init_Player = function(pos_X, pos_Y){
  this.player = sprite.load("player");
   x = pos_X;
   y = pos_Y;
};

this.update = function(elapsed) {
    // perform a switch statement on the last key pushed into the array
    // this allows us to always move the direction of the most recently pressed
    // key

    switch (this.keys[this.keys.length - 1])
    {
        case 37:
            // move the player left on the screen
            x -= this.moveSpeed * elapsed;
            break;
        case 38:
            // move the player up on the screen
            y -= this.moveSpeed * elapsed;
            break;
        case 39:
            // move the player right on the screen
            x += this.moveSpeed * elapsed;
            break;
        case 40:
            // move the player down on the screen
            y += this.moveSpeed * elapsed;
            break;
    }
    if (x < 0)
    {
        x = 0;
    }
    if (x >= gameW - w)
    {
        x = gameW - w;
    }
    if (y < 0)
    {
        y = 0;
    }
    if (y >= gameH - h)
    {
        y = gameH - h;
    }

    player_cx = x+(32/2);
    player_cy = y+(32/2);

    collision_array.forEach(function(row) {
        for(var i = 0; i<row.length;i++){
            if(row[i][0] != 0){
                block_x = row[i][1];
                block_y = row[i][2];
                block_cx = block_x+(32/2);
                block_cy = block_y+(32/2);

            }

        }
        collided = Math.abs(player_cx - block_cx)< combined_hw
            && Math.abs(player_cy - block_cy)< combined_hh;
    });

    if(collided)
    {
        console.log("COLLIDED!")
    }
    return {
        'pos_X':x,
        'pos_Y':y
    };
};

this.draw = function() {
    ctx.drawImage(this.player,x, y, w ,h);
};
}

This works but it only works on the last position stored in the array e.g. the bottom right corner, can you see where im going wrong guys?

I only read through this quickly but you say it only works on the last block perhaps you should try.

 collided |= Math.abs(player_cx - block_cx)< combined_hw
            && Math.abs(player_cy - block_cy)< combined_hh;

ORing collided so that it will be true if any block is colliding.

more