当分数变为 200 时结束 p5js 游戏

Question

我做了一个小的 trex 游戏，但我在这里遇到了一些麻烦。当分数变为 300 时，游戏结束。我不确定我应该怎么做。我尝试的是制作一个 if 条件并给它分数 === 和分数 = 200，游戏应该结束。谢谢。（另外我在 7 个月前写了这段代码，我只是在这里进行一些改进）


var trex, trex_running, trex_collided;
var ground, invisibleGround, groundImage;
var PLAY = 1;
var END = 0;
var gameState = PLAY;
var gameOver, restart, gameOverImage, restartImage;
var score = 0;
var cloudsGroup, cloudImage;
var obstaclesGroup, obstacle1, obstacle2, obstacle3, obstacle4, obstacle5, obstacle6;
//var score;

function preload() {
    trex_running = loadAnimation("Screen Shot 2021-04-05 at 8.47.52 PM.png");
    trex_collided = loadImage("trex_collided.png");
    restartImage = loadImage("restart.png");
    gameOverImage = loadImage("gameOver.png");
    groundImage = loadImage("ground2.png");
    cloudImage = loadImage("cloud.png");
    obstacle1 = loadImage("obstacle1.png");
    obstacle2 = loadImage("obstacle2.png");
    obstacle3 = loadImage("obstacle3.png");
    obstacle4 = loadImage("obstacle4.png");
    obstacle5 = loadImage("obstacle5.png");
    obstacle6 = loadImage("obstacle6.png");
}

function setup() {
    createCanvas(600, 200);
    trex = createSprite(50, 180, 20, 50);
    trex.addAnimation("running", trex_running);
    trex.scale = 0.1;
    ground = createSprite(200, 180, 400, 20);
    ground.addImage("ground", groundImage);
    ground.x = ground.width / 2;
    ground.velocityX = -(4 + 3 * score / 100);
    invisibleGround = createSprite(200, 190, 400, 10);
    invisibleGround.visible = false;
    cloudsGroup = new Group();
    obstaclesGroup = new Group();
    gameOver = createSprite(300, 100, 10, 10);
    gameOver.addImage(gameOverImage);
    gameOver.scale = 0.5;
    gameOver.visible = false;
    restart = createSprite(300, 140, 10, 10);
    restart.addImage(restartImage);
    restart.scale = 0.5
  restart.visible = false;
}

function draw() {
    background("white");
    text("Score: " + score, 500, 50);
    if (gameState == PLAY) {
        score = score + Math.round(getFrameRate() / 60);
        if (keyDown("space")) {
            trex.velocityY = -10;
        }
        trex.velocityY = trex.velocityY + 0.8
        if (ground.x < 0) {
            ground.x = ground.width / 2;
        }
        trex.collide(invisibleGround);
        spawnClouds();
        spawnObstacles();
        if (obstaclesGroup.isTouching(trex)) {
            gameState = END;
        }
    } else if (gameState === END) {
        gameOver.visible = true;
        restart.visible = true;
        //set velcity of each game object to 0
        ground.velocityX = 0;
        trex.velocityY = 0;
        obstaclesGroup.setVelocityXEach(0);
        cloudsGroup.setVelocityXEach(0);
        //change the trex animation
        trex.addAnimation("trex_collided", trex_collided);
        //set lifetime of the game objects so that they are never destroyed
        obstaclesGroup.setLifetimeEach(-1);
        cloudsGroup.setLifetimeEach(-1);
    }
    if (mousePressedOver(restart)) {
        reset();
  }
  textSize(22);
  text('Mrs K, survive all the obstacles, and save the students!', 10, 30);
    drawSprites();
}

function spawnClouds() {
    //write code here to spawn the clouds
    if (frameCount % 60 === 0) {
        var cloud = createSprite(600, 120, 40, 10);
        cloud.y = Math.round(random(80, 120));
        cloud.addImage(cloudImage);
        cloud.scale = 0.5;
        cloud.velocityX = -3;
        //assign lifetime to the variable
        cloud.lifetime = 200;
        //adjust the depth
        cloud.depth = trex.depth;
        trex.depth = trex.depth + 1;
        //add each cloud to the group
        cloudsGroup.add(cloud);
    }
}

function spawnObstacles() {
    if (frameCount % 60 === 0) {
        var obstacle = createSprite(600, 165, 10, 40);
    obstacle.velocityX = -(4 + 3 * score / 100);
    //generate random obstacles
        var rand = Math.round(random(1, 6));
        switch (rand) {
            case 1:
                obstacle.addImage(obstacle1);
                break;
            case 2:
                obstacle.addImage(obstacle2);
                break;
            case 3:
                obstacle.addImage(obstacle3);
                break;
            case 4:
                obstacle.addImage(obstacle4);
                break;
            case 5:
                obstacle.addImage(obstacle5);
                break;
            case 6:
                obstacle.addImage(obstacle6);
                break;
            default:
                break;
        }
        //assign scale and lifetime to the obstacle           
        obstacle.scale = 0.5;
        obstacle.lifetime = 300;
        //add each obstacle to the group
        obstaclesGroup.add(obstacle);
    }
}

function reset() {
    gameState = PLAY;
    gameOver.visible = false;
    restart.visible = false;
    obstaclesGroup.destroyEach();
    cloudsGroup.destroyEach();
    trex.addAnimation("trex", trex_running);
    score = 0;
}

Answer 1

您在 draw 函数中尝试过吗？你可以做类似的事情，

if (mousePressedOver(restart) || score >= 200) {
    reset();
}

当分数变为 200 时结束 p5js 游戏

Ending a p5js game when the score becomes 200

javascript

p5.js