Spacing out obstacles

p5.js Libraries
1

I’ve hit another snag with my code. As of now, I have the obstacles moving towards the player at random with this code.

// Spawn obstacles
  if (random(1) < 0.01) {
    obstacle.push(new Obstacle());

  }

Though this code can occasionally spawn an impossible amount of obstacles to jump over.
If possible, I’d like to be able to space the obstacles apart properly in order to make it possible for the player to jump over all of them. Any help is appreciated.

Here’s the entire code:

//References:

//Collision code:
//https://github.com/bmoren/p5.collide2D#colliderectrect.
//Used to make collision possible with "collideRectRect".

//Stalinist One One Font
//"https://fonts.googleapis.com/css2family=Roboto:wght@300&family=Stalinist+One&display=swap"

let player;
let obstacle = [];
let score = 0;


function setup() {
  createCanvas(900, 500);


  player = new Player();
}

// Press Space to Jump
function keyPressed() {
  if (key == ' ') {
    player.jumpSp();
  }
}

function draw() {
  
  



  // Spawn obstacles
  if (random(1) < 0.01) {
    obstacle.push(new Obstacle());

  }



  background(220);

  // Score
  fill(0);
  textSize(20);
  textFont('Stalinist One')
  text(('Score: ' + score), 50, 50);

  // Player
  player.show();
  player.jump();


  // Obstacles
  for (let obs of obstacle) {
    obs.move();
    obs.show();

    // Game Over Screen
    if (player.coll(obs)) {
      fill(0);
      rect(0, 0, width, height);

      // Font
      fill(220);
      textSize(50);
      textFont('Stalinist One')
      text('GAME OVER', 180, height / 2);

      textSize(20);
      text(('Final Score: ' + score), 300, 350);

      noLoop();
    }
  }

}



// Player properties

class Player {
  constructor() {
    this.s = 50;
    this.x = 50;
    this.y = height - 25;
    this.j = 0;
    this.gravity = 1;
    this.angle = 0;

  }
  // Jump movement and speed
  jumpSp() {
    if (this.y == height - 25) {
      this.j = -20;
    }
  }

  // Detect collision
  coll(obstacle) {
    return collideRectRect(this.x - 25, this.y - 25, this.s, this.s, obstacle.x, obstacle.y, obstacle.w, obstacle.h);
  }


  // Gives player gravity
  // Keeps player from leaving canvas
  jump() {
    this.y += this.j;
    this.j += this.gravity
    this.y = constrain(this.y, 25, height - 25)


  }
  
  // Show the player
  show() {
    angleMode(DEGREES);
    rectMode(CENTER);

    noStroke();
    fill(150);

    // Rotate player when jumping
    // Push and pop save and restore the transformation - Thanks to Chrisir on the P5.js forum for helping me with the push and pop.
    if (this.y < height - 25) {
      push();
      translate(this.x, this.y);
      rotate(this.angle);
      this.angle = this.angle + 7;
      rect(0, 0, this.s, this.s);
      pop();
      
      
    } else {
      rect(this.x, this.y, this.s, this.s);
     
    }
  }
}

// Obstacle properties
class Obstacle {

  constructor() {
    this.w = 30;
    this.h = 60;
    this.x = width;
    this.y = height - this.h;
  }

  // Move obstacles from right to left
  move() {
    this.x -= 10;
  }
  
  // Show the obstacle
  show() {
    angleMode(RADIUS);
    rectMode(CORNER);
    noStroke();
    fill(0);
    rect(this.x, this.y, this.w, this.h);

    // Update score whenever the obstacle x position is equal to the player x position
    if (this.x == player.x) {
      score = score + 1;
    }
  }

}
2

You can access system variable frameCount in order to establish a number of frames that spawning any new Obstacle is in cooldown wait state: :stopwatch:

const COOLDOWN = 5, CHANCE = .01;
var cooldown;

// ...

if (frameCount > cooldown && random(1) < CHANCE) {
  obstacles.push(new Obstacle);
  cooldown = frameCount + COOLDOWN;
}