Как заставить персонажа следовать за персонажем игрока в игре JS / canvas?

Question

Я только начинаю кодировать простую JS игру с использованием холста, но у меня нет идей, как будет работать основной механизм c: это бесконечная игра, в которой игрок должен запускаться из монстр и войдите в дверь до того, как монстр доберется до него.

Итак, у меня движется холст и игрок, но я все еще не запустил механику монстров. Я думаю, это было бы для обновления каждого кадра монстра с положением игрока 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()
}

Answer 1

Есть несколько способов сделать это.

Учитывая опубликованный вами код, простым (но не очень эффективным) способом было бы использовать setInterval () для запуска логики вашего монстра c.

Очень простой лог c может работать так (псевдокод):

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
}

Вы также можете проверить расстояние по горизонтальной и вертикальной оси, чтобы определить, в каком направлении go сначала .

• Элемент списка