My p5.js code is sometimes lagging and idont know how?

Question

I am a beginner to p5.js and I was trying to make a catching game, where the balls fall from the sky and you catch them with a basket, but when you run the code, sometimes the balls don't fall down until waiting a few seconds and moving the basket around, could anyone tell me why this is?

Here is my code:

let speed = 3;
let x = 300;
let y = 0;
let score = 0;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  ellipse(x, y, 20, 20);
  y = y + speed;
  rect(mouseX, height - 10, 60, 40);
  fill(255);
  text("score = " + score, 30, 20);

  if (y > height - 10 && x > mouseX - 20 && x < mouseX + 20) {
    y = -20;
    speed += 1;
    score += 1;
  }
  if (y == -20) {
    x = random(width);
  }
}
function reset(){
  score = 0;
  speed = 2;
  y = -20;
}

When asking questions on StackOverflow you should include you code, preferably as a [Runnable Snippet](https://stackoverflow.com/a/67410652/229247) rather than linking to an external site. — Paul Wheeler, Jan 02 '22 at 23:24

score 2 · Answer 1 · answered Jan 02 '22 at 23:42

Your game logic seems a bit strange:

Each frame you increase y by speed. Each frame you check if the y value has passed paddle position (height - 10) and is in is within the the area of the paddle (although the math for this is a little off). However, you don't have any condition for when the ball has gone off the edge of the screen and missed the paddle. As a result nothing happens once the ball goes off screen until the player moves the paddle to a position where it would have caught the ball.

Here's a fixed version:

let speed = 2;
let x = 300;
let y = 0;
let score = 0;
let coolDown = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  x = width / 2;
}

function draw() {
  if (coolDown > 0) {
    background('red');
  } else {
    background(0);
    ellipse(x, y, 20, 20);
    y = y + speed;
  }
  rect(mouseX - 20, height - 10, 40, 10);
  fill(255);
  text("score = " + score, 30, 20);
  // After the player misses give them a second
  if (coolDown > 0) {
    coolDown--;
    return;
  }
  if (y > height - 10 && x > mouseX - 20 && x < mouseX + 20) {
    y = -20;
    speed += 0.5;
    score += 1;
  } else if (y > height) {
    // The ball is off screen
    coolDown = 30;
    y = -20;
    score -= 1;
  }
  if (y == -20) {
    x = random(width);
  }
}
function reset() {
  score = 0;
  speed = 2;
  y = -20;
}

html, body {
margin: 0;
padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

One other thing to be aware of is that if you move your mouse outside of the window or iframe then p5.js will not update the mouseX and mouseY positions. To prevent this from happening you can look into using requestPointerLock.

My p5.js code is sometimes lagging and idont know how?

1 Answers1