Как я могу улучшить обнаружение столкновений в этой ванильной игре JS TileMap?

Question

Я создаю простую JS игру на основе холстовой плитки, и я знаю, что она требует рефакторинга и обновления синтаксиса, который я планирую делать, когда узнаю больше о происходящем.

Я создал размеры плитки динамически, что я думаю, поэтому я борюсь. Обнаружение столкновений не точное, и я поставлен в тупик, чтобы сделать его более точным ... Под точным я подразумеваю, в зависимости от размера дисплея, столкновение не касается правой стены, а непосредственно перед ним или, например, после него. ,

Буду очень признателен за любую помощь / совет или указание в правильном направлении.

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: https://github.com/MrWalshy/jsLameTileGame

Answer 1

Установите позицию игрока, касающуюся границы стены, а не перемещайте позицию на произвольную величину в неизвестную позицию относительно стены.

Вам также необходимо включить размер игрока в расчеты.

Я буду считать, что map.tSizeX и map.tSizeY - это размеры плиток и что игрок перемещается на величину, называемую this.speed (которую я добавил в качестве примера), и что у игрока есть размер this.sizeX , this.sizeY (который я также добавил в приведенном ниже примере)

Пример

Переместите игрока, затем разрешите столкновения

// 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) }