为 p5 游戏添加新关卡

Question

我创建了一个基本的 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);
    }
}

Answer 1

So what would be the smartest way to add new levels to a p5.js game?

最聪明的方法不止一种。就像编程中的许多事情一样，有大约一百万种不同的方法可以做到这一点。这是编程的一大优点，但当您只是想弄清楚如何继续进行时，它也会令人沮丧。这也让像这样的问题难以回答。

最直接的方法是使用一个 level 变量来跟踪您当前所在的级别。然后在 draw() 函数中，您将使用一系列 if 语句来检查级别并绘制它。像这样：

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

另一种方法是使用代表特定级别的对象。然后将它们存储在数组之类的东西中，并使用它来绘制当前级别。像这样：

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

我还建议您退后一步，从更简单的事情开始。创建一个 "game" 将当前级别绘制到屏幕并在用户单击鼠标时前进到下一级别。在您尝试添加实际游戏逻辑之前，让它完美运行。

为 p5 游戏添加新关卡

Adding new levels to p5 game

javascript

p5.js