Javascript 为p5游戏添加新关卡

我已经创建了一个基本的p5.js泡泡游戏，在这个游戏中，我吃更小的泡泡来变大并避免更大的泡泡。现在我想添加更多更快敌人的新关卡，只在我点击一个按钮时才开始下一关卡。我尝试了很多不同的东西，但每次尝试时都会遇到一系列新的问题

那么，在p5.js游戏中添加新关卡的最聪明的方法是什么呢

var player;
var enemy;

var enemies;
var walls;

var topWall;
var rightWall;
var bottomWall;
var leftWall;

var gameOver = false;
var win = false;

var numberOfEnemies = 10;


function setup() {

    createCanvas(700, 600);

    enemies = new Group();
    walls = new Group();

    function createWall(name,x,y,width,height){
        name = createSprite(x, y, width, height);
        name.shapeColor = color(0,255,0);
        name.immovable = true;
        walls.add(name);
    }
    createWall("topWall", 0, 0, width*2, 20);
    createWall("rightWall", width, height, 20, height*2);
    createWall("bottomWall", 0, height, width*2, 20);
    createWall("leftWall", 0, 0, 20, height*2);

    function createEnemy(x,y,size){
        enemy = createSprite(x,y,size,size);
        enemy.shapeColor = color(255,0,0);
        enemies.add(enemy);

        enemy.draw = function(){
            fill(255,0,255);
            ellipse(0,0,size,size);
        }
    }

    /* Create 10 enemies */
    for (var i = 1; i < 11; i++) {
        createEnemy( Math.floor(random(640)), Math.floor(random(480)), 10*i );
    }
    player = createSprite(0,0,40,40);

    if(win){
        level++;
    }
}


function draw() {
    background(0);
    noStroke();

    drawSprites();

    enemies.bounce(enemies);
    enemies.bounce(walls);

    for (var i = 0; i < enemies.length; i++) {
        enemies[i].attractionPoint(0.01, mouseX, mouseY);
        enemies[i].maxSpeed = 2;
    }

    player.position.x = mouseX;
    player.position.y = mouseY;

    for (var i = 0; i < enemies.length; i++) {
        if(player.overlap(enemies[i])){
            if(player.width > enemies[i].width){
                indexOfEaten = enemies.indexOf(enemies[i]);
                console.log(indexOfEaten);
                eatOrBeEaten(indexOfEaten);
                player.width = player.width + 10;
                player.height = player.height + 10;
            }else{
                console.log("dead");
                player.remove();
                gameOver = true;
            }
        }
    }

    function eatOrBeEaten(index){
        enemies[index].remove();
        numberOfEnemies--;
        console.log("number of enemies"+numberOfEnemies);
        if(numberOfEnemies == 0){
            win = true;
        }
    }

    player.draw = function(){
        fill(0,0,255);
        ellipse(0,0,player.width,player.height);
    }

    if(gameOver){
        textSize(65);
        textAlign(CENTER);
        fill(255, 255, 255);
        text('GAME OVER', width/2, height/2);
    }

    if(win){ 
        textSize(60);
        textAlign(CENTER);
        fill(255, 255, 255);
        text("LEVEL COMPLETED.", width/2, height/2);
    }
}

var播放器；
敌人；
变种敌人；
var墙；
var顶壁；
右墙；
var底壁；
var左墙；
var gameOver=false；
var-win=false；
var NumberOfFriends=10；
函数设置（）{
createCanvas（700600）；
敌人=新组（）；
墙=新组（）；
函数createWall（名称、x、y、宽度、高度）{
name=createSprite（x，y，宽度，高度）；
name.shapeColor=color（0255,0）；
name.immoved=true；
添加（名称）；
}
createWall（“顶墙”，0,0，宽度*2,20）；
createWall（“右墙”，宽度，高度，20，高度*2）；
createWall（“底部墙”，0，高度，宽度*2,20）；
createWall（“leftWall”，0,0,20，高度*2）；
函数（x、y、大小）{
敌人=创造精灵（x，y，大小，大小）；
founder.shapeColor=颜色（255,0,0）；
敌人。添加（敌人）；
defey.draw=函数（）{
填补(255,0255);；
椭圆（0,0，大小，大小）；
}
}
/*创造10个敌人*/
对于（变量i=1；i<11；i++）{
创建敌人（数学地板（随机（640）），数学地板（随机（480）），10*i）；
}
player=createSprite（0,0,40,40）；
如果（赢）{
级别++；
}
}
函数绘图（）{
背景（0）；
仰泳（）；
drawSprites（）；
敌人。反弹（敌人）；
敌人。反弹（墙壁）；
对于（变量i=0；i<0.length；i++）{
敌人[i].吸引点（0.01，mouseX，mouseY）；
敌人[i].maxSpeed=2；
}
player.position.x=mouseX；
player.position.y=mouseY；
对于（变量i=0；i<0.length；i++）{
如果（玩家重叠（敌人[i]））{
如果（player.width>敌人[i].width）{
indexOfEaten=敌人；
console.log（indexOfEaten）；
eatOrBeEaten（indexOfEaten）；
player.width=player.width+10；
player.height=player.height+10；
}否则{
控制台日志（“死亡”）；
player.remove（）；
gameOver=true；
}
}
}
函数eatOrBeEaten（索引）{
敌人[index].remove（）；
敌人的数量——；
控制台日志（“敌人数量”+敌人数量）；
如果（NumberOfTowners==0）{
赢=真；
}
}
player.draw=函数（）{
填充（0,0255）；
椭圆（0,0，游戏者。宽度，游戏者。高度）；
}
如果（游戏结束）{
文本大小（65）；
文本对齐（中心）；
填充（255、255、255）；
文本（“游戏结束”，宽度/2，高度/2）；
}
如果（赢）{
文本大小（60）；
文本对齐（中心）；
填充（255、255、255）；
文字（“完成的水平面”，宽度/2，高度/2）；
}
}

那么，在p5.js游戏中添加新关卡的最聪明的方法是什么呢

要做到这一点，并不是只有一种最聪明的方法。就像编程中的许多事情一样，有大约一百万种不同的方法来实现这一点。这是编程的一大优点，但当你只是想弄清楚如何继续时，这也是令人沮丧的。这样的问题也很难回答

最直接的方法是使用

level

变量跟踪您当前所在的级别。然后在

draw（）

函数中，您将使用一系列

if

语句来检查级别并绘制它。大概是这样的：

function draw(){
  if(level == 1){
    // draw level 1
  }
  else if(level == 2){
    // draw level 2
  }
}

function draw(){
  levels[level].drawLevel();
}

另一种方法是使用表示特定级别的对象。然后将它们存储在数组中，并使用该数组绘制当前标高。大概是这样的：

function draw(){
  if(level == 1){
    // draw level 1
  }
  else if(level == 2){
    // draw level 2
  }
}

function draw(){
  levels[level].drawLevel();
}

---

我还建议你退一步，从更简单的事情开始。创建一个“游戏”，将当前关卡绘制到屏幕上，并在用户单击鼠标时进入下一关卡。在您尝试添加实际游戏逻辑之前，请先将其完美运行。

欢迎使用堆栈溢出。你能告诉我你遇到的错误是什么吗。这会节省我很多时间