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 ) {&nbsp; &nbsp; monster.moveLeft()} else if ( monster.canMoveRight() && player.x > monster.x ) {&nbsp; &nbsp; monster.moveRight()} else if ( monster.canMoveUp() && player.y < monster.y ) {&nbsp; &nbsp; monster.moveUp()} else if ( monster.canMoveDown() && player.y > monster.y ) {&nbsp; &nbsp; monster.moveDown()} else {&nbsp; &nbsp; // no good choice&nbsp; &nbsp; // either continue moving in the same direction, or choose a random&nbsp; &nbsp; // direction if that's not possible&nbsp; &nbsp; //&nbsp; &nbsp; // This means you need to keep track of the monster's last direction}您还可以检查水平轴和垂直轴上的距离以确定先行的方向。项目清单