Javascript 处理玩家和墙壁之间的碰撞

我正在用javascript开发一个2D游戏。我必须检测玩家是否处于某个位置（门或墙），以便做出一些动作。碰撞在我的桌面上运行良好，但如果我更改分辨率，我以前检查的所有位置都不再工作。如果我改变桌面的分辨率，有没有办法改进一个好的碰撞检测系统

我现在所做的是这样的：

以下是html结构：

<div id="container">
<div id="main">
    <img id="palyer" src="../img/sprites/pleyer.png">
</div>

而js：

var position = $("#player").position();
if((position.left<=55)&&(position.top>=183)&&(position.top<=215)){
changeRoom();}

var position=$（“#player”）.position（）；
如果（（位置左=183）&&（position.top在没有看到其余代码的情况下，很难提出建议，但解决问题的一种方法是使用两个变量来保存X和Y比率的值。然后每次使用它时，将所有坐标乘以这些比率。最后需要做的是在每次调整游戏大小时更新这些比率，如下所示

window.onresize = function onResize(event) {

   var canvas = document.getElementById('myGameScreen'); // reference to your html element 
   var newHeight = canvas.clientHeight;
   var newWidth = canvas.clientWidth;

   var ratioY = newHeight / oldHeight;
   var ratioX = newWidth / oldWidth;
   ...
   ...
   ...
   // save new dimensions for the next resize event
   oldHeight = newHeight;
   oldWidth = newWidth;
 }

我假设
55
、
183
和
215
是您要更改房间的像素。您是否可以访问框架的总大小，以便您可以设置与之相关的这些值？是的，它们是像素值，我将游戏室放在一个div中，并且游戏的所有元素都放在这个div中。因此我假设我必须访问元素相对于div的位置，但到目前为止我尝试的所有方法都是“分辨率依赖”。
window.onresize = function onResize(event) {

   var canvas = document.getElementById('myGameScreen'); // reference to your html element 
   var newHeight = canvas.clientHeight;
   var newWidth = canvas.clientWidth;

   var ratioY = newHeight / oldHeight;
   var ratioX = newWidth / oldWidth;
   ...
   ...
   ...
   // save new dimensions for the next resize event
   oldHeight = newHeight;
   oldWidth = newWidth;
 }