有障碍物的 javascript 寻路

Question

我正在使用 Javascript 画布开发自定义吃豆人游戏。我有不同的课程，一个是给玩家的，一个是给敌人的，另一个是给棋盘上的墙的。 在我的墙类中，我有以下代码：

class Wall {
constructor(x, y, width, height, color, gate){
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color;
    this.gate = gate;
};
draw(){
    ctx.lineWidth = 3;
    ctx.strokeStyle = this.color;
    ctx.strokeRect(this.x, this.y, this.width, this.height);
};

在我的敌人类中，我有以下代码：

class Enemy {
constructor(img, x, y){
    this.img = img;
    this.x = x;
    this.y = y;
    this.width = 36;
    this.height = 36;
    this.speedX = 0.5;
    this.speedY = 0.5;
    this.dx = 0;
    this.dy = 0;
    this.distance = 0;
    this.angle = 0;
};
draw(){
    ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
};
checkcollision(object) {
    return (
      this.x < object.x + object.width &&
      this.x + this.width > object.x &&
      this.y < object.y + object.height &&
      this.y + this.height > object.y
    );
};
moveRight(objects) {
    this.x += this.speedX;
    objects.forEach(object => {
        if (this.checkcollision(object)) {
            this.x -= this.speedX;
        } else if (this.x >= 976){
            this.x = 0;
        };
    });
  };
moveLeft(objects) {
    this.x -= this.speedX;
    objects.forEach(object => {
        if (this.checkcollision(object)) {
            this.x += this.speedX;
        } else if (this.x <= 0){
            this.x = 975;
        };
    });
};
moveUp(objects) {
    this.y -= this.speedY;
    objects.forEach(object => {
        if (this.checkcollision(object)) {
            this.y += this.speedY;
        };
    });
};
moveDown(objects) {
    this.y += this.speedY;
    objects.forEach(object => {
        if (this.checkcollision(object)) {
            this.y -= this.speedY;
        };
    });
};
updateAngleX(player, objects){
    this.dx = player.x - this.x;
    this.dy = player.y - this.y;
    this.distance = Math.sqrt((this.dx*this.dx) + (this.dy*this.dy));
    this.angle = Math.atan2(this.dy,this.dx);
    this.x += Math.cos(this.angle) * this.speedX;
    objects.forEach(object => {
        if (this.dead === false || object.gate === false){
            if (this.checkcollision(object)) {
                if (this.dy > 0){
                    this.y += this.speedY;
                    this.x -= Math.cos(this.angle) * this.speedX;
                    if (this.checkcollision(object)){
                        this.y -= this.speedY;
                    };
                } else if (this.dy < 0){
                    this.y -= this.speedY;
                    this.x -= Math.cos(this.angle) * this.speedX;
                    if (this.checkcollision(object)){
                        this.y += this.speedY;
                    };
                };
            };
        };
    });
};
updateAngleY(player, objects){
    this.dx = player.x - this.x;
    this.dy = player.y - this.y;
    this.distance = Math.sqrt((this.dx*this.dx) + (this.dy*this.dy));
    this.angle = Math.atan2(this.dy,this.dx);
    this.y += Math.sin(this.angle) * this.speedY;
    objects.forEach(object => {
        if (this.dead === false || object.gate === false){
            if (this.checkcollision(object)) {
                if (this.dx > 0){
                    this.x += this.speedX;
                    this.y -= Math.sin(this.angle) * this.speedY;
                    if (this.checkcollision(object)){
                        this.x -= this.speedX;
                    };
                } else if (this.dx < 0){
                    this.x -= this.speedX;
                    this.y -= Math.sin(this.angle) * this.speedY;
                    if (this.checkcollision(object)){
                        this.x += this.speedX;
                    };
                };
            };
        };
    });
};

};

但是我有一些问题，因为敌人在找到如下图的角落时会卡住：

就像敌人应该沿着顶部或正确的路径继续迫害，但它被困在角落里。 如何更改我的功能，以便他们找到播放器的正确路径？谢谢。

将整个代码添加到 codepen 以在此处检查：https://codepen.io/SpaSniper/pen/bGooKrP

Answer 1

停止你目前正在做的事情。保持超级简单。你知道你可以去哪里，你知道你有多大。

假设你的敌人角色是 36x36。一个不错的广场。现在用 36x36 或 40x40 的正方形填充地图（您实际可以去的部分）。你最终会在整个地图上拥有很多一个并排的正方形。

现在您可以运行Dijkstra 之类的命令来查找敌人和玩家之间的路径（实际上是离敌人最近的方格和离玩家最近的方格之间）。您会返回一个正方形列表（实际上是它们的中心），因此您可以最小化敌人与列表中下一个最近的正方形之间的距离。

不要每帧运行一次，每 2 或 3 秒左右运行一次。

Dijkstra 在这么少的位置上会非常快，但没有必要继续运行它，否则你会冒着让敌人过度抖动的风险。

这不是唯一或最好的解决方案，但您会学到一些不错的技术。