Situation with Collision Detection in 2D array-built tile map.

Question

I have a problem with a script of mine. What I have is a tiled map made using a 2 dimensional array that specifies different tile types with different numbers and is drawn in a container div element. I also have a character div element that is movable. My problem is I can't figure out how to detect tiles and utilize the result of said detection in order to determine whether a character can move into nearby tiles or not.

The associated site that I have this hosted on is as follows;

http://brandynssite.webs.com/map_tile.html

As you can see with that example there is a container that draws the tiled map, a character element that starts at 0,0, and there are two buttons that check for character position and tile type. What I want to have happen is for the code to detect the tile the character is traveling to after a keypress event has happened and move their if possible. What functions would I need for this and is their a specific set of algorithms I would need for something as simple as what I have on that site?

I have provided one of the functions that allows the character to move as it seems to be the most related function in regards to possible collision detection that I can think of.

function anim(e) {

if(e.keyCode==39){
        character_left += 10;
        x += 1;
        playerPos=mapArray[y][x];


        character.style.left = character_left + "px";
        if(character_left >= 190){ 
            character_left -= 10;
            x -= 1;
            playerPos=mapArray[y][x];

            }
        }
if(e.keyCode==37){
        character_left -= 10;
        x -= 1;
        playerPos=mapArray[y][x];
        character.style.left = character_left + "px";
        if(character_left <= 0){
            character_left += 10;
            x += 1;
            playerPos=mapArray[y][x];
            }   

        }
if(e.keyCode==40){
        character_top += 10;
        y += 1;
        playerPos=mapArray[y][x];

        character.style.top = character_top + "px";
        if(character_top >= 190){
            character_top -= 10;
            y -= 1;
            playerPos=mapArray[y][x];
            }
        }
if(e.keyCode==38){
        character_top -= 10;
        y -= 1;
        playerPos=mapArray[y][x];

        character.style.top = character_top + "px";
        if(character_top <= 0){
            character_top += 10;
            y += 1;
            playerPos=mapArray[y][x];

            }
        }
}

I don't know if I understand your question: you want to check if player can move/you want to detect collsions? — Piotrek, Jan 11 '14 at 09:47
mapArray is a two dimensional array that contains several numbers in them. Each number indicates a specific type of tile to be placed by jQuery code. — user3079304, Jan 11 '14 at 09:56

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

You need to create array where you specify on which tiles player can move. So:

var iCanMoveOn = [0, 2, 5];

And than you need to check if tile that is next to you is the one you can move on.

if(iCanMoveOn.indexOf(mapArray[y][x+1]) > -1){
    //move player
}

x and y are coordinates where in array is a tile you are stading on. To check if you can step into the tile, you need to add or suntract "1" from one of coordinates. So:

[x+1] is tile on the right. Similarly: tile on the left is [x-1], tile on top: [y-1], bottom tile: [y+1]

To check if number is in array I used this

edited May 23 '17 at 10:29

Community

1
1

answered Jan 11 '14 at 10:05

Piotrek

10,919
18
73
136

Thanks! With your little piece of advice I tinkered with it a bit more and got the effect I wanted! – user3079304 Jan 12 '14 at 01:24

Situation with Collision Detection in 2D array-built tile map.

1 Answers1