0
\$\begingroup\$

I have a very basic collision detection working, but not quite there yet. Now as I understand I'm only checking against the left top corner of the character for collision detection. And it only works if I move character to the left. If I move to the right, the collision is not being detected. How can I check for all the sides of the character for collision and not only left top? Let's say my character sprite size is 36px.

var mapArray = [
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 3, 3, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 3, 3, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
];

function isPositionWall(ptX, ptY) {
  var gridX = Math.floor(ptX / 36);
  var gridY = Math.floor(ptY / 36);
  if(mapArray[gridY][gridX] != 0) {
    return true;
  }
}

if(isPositionWall(boatPosX, boatPosY)) {
    boatPosX = oldPosY;
    console.log("collision");
  }
\$\endgroup\$
  • \$\begingroup\$ Why are you setting boatPosX to the previous vertical position? Is the statement incomplete, or am I getting it wrong? \$\endgroup\$ – liggiorgio Jun 2 '18 at 20:59
  • \$\begingroup\$ there is an excellent tutorial for collision detection in a tile based game from the creator of the game "N" found here in case your collision demands rise over time in complexity. \$\endgroup\$ – ScrambledRK Oct 5 '18 at 4:29
1
\$\begingroup\$

The simplest way possible to perform a collision detection is checking the next position an object should move to: if there is a free place, move it, if there is a wall, don't move it, etc. Simple implementation:

// get tile at position
function getTileAt(x, y) {
    var gridX = Math.floor(x / 36);
    var gridY = Math.floor(y / 36);
    return mapArray[gridY][gridX];
}

// check if the place we want to move an object to is free
function isTileFree(x, y) {
    return getTileAt(x, y) == 0;
}

// x, y are relative coordinates
function move(x, y) {
    if (isTileFree(boatPosX + x, boatPosY + y)
    {
        boatPosX += x;
        boatPosY += y;
    }
}
\$\endgroup\$
  • \$\begingroup\$ Thanks for the answer. Can you give me an example with real numbers? Because you say check the place we want to move to and it takes x, y. What those x, y are supposed to be? Why not just check against right upcoming array like so mapArray[gridY][gridX + 1]? \$\endgroup\$ – Limpuls May 30 '18 at 9:57
  • \$\begingroup\$ The idea seems to be that the move-function receives the direction in form of the x- and y-difference between the old and the new position. Providing these values would be the responsibility of the calling code. And by the way: I also think the function shouldn't be called move but rather tryMove and return true or false depending on whether it worked or not. \$\endgroup\$ – Philipp Dec 10 '18 at 15:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.