JavaScript Asteroids 游戏的矢量文本？

问题描述

我对 JavaScript 编码相当陌生（约 6 个月）。我在跟随 this website 的同时为我的硕士论文制作了 this video from Coding Train。

该站点基本上是具有投票登记倾向的 Asteroids。最初的想法是让“宇宙飞船”可以“拍摄”不同的文本并将玩家重定向到乔治亚州的投票注册站点。由于项目的截止日期，我不得不转向悬停和点击功能，但这可能吗？将文本转换为可以像小行星一样“射击”的矢量？

代码如下：

    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!",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");
}

解决方法

假设 Asteroid 类使用 beginShape()/endShape() 呈现，您可以使用 p5.Font 的 textToPoints() 函数：

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