这个数组怎么了...？

Question

I am making a game where a user moves around a grid and has to collect passengers. I have done almost everything except I need to check whether the player moves over a passenger and if so, display an alert box. Here is my JSFiddle: http://jsfiddle.net/nZ8vA/9/ and the previous: http://jsfiddle.net/nZ8vA/7/ which contains the array I had before. As you can see I have an array called map which is what is used to construct the grid.

In the previous JSFiddle I was still attempting to make it detect when the user collects a passenger (the letter "P" in the map). In my most recent JSFiddle I have created a 2d array of objects thanks to previous help on here. The map is not fully constructed, it should look like it is in the first JSFiddle, however it seems to read the whole line as being one colour. If you open your console and move the entire top row is read as green when it shouldn't. I also think it is reading the passengers by colour which is not what I intend as the passengers are on different colour squares.

Can someone help me detect when a user collects a passenger, I have a function which detects squares with the "P" but I need to keep the same grid colour layout. I hope this makes sense.

This is the function:

Old JSFiddle:

function checkPass(cell, row) {
    var pass = map[row][cell];
    console.log(pass);
    if (pass == "p") {
    alert("Passenger");
      }
    }

New JSFiddle:

function checkPass(cell, row) {
    var pass = map[row][cell].letter;
    console.log(pass);
    if (pass == "p") {
    alert("Passenger");
      }
    }

Answer 1

You have a 2x2 array

var map = [
        [
            {
                color: "g",
                letter: ""
            },
            {
                color: "g",
                letter: ""
            },
        ],[
            {
                color: "w",
                letter: "p"
            },
            {
                color: "b",
                letter: ""
            }
        ]];
map[0][1] = ...
map[1][1] = ...
map[1][0] = ...
map[1][1] = ...

and you are drawing a 4x1 block

your map code should look like this

var map = [
        [
            {
                color: "g",
                letter: ""
            },
            {
                color: "g",
                letter: ""
            },
            {
                color: "w",
                letter: "p"
            },
            {
                color: "b",
                letter: ""
            }
        ]];

Answer 2

The problem is with the array, because your grid has 1 row, but your array has 2 "row". With this it has been working for me:

    [
                    {
                        color: "g",
                        letter: ""
                    },
                    {
                        color: "g",
                        letter: ""
                    },
                    {
                        color: "w",
                        letter: "p"
                    },
                    {
                        color: "b",
                        letter: ""
                    }
                ]