Restarting my draw function does not work

Question

I have a game in which there si a rocket. When rockets health is 0 the game over screen should appear and when any key is pressed the game should restart.

I tried using redraw and loop keywords in p5.js

let x = 240;
let x1 = 258;
let score = 0;
let health = 5;
let opelsins = [];
let ecllipseOpelsin = [];
let monsterimg;
let meteorimg;
let inGameSound;
let opelsinimg;
let gameOverSound;
let backgroundsun;
let gameoverScreen;

function collideRectangleCircle(rx, ry, rw, rh, cx, cy, cr)
{
    return rx+rw > cx-cr && cx+cr > rx && ry+rh > cy-cr && cy+cr > ry;
}

function Opelsin() {
    this.x = random(40,560);
    this.y = random(-200,-190);
    this.speed = random(3,10);

    this.fall = function() {
        this.y = this.y + this.speed;
        if (this.y > height) {
            this.y = random(-200,-100);
            this.x = random(40,560);
            this.speed = random(3, 10);
        }
    };
    this.show = function() {
        fill(255)
        ellipse(this.x + 15,this.y + 34, 10, 10)
        image(opelsinimg,this.x,this.y, 40, 40)
    };
}

function opelsinmodel() {
    this.x = random(0,600);
    this.y = random(-300,-310);
    this.speed = random(3,10);
    this.show = function() { ellipse(this.x,this.y, 20, 20) };
}
function setup() {
    createCanvas(600, 400);
    frameRate(300)
    inGameSound.setVolume(1);
    inGameSound.loop();
    interval = setInterval(scoreCount, 500);
}

function gameOver() {
    textSize(20);
    text("GAME OVER", 250, 200);
    text("SCORE: " + score, 270, 220);

    fill(255);
}
function newGame() {
  if (keyIsPressed === true) {
    //redraw();
    loop();
  }
}



function preload() {
    soundFormats('m4a')
    monsterimg = loadImage('assets/monster.png');
    opelsinimg = loadImage('assets/opelsin.png');
    inGameSound = loadSound('assets/spaceBotInGameMusic.m4a');
    gameOverSound = loadSound('assets/gameOverInGameSound.m4a');
    backgroundsun = loadImage('assets/backgroundsun.jpg');
    gameoverScreen = loadImage('assets/gameoverScreen.png');

}

function scoreCount() {
    score++;
}

function draw() {
  //  background(11, 72, 170);
    image(backgroundsun, 0, 0, 700, 400);

      if (score == 0) {
        for (let i = 0; i < 5; i ++) {
          opelsins[i] = new Opelsin();
          ecllipseOpelsin[i] = new opelsinmodel();
    }
  }  if (score == 50) {
        for (let i = 0; i < 10; i ++) {
          opelsins[i] = new Opelsin();
          ecllipseOpelsin[i] = new opelsinmodel();
    }
  }
    if (score == 100) {
      for (let i = 0; i < 15; i ++) {
        opelsins[i] = new Opelsin();
        ecllipseOpelsin[i] = new opelsinmodel();
    }
  }
  if (score == 150) {
    for (let i = 0; i < 20; i ++) {
      opelsins[i] = new Opelsin();
      ecllipseOpelsin[i] = new opelsinmodel();
    }
  }
  if (score == 200) {
    for (let i = 0; i < 25; i ++) {
      opelsins[i] = new Opelsin();
      ecllipseOpelsin[i] = new opelsinmodel();
  }
}



    if (keyIsDown(LEFT_ARROW) && x > -14) {
        x -= 5;
    }

    if (keyIsDown(RIGHT_ARROW) && x < 550) {
        x += 5;
    }
    if (keyIsDown(LEFT_ARROW) && x1 > 9) {
        x1 -= 5;
    }
    if (keyIsDown(RIGHT_ARROW) && x1 < 565) {
        x1 += 5;
    }
    fill(255, 255, 0)
    rect(x1, 345, 20, 20)
    image(monsterimg,x,310,60,60)

    for (let opelsin of opelsins) {
        opelsin.fall();
        opelsin.show();
    }

    textSize(20);
    text("Health: " + health, 10, 20);
    fill(255);
    textSize(20);
    text("Score: " + score, 10, 40);
    fill(255);
    for (let opelsin of opelsins) {
        hit = collideRectCircle(x1, 335, 20, 30, opelsin.x, opelsin.y, 40);
        if(hit == true) {
            health -= 1;
            opelsin.y = height+1;
            if (health == 0) {
              inGameSound.stop();
              gameOverSound.setVolume(1);
              gameOverSound.loop();
              image(gameoverScreen, 0, 0, 600, 400);
              gameOver();
              noLoop();
              newGame();






            }
        }
    }

}

What I expect is when the game over screen appears and then when the random key is pressed the game should restart.

score 1 · Accepted Answer · answered Jun 11 '19 at 10:40

The issue is that the game loop is stopped by noLoop() when the game is over. The loop is never restarted.

Set a state (e.g waitRestart) when the game is over (instead of newGame()):

let waitRestart = false;

function draw() {

    // [...]

    for (let opelsin of opelsins) {
        hit = collideRectCircle(x1, 335, 20, 30, opelsin.x, opelsin.y, 40);
        if(hit == true) {
            health -= 1;
            opelsin.y = height+1;
            if (health == 0) {
                inGameSound.stop();
                gameOverSound.setVolume(1);
                gameOverSound.loop();
                image(gameoverScreen, 0, 0, 600, 400);
                gameOver();
                noLoop();

                // newGame();          <----- delete

                waitRestart = true; // <----- wait for restart
            }
        }
    }
}

Add a keyPressed() callback instead of the newGame() function, which restarts the game and set all initial states like health and score:

function keyPressed() {
    if (waitRestart) {
        waitRestart = false;
        score = 0;
        health = 5;
        loop();
    }
}

1

Thank you. I fixed it alredy – Lime Jun 13 '19 at 11:40

Restarting my draw function does not work

1 Answers1