javascript - JS /画布-需要一些帮助来确定碰撞的逻辑(JS / Canvas - Need some assistance figuring out the logic for collision)

Question

I'm making a roguelike in canvas for practice, so far I got map generation, player, enemies and a few other details.

(我正在画布上制作像流氓一样的东西来练习，到目前为止，我已经掌握了地图生成，玩家，敌人和其他一些细节。)

I am trying to figure out the collision so my player and enemies go through walls and I am a bit stuck..

(我试图找出碰撞的原因，所以我的玩家和敌人穿过墙壁，我有点被卡住了。)

My plan was to get all the sides of an object ( player, enemy, walls ) and then compare their positions on the map and check for overlaps, and stop the player / enemy movement accordingly.

(我的计划是获取对象的所有侧面（玩家，敌人，墙壁），然后比较它们在地图上的位置并检查是否有重叠，并相应地停止玩家/敌人的移动。)

this is what I got so far :

(这是我到目前为止所得到的：)

export function checkCollision(player, wall) {
  //check collision with player
  let bottomOfPlayer = player.position.y + player.height;
  let topOfPlayer = player.position.y;
  let leftOfPlayer = player.position.x;
  let rightOfPlayer = player.position.x + player.width;

  let topOfObject = wall.position.y;
  let leftSideOfObject = wall.position.x;
  let rightSideofObject = wall.position.x + wall.width;
  let bottomOfObject = wall.position.y + wall.height;

  if (bottomOfPlayer >= topOfObject && topOfPlayer <= bottomOfObject) {
    return true;
  } else {
    return false;
  }
}

then I would call this funtion in my game.js, and if it returns true I would stop the player accordingly !

(那么我将在我的game.js中调用此功能，如果返回true，我将相应地停止玩家！)

Does someone mind giving me a hand with this ?

(有人介意帮我这个忙吗？)

Am I on the right track ?

(我在正确的轨道上吗？)

Tried reading a few answers and articles about 2D collision, but me being a begginer to programming in general it just confused me further.

(试图阅读一些有关2D碰撞的答案和文章，但是我是编程的始作俑者，这进一步使我感到困惑。)

Thanks so much and hope you have a great day !

(非常感谢，并希望您过得愉快！)

  ask by sillenius translate from so

Answer 1

等待大神答复