JavaScript小行星游戏的矢量文本？

我对JavaScript编码相当陌生（大约6个月）。我写硕士论文的同时也跟着我

该网站基本上是小行星与投票登记弯曲。最初的想法是让“太空船”可以“拍摄”不同的文本，并将播放器重定向到乔治亚州的投票注册网站。由于项目的最后期限，我不得不使用鼠标悬停和点击功能，但这可能吗？将文本转换为可以像小行星一样“射击”的向量

代码如下：

    let x, y;
let spacey;
var ship;
var asteroids = [];
var lasers = [];

function preload(){
  spacey = loadImage('data/spacey abrams.png');
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  ship = new Ship();
  for (var i = 0; i < 5; i++) {
    asteroids.push(new Asteroid());
  }
  noCursor();
}

function draw() {
  background(0);
  textSize(32);
  text("Fly Space Abrams around with your mouse. If the qualifications apply to you, double click for a surprise!", 100, 100);
  textSize(16);
  text("You can also pilot the voter-empowerment ship in the middle with your arrow keys and fire lasers with your space bar. Pew pew!", 100, 150);
  fill(255);
  if ((mouseX > 200) && (mouseX < 300) && (mouseY > 200) && (mouseY < 300)){
  text("Are you a US citizen?", 200, 300);}

  if ((mouseX > 400) && (mouseX < 500) && (mouseY > 400) && (mouseY < 500)){
  text("Are you a resident of the county/precint in which you are voting?", 400, 500);}

  if ((mouseX > 600) && (mouseX < 700) && (mouseY > 600) && (mouseY < 700)){
  text("Will you be 18 on 1/5/2021?", 600, 700);}

  if ((mouseX > 800) && (mouseX < 900) && (mouseY > 800) && (mouseY < 900)){
  text("Are you not a felon?", 800, 900);}

  image(spacey, mouseX, mouseY);

  for (var i = 0; i < asteroids.length; i++) {
    if (ship.hits(asteroids[i])) {
      console.log('ooops!');
    }
    asteroids[i].render();
    asteroids[i].update();
    asteroids[i].edges();
  }

  for (var i = lasers.length - 1; i >= 0; i--) {
    lasers[i].render();
    lasers[i].update();
    if (lasers[i].offscreen()) {
      lasers.splice(i, 1);
    } else {
      for (var j = asteroids.length - 1; j >= 0; j--) {
        if (lasers[i].hits(asteroids[j])) {
          if (asteroids[j].r > 10) {
            var newAsteroids = asteroids[j].breakup();
            asteroids = asteroids.concat(newAsteroids);
          }
          asteroids.splice(j, 1);
          lasers.splice(i, 1);
          break;
        }
      }
    }
  }

  console.log(lasers.length);

  ship.render();
  ship.turn();
  ship.update();
  ship.edges();
  }

function keyReleased() {
  ship.setRotation(0);
  ship.boosting(false);
}

function keyPressed() {
  if (key == ' ') {
    lasers.push(new Laser(ship.pos, ship.heading));
  } else if (keyCode == RIGHT_ARROW) {
    ship.setRotation(0.1);
  } else if (keyCode == LEFT_ARROW) {
    ship.setRotation(-0.1);
  } else if (keyCode == UP_ARROW) {
    ship.boosting(true);
  }
}

function doubleClicked(){
  location.replace("https://registertovote.sos.ga.gov/GAOLVR/welcome.do#no-back-button");
}

设x，y；
让斯派西；
var船舶；
var小行星=[]；
var激光器=[]；
函数预加载（）{
spacey=loadImage（'data/spacey abrams.png'）；
}
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
船=新船（）；
对于（变量i=0；i<5；i++）{
小行星。推（新小行星（））；
}
noCursor（）；
}
函数绘图（）{
背景（0）；
文本大小（32）；
文本（“用鼠标来回移动空格Abrams。如果资格证书适用于你，双击以获得惊喜！”，100，100）；
文本大小（16）；
文本（“你也可以用你的箭头键和你的空格棒发射激光在中间引导选民授权船。皮尤皮尤！”，100, 150）；
填充（255）；
如果（（鼠标>200）&&（鼠标<300）&&（鼠标>200）&（鼠标<300））{
文本（“你是美国公民吗？”，200300）；}
如果（（鼠标>400）&&（鼠标<500）&&（鼠标>400）&（鼠标<500））{
文本（“您是您投票所在的县/选区的居民吗？”，400，500）；}
如果（（鼠标>600）&&（鼠标<700）&&（鼠标>600）&（鼠标<700））{
文本（“你会在2021年1月5日年满18岁吗？”，600700）；}
如果（（鼠标>800）&&（鼠标<900）&&（鼠标>800）&（鼠标<900））{
文本（“你不是重罪犯吗？”，800900）；}
图像（spacey、mouseX、mouseY）；
对于（var i=0；i=0；i--）{
激光[i].渲染（）；
激光[i].update（）；
if（激光器[i]。屏幕外（）{
激光.拼接（i，1）；
}否则{
对于（var j=小行星。长度-1；j>=0；j--）{
if（激光[i].撞击（小行星[j]））{
如果（小行星[j].r>10）{
var newAsteroids=小行星[j].breakup（）；
小行星=小行星；
}
小行星.拼接（j，1）；
激光.拼接（i，1）；
打破
}
}
}
}
控制台。日志（激光器。长度）；
ship.render（）；
船舶转弯（）；
ship.update（）；
ship.edges（）；
}
函数keyReleased（）{
船舶自转（0）；
船舶增压（假）；
}
功能键按下（）{
如果（键==''）{
激光推送（新激光（船舶位置、船舶航向）；
}else if（键代码==右箭头）{
船舶设置旋转（0.1）；
}else if（keyCode==左箭头）{
船舶设置旋转（-0.1）；
}else if（键代码==向上箭头）{
船舶增压（真）；
}
}
函数doubleClicked（）{
位置。替换（“https://registertovote.sos.ga.gov/GAOLVR/welcome.do#no-后退按钮）；
}

假设小行星类使用

beginShape（）

/

endShape（）

进行渲染，您可以使用

p5。Font

的函数：

let points = yourLoadedFont.textToPoints('yourTextString', yourX, yourY, yourFontSize);

---

你是对的，小行星是一个beginShape函数。理论上我可以看到TextTopoint在工作，但小行星、飞船和激光都是在主游戏代码中调用的不同构造函数，我很难以同样的方式集成TextTopoint。与所有其他元素一样，函数Ship（）、函数Laser（），但textToPoints从定义点和预加载字体开始。所以答案可能是显而易见的，但我总是莫名其妙地混淆p5js。@GraceKelley你没有发布这些类，所以这里只做假设：1。在preload（）中加载字体，在

setup（）

中，您可以调用

textToPoints

并将点数组传递给小行星（如果小行星尚未接受形状的点列表，则可能需要更改构造器）。我明白了发生了什么：您是正确的，它确实可以这样工作，但我有一个

push（）

pop（）

环绕

textToPoints

。一旦我把它们取下来，它就完美地工作了。谢谢