Javascript 鼠标控制的玩家和障碍方块之间的冲突解决方案

我正在尝试制作一个具有碰撞检测和分辨率的游戏。出于某种原因，当我将玩家移动到“敌人方块”的右侧时，玩家将移动到“敌人方块”的左侧。我怎样才能解决这个问题？我已经为此工作了几个小时，找不到任何解决办法。我不确定这是一个小问题还是我必须改变整个敌人的目标

//声明变量
var body=document.getElementById（“body”）；
var canvas=document.getElementById（“canvas”）；
var iwidth=window.innerWidth；
var iheight=window.innerHeight；
//绘图变量
var draw=canvas.getContext（“2d”）；
//字符参数的变量
var playerwidth=20；
var playerheight=20；
变量playerx=iwidth/2-playerwidth/2；
var playery=iheight/2-playerheight/2；
var playerspeed=20；
//鼠标坐标
var mousex；
var mousey；
//敌人的参数
var enemyxpositions=[43,94200]；
var enemyypositions=[41,120,83]；
var-enemywidths=[12,43,45]；
var enemyheights=[43,11,87]；
var i=0；
var冲突=假；
///////////////////////////////////////////////////////////////////////////////////
///////将变量和代码的其余部分分离开来//
///////////////////////////////////////////////////////////////////////////////////
//将画布放在右上角
body.style.margin=“0”；
//更改画布的样式，即颜色、边距、宽度和高度
canvas.style.backgroundColor=“黑色”；
canvas.style.margin=“0”；
canvas.width=iwidth；
canvas.height=iheight；
//玩家被拉入的函数
函数drawplayer（）{
//允许动画
requestAnimationFrame（drawplayer）；
//每次函数运行时清除画布，以便图像不会留下标记
draw.clearRect（0，0，iwidth，iheight）；
//画球员
draw.fillStyle=“#ffffff00”；
draw.fillRect（playerx、playery、playerwidth、playerheight）；
draw.fill（）；
//检查鼠标的位置并让玩家跟随
如果（鼠标>播放器X+播放器宽度/2）{
playerx+=（mousex-playerx+playerwidth）/playerspeed；
}
如果（鼠标X播放+播放键/2）{
playery+=（鼠标-playery+playerheight）/playerspeed；
}
如果（鼠标this.enemyx&&
mousex-playerwidth/2this.enemyy&&
鼠标-播放高度/2this.enemyx）{
playerx=this.enemyx-playerwidth；
}
//右碰撞
else if（collision==true&&mousex-playerwidth/2

邓格
：-webkit滚动条{
显示：无；
}
帆布{
显示：块；
}
#障碍物{
不透明度：1；
利润上限：-100vh；
}

冲突解决是一个相当棘手的领域，您可以采取多种方法。对于使用鼠标控制的正方形（如您的情况），一种简单的方法可能如下所示：

如果检测到玩家与固定障碍物（敌人、墙壁等）之间发生碰撞，我们可以通过逐渐“撤消”玩家的运动直到不再与障碍物碰撞来解决碰撞

例如，如果在当前帧上，玩家以

y

速度5和

x

速度2移动，并且我们检测到碰撞，那么我们可以通过取消移动来避免碰撞。但是，这会在障碍物和玩家之间产生不现实的气隙，从而产生反弹效果。相反，我们可以将障碍物的

x

和

y

位置缓慢移动一个小值，如-0.5，直到未检测到碰撞。但是，如果只有一个轴发生碰撞，则在两个轴上撤消移动可能是不正确的

以下是将x轴和y轴分离为不同步骤的初步尝试：

const canvas=document.createElement（“canvas”）；
画布宽度=300；
高度=180；
document.body.appendChild（画布）；
const ctx=canvas.getContext（“2d”）；
常数鼠标={x:0，y:0}；
常数敌人={x:130，y:70，宽度：40，高度：40}；
康斯特玩家={
x:0，y:0，宽度：20，高度：20，vx:0，vy:0，
速度阻尼：0.06，碰撞阻尼：0.3
};
常数冲突=（a，b）=>
a、 x+a.width>=b.x&&a.x=b.y&&a.y{
mouse.x=e.clientX；
mouse.y=e.clientY；
};
body{margin:0；}
canvas{background:#000；}
简化代码。创建一个没有CSS（这不会导致问题）且只有一个障碍物和一个“玩家”，已经处于冲突方向，然后运行您的函数一次。代码采用哪种代码路径？删除所有其他内容，它不会导致您的问题，也不会