Остановка движения игрока после обнаружения столкновения на холсте

Question

В основном я сделал две стены на холсте. Один сверху и один внизу. Мой игрок контролируется MOUSE, и я хотел знать, как заставить игрока не проходить через стены.

Вот функция для общего столкновения между двумя объектами:

function collides(a, b) { 
    var val = false; 

    val = (a.x < b.x + b.width) && 
    (a.x + a.width > b.x) && 
    (a.y < b.y + b.height) && 
    (a.y + a.height > b.y); 

    return val;   
} 

Вот код, который определяет обнаружение столкновений:

if (collides(player, block)){ 
    //I don't know what goes here. 
} 

Любая помощь будет оценена.

Answer 1

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

В обработчике MouseMove (или там, где игрок приложена с помощью мыши):

// reposition the player as you already do 
... 

// and clamp the player to stay below the top wall 
if(player.y < wall.y+wall.height){ player.y = wall.y+wall.height); 

// and clamp the player to stay above the bottom wall 
if(player.y+player.height > wall.y){ player.y = wall.y-player.height);