Javascript Atom：数组问题

Question

所以，对于最后一个项目，我尝试用三种不同的流星制作游戏；青铜、白银和黄金。虽然 Bronze 阵列在 Setup() 中运行良好，但 Silver 和 Gold 流星出于某种未知原因高速运行。

function setup() {
  createCanvas(windowWidth, windowHeight);
  spaceship = new Spaceship(100, 100, 5, spaceshipImage, bulletImage, 40);
  healthStar = new Star(1000, 100, 10, healthStarImage, 50);


//the Meteor Array
// Run a for loop numMeteor times to generate each meteor and put it in the array
// with random values for each star
for (let i = 0; i < numMeteor; i++) {
  let meteorX = random(0, width);
  let meteorY = random(0, height);
  let meteorSpeed = random(2, 20);
  let meteorRadius = random(10, 60);
  meteor.push(new Meteor(meteorX, meteorY, meteorSpeed, meteorBronzeImage, meteorRadius));
  }
}

// draw()
//
// Handles input, movement, eating, and displaying for the system's objects
function draw() {
// Set the background to a safari scene
  background(skyBackground);
// Check if the game is in play
  if (playing == true) {

// Handle input for the tiger
  spaceship.handleInput();

// Move all the "animals"
  spaceship.move();
  healthStar.move();

if (spaceship.dodges >= 5){
  levelTwo = true;
}
  //lvl 2
  if (levelTwo == true){
    meteor = [];
    for (let i = 0; i < numMeteor; i++) {
      let meteorX = random(0, width);
      let meteorY = random(0, height);
      let meteorSpeed = random(2, 20);
      let meteorRadius = random(10, 60);
      meteor.push(new Meteor(meteorX, meteorY, meteorSpeed, meteorSilverImage, meteorRadius));
  }
}

if (spaceship.dodges >= 8){
  levelThree = true;
}
//lvl 3
if (levelThree == true){
  levelTwo = false;
  meteor = [];
      for (let i = 0; i < numMeteor; i++) {
      let meteorX = random(0, width);
      let meteorY = random(0, height);
      let meteorSpeed = random(2, 20);
      let meteorRadius = random(10, 60);
      meteor.push(new Meteor(meteorX, meteorY, meteorSpeed, meteorGoldImage, meteorRadius));
    }
}

// Handle the tiger and lion eating any of the star
  spaceship.handleEating(healthStar);

  //
  spaceship.handleBullets();

// Handle the tragic death of the tiger
  spaceship.handleDeath();

// Check to see when the game is over
  checkGameOver();

// Display all the "animals"
  spaceship.display();
  healthStar.display();

// Display and making sure the tiger can eat the copies of the star
for (let i = 0; i < meteor.length; i++) {
meteor[i].move();
meteor[i].display();
//meteor[i].handleDamage();
spaceship.handleHurting(meteor[i]);
spaceship.handleDodging(meteor[i]);

}
 }
   // Once the game is over, display a Game Over Message
 if (gameOver == true) {
    displayGameOver();
  }
    // Otherwise we display the message to start the game
  else {
    displayStartMessage();
      }
    }

我试图改变速度，把关卡设置为错误，除了青铜流星什么都没有。

Answer 1

您的 2 级和 3 级流星初始化在您的绘图循环中。它们包括meteor = [] 声明。根据您提供的信息，这表明您的流星阵列在每次绘制迭代时都会被清除。他们从来没有机会移动，你每次都会得到新鲜的随机流星。

如果绘制循环中的数组清除确实是问题所在，则您需要添加一种方法来跟踪关卡初始化是否已完成，以便它只发生一次。一个简单的标志，一个幂等函数，诸如此类。

// Extract meteor generation to it's own function so you dont need to repeat it
function generateMeteors(meteorImage) {
  let meteor = [];
  for (let i = 0; i < numMeteor; i++) {
    let meteorX = random(0, width);
    let meteorY = random(0, height);
    let meteorSpeed = random(2, 20);
    let meteorRadius = random(10, 60);
    meteor.push(new Meteor(meteorX, meteorY, meteorSpeed, meteorBronzeImage, meteorRadius));
  }
  return meteor;
}


function setup() {
  createCanvas(windowWidth, windowHeight);
  spaceship = new Spaceship(100, 100, 5, spaceshipImage, bulletImage, 40);
  healthStar = new Star(1000, 100, 10, healthStarImage, 50);


  //the Meteor Array
  // meteor is apparently global, or otherwise in scope here
  meteor = generateMeteors(meteorBronzeImage)  
}


function draw() {
 /**  
    Code removed for clarity  
 **/

  if (spaceship.dodges >= 5) {
    levelTwo = true;
  }
  //lvl 2
  // levelTwoInitialized tracks if we've initialized the meteor array for this level
  if (levelTwo == true && levelTwoInitialized == false){
    meteor = generateMeteors(meteorSilverImage);
    levelTwoInitialized = true;
  }

  if (spaceship.dodges >= 8){
    levelThree = true;
  }
  //lvl 3
  // levelThreeInitialized tracks if we've initialized the meteor array for this level
  if (levelThree == true && levelThreeInitialized == false){
    levelTwo = false;
    meteor = generateMeteors(meteorGoldImage);
    levelThreeInitialized = true;
  } 

  //... rest of code

上面是一种可能的方法。像levelThreeInitialized 这样的关卡初始化标志必须在某个地方声明，无论您在哪里跟踪您的游戏/程序状态。

如果你想保留上一关的流星，你可以这样做：

  if (levelTwo == true && levelTwoInitialized == false){
    // add silver meteors to the existing bronze set
    meteor = meteor.concat(generateMeteors(meteorSilverImage));
    levelTwoInitialized = true;
  }
  //... rest of code

如果要创建具有多种类型的新集合：

  if (levelTwo == true && levelTwoInitialized == false){
    // make NEW silver and bronze meteors
    meteor = generateMeteors(meteorSilverImage)
                .concat(generateMeteors(meteorBronzeImage);
    levelTwoInitialized = true;
  }
  //... rest of code