What is causing this issue with my array...?

Question

I am making a game for my computing class and the objective of the game is for the player to move around the grid and collect all of the passengers in the game and deliver them to the base before they run out of power. I have managed almost everything else except for when I try to check whether the player moves over a passenger. My latest fiddle: http://jsfiddle.net/nZ8vA/13/ is as far as I have tried in getting it to detect the passengers. In the fiddle it seems as if it is working (as it detects the p) however if you continue to move around the grid and then go back it will detect other random squares as being passengers even though they do not have a letter assigned to them.

My new array (that I am struggling to figure out how to get to work properly):

var map = [
    [{ color: "g", letter: "" }, 
     { color: "g", letter: "" }, 
     { color: "w", letter: "P" }, 
     { color: "w", letter: ""  }],

    [{ color: "w", letter: "" }],

    [{ color: "w", letter: "" }],

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

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

I am really struggling in trying to get this to work, if anyone knows why this is not working then that would be great.

My old fiddle (before I started attempting to detect the passengers) contains the old array I had, and the full grid layout: http://jsfiddle.net/nZ8vA/7/

Is this question any different than your previous? http://stackoverflow.com/questions/22785774/whats-wrong-with-this-array — Kevin B, Apr 01 '14 at 15:30
You cannot have arrays like this. Cant you pass json? It would be much much more easier. — pj013, Apr 01 '14 at 15:31
@KevinB yes as I have fixed some issues that were there since that question was created, and if I asked this as a comment in that question, I would be told to create a new question. — user3481788, Apr 01 '14 at 15:32
He has an array of arrays that each contain objects. i don't see anything wrong with that. The formatting makes it difficult to see. — Kevin B, Apr 01 '14 at 15:32
You don't seem to be doing anything when you hit a passenger other than alert. I don't see the point. Where does the *"issue"* begin to happen? — Kevin B, Apr 01 '14 at 15:36
`var position = $('#player').position();` is where i suspect the issue is originating. — Kevin B, Apr 01 '14 at 15:42
The issue is that I have only applied the letter P to that third white square on the first row. If you move around, then go back up it will detect other random squares as being passengers even though they aren't. — user3481788, Apr 01 '14 at 15:45
Every time you move to the right twice, the square that acts as the passenger moves to the right once. — Kevin B, Apr 01 '14 at 15:49
It's in the third column where the "P" square is, something triggers all of the squares going down as passengers. If you move around then go back it should happen. It's odd... — user3481788, Apr 01 '14 at 15:49
figure out logically what causes it. Finding the pattern was step one. — Kevin B, Apr 01 '14 at 15:51
Might be easier to just re-calculate the position based on the player element's position after moving it. — Kevin B, Apr 01 '14 at 15:53
Here's an example. Simplifying the code abit (removing all the math) makes it work: http://jsfiddle.net/nZ8vA/16/ though it doesn't completely work because it doesn't take into account hitting the last column. — Kevin B, Apr 01 '14 at 15:54
Hmm, that's odd, why would removing the math suddenly make it work? :/ Also if you go down and don't collect the passenger it detects it on others in that column... :/ — user3481788, Apr 01 '14 at 16:00
Because you're not calculating the player position properly. My simplified version worked because i was simply adding `1` to the position. — Kevin B, Apr 01 '14 at 16:04
I think you're way over-complicating things, you shouldn't need to do anything more than simply +1 or -1 on the position, ensuring that it never goes below 0 or above 9 (assuming a 10x10 grid) — Kevin B, Apr 01 '14 at 16:06
On your simplified version, when you go down from the passenger's direction it will still detect squares in that column being passengers when they aren't :/ — user3481788, Apr 01 '14 at 16:09
Biggest issue seems to be that you define a grid pattern but then float all the resulting DOM elements left. So what the user sees is not a reflection of the original pattern. — Roamer-1888, Apr 06 '14 at 02:28

Kevin B · Answer 1 · 2014-04-01T16:20:09.453

Your first array only has four entries, therefore when you do

playerPos[0] = Math.min(map[0].length - 1, playerPos[0] + 1);

to move right, the playerPos[0] never gets above 3.

then, when you start to move left, it starts to decrement immediately, causing your position to be off (it even goes into the negative).

I don't fully understand the structure of your array, but hopefully the above is enough to explain what is happening. Basically, without changing the structure of your array, you can't use map[0].length - 1 to get the number of columns. Here's an example using a set value for both moving right and down. http://jsfiddle.net/nZ8vA/17/

There's also a ton of js errors occuring due to the fact that the array doesn't fully match the grid (the first row in the array only has 4 entries, while the grid has 10 columns.)

score 0 · Accepted Answer · answered Apr 01 '14 at 16:50

0

Well, you have two problems. First, your map array is wrong. You want two rows, 10 columns. So, you should have outer brackets, then 2 sets of inner brackets, each with 10 curly bracket cells.

Also, you were able to move your character outside the game area because of the way you set your CSS before you put the constraints on your position.

Do the constraint (min or max) and then set the CSS based on position value.

// this is for left.. do the same for right, up, down 
// use appropriate playerPos index and css 'left' or 'top'
playerPos[0] = Math.max(0, playerPos[0] - 1);
$('#player').css('left', (playerPos[0] * 50 + 15) + 'px');

This fiddle seems to work: http://jsfiddle.net/nZ8vA/18/

answered Apr 01 '14 at 16:50

doog abides

2,270
16
13

Yes, that works thank you. If I wanted to add more rows to the grid would I just extend the array? – user3481788 Apr 01 '14 at 17:27
Yes, just add another inner set of square brackets for the row with 10 curly bracket cells inside. You can do that for however many rows you need. – doog abides Apr 01 '14 at 17:39
I see, quickly before I go, do you know why it is displaying a "P" in the third row when there isn't one in the letter? http://jsfiddle.net/nZ8vA/19/ – user3481788 Apr 01 '14 at 17:44
Yeah. Because you left `$('#grid .box:eq(27)').append('
P
');` You need to take all those out. Try some more on your own and see how far you can get. Good luck. – doog abides Apr 01 '14 at 18:35

What is causing this issue with my array...?

2 Answers2

P