如何在p5.js中让一个对象移动或吸引到另一个对象？(当它移动时) [英] How do I make an object move or gravitate to a another object in p5.js?(whilst its moving)

问题描述

我目前正在制作一款僵尸游戏，我一直在想如何让僵尸向玩家移动。我也在试着做一个射击系统，如果你在这方面有什么建议，请告诉我。谢谢！：) 代码如下：

let round;
let zombie, player
let x, y;
let health, speed, damage, playerhealth;
function setup() {
  createCanvas(400, 400);
round=1;
  zombie = {

    x: 200,
    y: 200,
    //increase by 100 each round until round 9
    health: 150,
    speed: 5,
    damage: 20
  };
  player = {
    x: 200,
    y: 200,

    //default
    health: 100
  };
}


function draw() {
  background(220);
  //player
  fill('green');
  ellipse(player.x, player.y, 20, 20);
  //HUD or something
  fill('black');
  text(''+player.health, 10, 10)
  //zombie(s)
  fill('gray');
  rect(zombie.x, zombie.y - 200, 20, 20);
  if (dist(player.x, player.y, zombie.x, zombie.y) <= 100) {
background(0);
textSize(20);
text('You died 
 Round '+round,165,200)

  }
  if (keyIsPressed && keyCode === UP_ARROW) {
    player.y = player.y - 2;
  }
  if (keyIsPressed && keyCode === DOWN_ARROW) {
    player.y = player.y + 2;
  }
  if (keyIsPressed && keyCode === LEFT_ARROW) {
    player.x = player.x - 2;
  }
  if (keyIsPressed && keyCode === RIGHT_ARROW) {
    player.x = player.x + 2;
  }

}

推荐答案

我建议您使用vectors来处理位置和速度。如果你还不知道，一些基本的线性代数在游戏编程中会有很大的帮助。

以下是带有移动僵尸的代码版本：

let round;
let zombie, player;
let x, y;
let health, speed, damage, playerhealth;
function setup() {
  createCanvas(400, 400);
  round = 1;
  zombie = {
    pos: createVector(500, 200),
    //increase by 100 each round until round 9
    health: 150,
    speed: 1,
    damage: 20,
  };
  player = {
    pos: createVector(200, 200),

    //default
    health: 100,
  };
}

function draw() {
  background(220);
  //player
  fill("green");
  ellipse(player.pos.x, player.pos.y, 20, 20);
  //HUD or something
  fill("black");
  text("" + player.health, 10, 10);
  //zombie(s)
  fill("gray");
  rect(zombie.pos.x, zombie.pos.y, 20, 20);
  if (p5.Vector.sub(player.pos, zombie.pos).mag() <= 30) {
    background(0);
    textSize(20);
    text("You died 
 Round " + round, 165, 200);
  }
  if (keyIsPressed && keyCode === UP_ARROW) {
    player.pos.y -= 2;
  }
  if (keyIsPressed && keyCode === DOWN_ARROW) {
    player.pos.y += 2;
  }
  if (keyIsPressed && keyCode === LEFT_ARROW) {
    player.pos.x -= 2;
  }
  if (keyIsPressed && keyCode === RIGHT_ARROW) {
    player.pos.x += 2;
  }
  zombie.pos.add(p5.Vector.sub(player.pos, zombie.pos).limit(zombie.speed))
}

不是存储x和y坐标，而是存储玩家和僵尸的pos向量。p5.Vector.sub(player.pos, zombie.pos).mag()是玩家和僵尸之间的距离。p5.Vector.sub(player.pos, zombie.pos)是从僵尸到玩家的矢量，.mag()是该矢量的大小，即它的长度。

使僵尸移动的代码行为：

zombie.pos.add(p5.Vector.sub(player.pos, zombie.pos).limit(zombie.speed))

或伪代码：

zombie_pos = zombie_pos + (player_pos - zombie_pos).limit(zombie_speed)

如果.limit(...)不在那里，则为：

zombie_pos = zombie_pos + (player_pos - zombie_pos)

相当于

zombie_pos = zombie_pos - zombie_pos + player_pos

相当于

zombie_pos = player_pos

这将使僵尸在一帧中移动到玩家那里。通过添加.limit(zombie.speed)，可以限制僵尸的移动速度，使其向播放器移动(向p5.Vector.sub(player.pos, zombie.pos)，僵尸到播放器的方向)，但每一帧仅移动zombie.speed像素。

这篇关于如何在p5.js中让一个对象移动或吸引到另一个对象？(当它移动时)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！