Question

我用javascript开发2D游戏。我必须检测玩家是否处于某个位置（门或墙）才能采取某些行动。碰撞在我的桌面上运行良好，但如果我改变分辨率，我之前检查过的所有位置都不再有效。有没有什么方法可以改进一个好的碰撞检测系统，如果我改变桌面的分辨率呢？

我现在正在做的事情非常像：

这是html结构：

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

这是css：

#container{
margin: auto;
width: 60%;
height: 80%;}

#main{
    position: relative;
    margin: auto;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain; }

    #player{
        position: relative;
        top: 100px;
        left: 400px;}

和js：

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

Answer 1

很难在没有看到其余代码的情况下提出建议，但解决问题的一种方法是使用两个变量来保存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;
 }

处理Player和Wall之间的冲突

1 个答案: