如何修改JavaScript面向对象游戏中的Enemy类以实现敌人追踪玩家功能

我正在尝试用HTML、CSS和JavaScript制作一款游戏。一开始我跟着FreeCodeCamp的教程学习，教程是关于无重力横版卷轴游戏的，但我想做一个敌人会追逐玩家的俯视视角游戏。我已经实现了玩家的上下左右控制，但不知道如何修改敌人的行为来让它们追逐玩家。我刚接触JavaScript的面向对象编程和游戏开发。

下面是我的代码（敌人类）：

class Enemy {
    constructor(game){
        this.game = game;
        this.x = this.game.width;
        // 原横版逻辑的速度，后续需要改成追逐逻辑的速度
        this.speed = Math.random() * -1.5 - 0.5;
        this.markedForDeletion = false;
        this.lives = 5;
        this.score = this.lives;
    }
    update(){
        this.x += this.speed;

        // 修正原代码的拼写错误：wodth → width
        if (this.x + this.width < 0) this.markedForDeletion = true;
    }
    draw(context){
        context.fillStyle = 'red';
        context.fillRect(this.x, this.y, this.width, this.height);
        context.fillStyle = 'black';
        context.font = '20px Helvetica'
        context.fillText(this.lives, this.x, this.y);
    }
}
class Angler1 extends Enemy {
    constructor(game){
        super(game);
        this.width = 228 * 0.2;
        this.height = 169 * 0.2;
        this.y = Math.random() * (this.game.height * 0.9 - this.height);
    }
}

玩家类代码：

class Player {
    constructor(game){
        this.game = game;
        this.width = 80;
        this.height = 120;
        this.x = 20;
        this.y = 100;
        this.speedX = 3;
        this.speedY = 0;
        this.maxSpeed = 3;
        this.projectiles = [];
    }
    update(){
        if(this.game.keys.includes('w')) this.speedY = -this.maxSpeed;
        else if (this.game.keys.includes('s')) this.speedY = this.maxSpeed;
        else if (this.game.keys.includes('a')) this.speedX = -this.maxSpeed;
        else if (this.game.keys.includes('d')) this.speedX = this.maxSpeed;
        else {
                this.speedY = 0;
                this.speedX = 0;
            }
        this.y += this.speedY;
        this.x += this.speedX;
        //handle projectiles
        this.projectiles.forEach(projectile => {
            projectile.update();
        });
        this.projectiles = this.projectiles.filter(projectile => !projectile.markedForDeletion);
    }
    draw(context){
        context.fillStyle = 'black';
        context.fillRect(this.x, this.y, this.width, this.height);
        this.projectiles.forEach(projectile => {
            projectile.draw(context);
        });
    }
    shootTop(){
        if (this.game.ammo > 0){
            this.projectiles.push(new Projectile(this.game, this.x + 80, this.y + 30));
            this.game.ammo--;
        }
    }
}

游戏类和游戏循环代码：

class Game {
    constructor(width, height){
        this.width = width;
        this.height = height;
        this.player = new Player(this);
        this.input = new InputHandler(this);
        this.ui = new UI(this);
        this.keys = [];
        this.enemies = [];
        this.enemyTimer = 0;
        this.enemyInterval = 1000;
        this.ammo = 20;
        this.maxAmmo = 50;
        this.ammoTimer = 0;
        this.ammoInterval = 500;
        this.gameOver = false;
        this.score = 0;
        this.winningScore = 10;
        this.gameTime = 0;
        this.timeLimit = 20000;
    }
    update(deltaTime){
        if(!this.gameOver) this.gameTime += deltaTime;
        if(this.gameTime > this.timeLimit) this.gameOver = true;
        this.player.update();
        if (this.ammoTimer > this.ammoInterval){
            if (this.ammo < this.maxAmmo) this.ammo++;
            this.ammoTimer = 0;
        } else {
            this.ammoTimer += deltaTime;
        }
        this.enemies.forEach(enemy => {
            enemy.update();
            if (this.checkCollision(this.player, enemy)){
                enemy.markedForDeletion = true;
            }
            this.player.projectiles.forEach(projectile => {
                if (this.checkCollision(projectile, enemy)){
                    enemy.lives--;
                    projectile.markedForDeletion = true;
                    if(enemy.lives <= 0) {
                        enemy.markedForDeletion = true;
                       if (!this.gameOver) this.score += enemy.score;
                        if (this.score > this.winningScore) this.gameOver = true;
                    }
                }
            })
        });
        this.enemies = this.enemies.filter(enemy => !enemy.markedForDeletion);
        if(this.enemyTimer > this.enemyInterval && this.gameOver === false){
            this.addEnemy();
            this.enemyTimer = 0;
        } else {
            this.enemyTimer += deltaTime;
        }
    }
    draw(context){
        this.player.draw(context);
        this.ui.draw(context);
        this.enemies.forEach(enemy => {
            enemy.draw(context);
        });
    }
    addEnemy(){
        this.enemies.push(new Angler1(this));
    }
    checkCollision(rect1, rect2){
        return (    rect1.x < rect2.x + rect2.width && 
                    rect1.x + rect1.width > rect2.x &&
                    rect1.y < rect2.y + rect2.height &&
                    rect1.height + rect1.y > rect2.y)
    }
}

const game = new Game(canvas.width, canvas.height);
let lastTime = 0;
//animation loop
function animate(timeStamp){
    const deltaTime = timeStamp - lastTime;
    lastTime = timeStamp;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    game.update(deltaTime);
    game.draw(ctx);
    requestAnimationFrame(animate);
}

（一些不相关的类，比如投射物类，已经被省略以节省空间）

备注：内容来源于stack exchange，提问作者human computer