JS/canvas游戏中如何让角色追随玩家角色？

Question

我刚刚开始使用画布编写一个简单的 JS 游戏，但我不知道主要机制是如何工作的：这是一个无休止的游戏，玩家必须逃离怪物并在怪物之前进入一扇门到达他。所以，我有画布和玩家移动，但我仍然没有启动怪物机制。我认为那是用 x/y 玩家的位置更新每个怪物的帧，对吗？到目前为止我写的代码：const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");canvas.width = 600;canvas.height = 600;document.body.appendChild(canvas);const survivor = {    x: 25,    y: 25,    moveUp:    function() { this.y -= 25 },    moveDown:  function() { this.y += 25 },    moveLeft:  function() { this.x -= 25 },    moveRight: function() { this.x += 25 },  }  function draw(survivor) {    const img = new Image();    img.onload = () => {        ctx.drawImage(img, survivor.x, survivor.y, 50, 50);     }    img.src = "/images/survivor-move_knife_0.png";  }  document.addEventListener('keydown', e => {    switch (e.keyCode) {      case 38:         survivor.moveUp();            console.log('up: ', survivor);         break;      case 40:         survivor.moveDown();          console.log('down: ',  survivor);         break;      case 37:         survivor.moveLeft();          console.log('left: ',  survivor);         break;      case 39:         survivor.moveRight();         console.log('right: ', survivor);         break;    }    updateCanvas();  })  function updateCanvas() {    ctx.clearRect(0,0,1500,1700);    draw(survivor);  }  updateCanvas()}javascript帆布

Answer 1

有几种方法可以做到这一点。

鉴于您发布的代码，一种简单（但不是非常有效）的方法是使用 setInterval() 来运行怪物的逻辑。

一个非常简单的逻辑可以像这样工作（伪代码）：

if ( monster.canMoveLeft() && player.x < monster.x ) {

    monster.moveLeft()

} else if ( monster.canMoveRight() && player.x > monster.x ) {

    monster.moveRight()

} else if ( monster.canMoveUp() && player.y < monster.y ) {

    monster.moveUp()

} else if ( monster.canMoveDown() && player.y > monster.y ) {

    monster.moveDown()

} else {

    // no good choice

    // either continue moving in the same direction, or choose a random

    // direction if that's not possible

    //

    // This means you need to keep track of the monster's last direction

}

您还可以检查水平轴和垂直轴上的距离以确定先行的方向。

项目清单