處理玩家與牆之間的碰撞

我正在用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();}

來源

2017-03-17 Marco Panarelli

我假設'55'，'183'和'215'是你想要改變房間的像素。你沒有訪問框架的總大小，所以你可以設置這些值相關的？ – berna1111

是的，它們是像素值，我將遊戲室放置在一個div中，並將該遊戲的所有元素放置在該div內。所以我假設我必須訪問元素相對於div的位置，但我迄今嘗試的所有方法都是「解決方案依賴性」。 –

如果沒有看到代碼的其餘部分，很難建議，但解決問題的方法之一是有兩個變量來保存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; 
}

來源

2017-03-17 18:05:34 DKMudrechenko

處理玩家與牆之間的碰撞

回答

相關問題