Javascript html5碰撞检测与移动播放器的角度

我有我的玩家对象和碰撞对象

var player = new Object();
player = {
x: window.innerWidth/2,
y: window.innerHeight/2,
width: 30,
height: 59,
aimAngle: 0,
speed: 5,
color: 'red',
};

var collision_object = new Object();
collision_object = {
x: 1080,
y: window.innerHeight/2+100,
width: 50,
height: 100,
color: 'yellow'
};

我用x，y坐标定义玩家和鼠标之间的距离

var mouseX;
var mouseY;
function handleMouseMovePlayer(e) {
mouseX = e.clientX - document.getElementById('canvas').getBoundingClientRect().left;
mouseY = e.clientY - document.getElementById('canvas').getBoundingClientRect().top;
mouseX -= player.x;
mouseY -= player.y;
mouseX = mouseX - player.width/2;
mouseY = mouseY - player.height/2;
}
$("#canvas").mousemove(function(e){handleMouseMovePlayer(e);});

我用这个公式移动玩家

// search the angle
player.aimAngle = Math.atan2(mouseX,mouseY) / Math.PI * 180;

// function for making player move
function move_player() {
player.x+=Math.sin(player.aimAngle/180*Math.PI) * player.speed;
player.y+=Math.cos(player.aimAngle/180*Math.PI) * player.speed;
}

当onmouse down时，我将名为mousedown的变量提升为1，这个函数创建move\u player函数的间隔，使其移动，并在鼠标未按下时清除间隔，使播放器停止

// on MOUSE DAWN EVENT
if (mouseDown==0) {
    document.body.onmousedown = function() {
        mouseDown++;
        if (mouseDown==1) {
            intervalID = setInterval(move_player,40);
        }
    };
}

我尝试了很多不同的碰撞类型，但都没有帮助。例如，这个if语句正确地检查了player和碰撞对象之间的碰撞，但我不知道应该键入什么代码使player停止（但不清除间隔）

if（player.x碰撞对象.x&&
player.ycollision\u object.y）{
//我在试这个
player.speed=1；
player.x-=1；
player.y-=1；
//这个
player.x=碰撞\对象.x-player.width；
}

---

但是上面提到的所有变体仅适用于一侧x或y。如果我为双方编写代码（从左到右和从右到左到碰撞对象），代码只生成+1-1逻辑，不进行任何可视化操作。

我可以建议使用外部碰撞检测库吗？我最近写了这篇文章，但老实说，有很多很棒的lib可以选择（比如sat.js），没有理由自己实现它。除非出于教育目的：）我可以建议使用外部碰撞检测库吗？我最近写了这篇文章，但老实说，有很多很棒的lib可以选择（比如sat.js），没有理由自己实现它。除非出于教育目的：

if (player.x < collision_object.x + collision_object.width &&
player.x + player.width > collision_object.x &&
player.y < collision_object.y + collision_object.height &&
player.y + player.height > collision_object.y) {
// I WAS TRYING THIS
player.speed = 1;
player.x-=1;
player.y-=1;
// this
player.x = collision_object.x - player.width;
}