0

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");
      }
    }
user3481788
  • 161
  • 10
  • Perhaps detail how to play? – mplungjan Apr 01 '14 at 12:26
  • The player moves around the grid and the green squares represent grassland, brown is rock and white is ice. Depending on the user settings on a previous page the power will deduct differently. The power won't deduct in the fiddle as there is PHP involved. All I need help with is trying to detect when the user moves over a grid with a passenger inside. – user3481788 Apr 01 '14 at 12:30
  • Check out my answer here: http://stackoverflow.com/questions/19661108/detect-element-if-over-another-element-via-using-css3-transform/19661605#19661605 – damian Apr 01 '14 at 12:30

2 Answers2

0

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: ""
            }
        ]];
Rodrigo Siqueira
  • 1,164
  • 8
  • 20
  • Thanks that works, although do you know why it is detecting a passenger on the boxs beneath the white box containing the "P" (the same column)? http://jsfiddle.net/nZ8vA/10/ – user3481788 Apr 01 '14 at 14:18
0

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: ""
                    }
                ]
system7
  • 130
  • 1
  • 8