How can I improve the collision detection in this vanilla JS TileMap game?

Question

I am creating a simple JS canvas tile based game, I know it needs refactoring and updating of the syntax which I plan to do when I understand more about what is going on.

I have created the tile sizes dynamically which I think is why I am struggling. The collision detection isn't precise, and I am stumped as to making it more precise... By precise, I mean depending on the size of the display the collision is not hitting the right wall but just before it or after it for example.

Any help/advice, or pointing in the right direction, would be greatly appreciated.

this.moveUp = function(){
    if(this.y > gameCanvas.height / 8){
        this.y -= 7;
    }
};

this.moveDown = function(){
    if(this.y < gameCanvas.height - map.tSizeY * 1.5){
        this.y += 7;
    }
    
};

this.moveLeft = function(){
    if(this.x > gameCanvas.width / 8){
        this.x -= 7;
    }
};

this.moveRight = function(){
    if(this.x < gameCanvas.width - map.tSizeX * 1.25){
        this.x += 7;
    }
}

Github Repo: https://github.com/MrWalshy/jsLameTileGame

Seems like you should round the division calculations and compare integer thresholds only. — Niloct, Feb 12 '20 at 20:32

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Set the players position touching the wall boundary rather than move the position by an arbitrary amount to an unknown position relative to the wall.

You also need to include the size of the player in the calculations.

I will assume that map.tSizeX and map.tSizeY are the tile sizes and that the player moves by a amount called this.speed (which I have added in example) and that the player has a size this.sizeX, this.sizeY (which I have also added in the example below)

Example

Move the player then resolve the collisions

// assuming x,y is player top left

this.sizeX = 7;    // size of player
this.sizeY = 7;

this.speed = 4;    // speed of player any value will do

this.move = function(moveX, moveY) {
    const left = map.tSizeX;
    const top =  map.tSizeY;
    const right = gameCanvas.width - map.tSizeX - this.sizeX;   // Includes player size
    const bottom = gameCanvas.height - map.tSizeY - this.sizeY; // Includes player size

    this.x += moveX;
    this.y += moveY;

    if (this.x < left) { this.x = left }
    else if (this.x > right) { this.x = right }

    if (this.y < top) { this.y = top }
    else if (this.y > bottom) { this.y = bottom }
}

// Best would be to call this.move from the location you call the following functions. 
// eg where you have the call this.moveUp() replace with this.move(0, -this.speed);
// these are just here to make it compatible with any existing code.
this.moveUp = function() { this.move(0, -this.speed) }
this.moveDown = function() { this.move(0, this.speed) }
this.moveLeft = function() { this.move(-this.speed, 0) }
this.moveRight = function() { this.move(this.speed, 0) }

Many thanks! This actually makes a lot more sense then what I was doing haha. I just implemented the code above, works flawlessly. :D I removed the moveUp, moveDown, etc... functions. When I call 'move()', I have to reference 'newPlayer.speed' instead of 'this.speed'. Is this an error or just how it has to be? — Morgan Walsh, Feb 13 '20 at 16:31
@MorganWalsh How and where you define the speed is up to you, it is your style not an error. An error in JS is throw-able, stops execution, and will appear in dev-tools -> console (F12 to open dev tools on most browsers) — Blindman67, Feb 13 '20 at 18:19

How can I improve the collision detection in this vanilla JS TileMap game?

1 Answers1

Example