Making a circle disappear when clicked on

p5.js Coding Questions
1

I have some experience with java but I am new to p5js. I created a game with circles falling down and you gain 1 point every time you click on a circle, also when a circle reaches the bottom of the screen you lose a life. When you click on the circle it should disappear but it doesn’t, also the score doesn’t increase. Any help will be appreciated.

code

/*
-Goal of the Game is to click on as many circles as you can. 
-You start with 5 Lives. Lives get deducted by 1 for each circle that reaches the bottom of the screen.
-You get 1 point for each circle clicked
-Game is over when you have 0 Lives
-The game over screen will show you your score
-As you click on circles the curve following the mouse will change color
-The game over screen background will change to the average color of all the circles that was clicked on
*/

	let strokeColor;
	let circles;
  let mode = 0;
	let score =0;
	let lives = 5;
	let c2, avgColor;
	let totalPopped;
	var min_xPos=10, max_xPos=900;
	var min_yPos= -800, max_yPos=-10;
	var min_speed=1, max_speed= 2;
	var min_diam =30, max_diam=120;
  
  function setup(){
    createCanvas(900,900);
		strokeColor = color(0,255,255);
		circles = new Array(10);
    for (var i =0; i<circles.length; i++){
      circles[i] = new Circle();
    }
  }
  
  function draw(){
    if(mode == 0){
      splash();}
    if(mouseIsPressed == true){
      mode =1;}
    if (mode == 1){
      startGame();}
  }
  function startGame(){   
    background(0);
    textSize(30);
    fill(255);
    text( "Score: " + score, 50, 400);
    text("Lives: " + lives, 50, 450);
    drawCurves();
    
    for (var i = 0; i < circles.length; i++) {
      circles[i].createCircles();
      circles[i].GameOver();
    }
  }
  
  function splash(){
    background(0);
    fill(255);
    textSize(50);
    var s = "Goal is to destroy as many circles as you can. You gain 1 point for every circle you click on. You loose 1 life for every circle that touches the bottom of the screen. The game is over when you have no more lives. ";
    text(s,50,50,800,800);
    fill(255,0,0);
    text( "Click anywhere to start Game ", 100, 700);
  }

  function drawCurves(){
    noFill();
    stroke(strokeColor);//set the color to be the popped the circle
    strokeWeight(3);
    bezier(mouseX, mouseY,random(0,width),mouseY+random(0,height),random(0,width),mouseY,width/2,height);//create random curves following the mouse
  }
  
  function mouseClicked(){
		for (var i = 0; i < circles.length; i++) {
      if (circles[i].clickedCircle(mouseX, mouseY)){
        strokeColor=c2;//get the color from the clicked circle 
        score++;
        circles[i].isClicked = false;
        break;
      }
    }
}

class Circle{

  constructor(){
    this.circleSettings();
  }
  
  circleSettings(){//set values for position,createCanvas, speed and color for the circles
    this.isClicked = true;
    this.c = color(random(255),random(255),random(255));
    this.xpos = random(min_xPos, max_xPos);
    this.ypos = random(min_yPos, max_yPos);
    this.speed = random(min_speed, max_speed);
    this.diameter = random(min_diam, max_diam);
  }
  
  createCircles() {
    if(!this.isClicked){
      this.circleSettings();
    }
    this.move();
    this.draw_Circles();
  }
  
  move(){
		let dif = this.ypos-this.diameter;
    if (dif <= height){//the circles has not yet reached the bottom increase the speed.
      this.ypos += this.speed;
		}
    else if (dif > height ){//the circle reached the bottom of the screen minus 1 life
      this.isClicked = false;
      lives--; 
    }
  }
  
  draw_Circles(){
    fill(this.c);
    stroke(255);
    ellipse(this.xpos,this.ypos,this.diameter,this.diameter);
  }
  
  clickedCircle(mouseX, mouseY){
		var d = dist(mouseX, mouseY, this.xPos, this.yPos);
		 if (d < this.diameter / 2){
      c2 = this.c; // get the color of the current circle to set for color of curves
      totalPopped++;
      this.getAverage(c2);//get the average of all the popped circles colors 
      return true;    
    }else{
      return false;
    }
  }
  getAverage(tmp){
    var ravg =0, bavg=0, gavg=0;
    let redVal = red(tmp);//get the individual rgb values of the clicked circle
    let greenVal = green(tmp);
    let blueVal = blue(tmp);
    ravg += redVal;
    gavg += greenVal;
    bavg += blueVal;
    ravg = constrain(redVal,0,255);
    gavg = constrain(greenVal,0,255);
    bavg = constrain(blueVal,0,255);
    if(totalPopped == 0){
      avgColor= color(0);
    }else{ 
      ravg = ravg/ height * width;
      bavg = bavg/ height * width;
      gavg = gavg/ height * width;
      avgColor= color(ravg,gavg,bavg);
    }
    
  }
  GameOver(){
    if(lives == 0){
      background(avgColor);//set the background to be the average color of all the circles popped
      textSize(50);
      fill(255);
      text( "Game Over", 300, 300);
      text( "Score: " + score, 300, 400);
      setup();
    }
  }
  
}
2 Likes
2

check the variables in your dist within the clickedCircle() method, they don’t match your variable names.

you should also avoid naming your parameters mouseX/mouseY.

4 Likes
3

@meh
simply , check if the circle is clicked and if yes then pop out the circle from circle array
!
that’s it
for this you will need to give every circle a id , to keep track which circle to pop out !

1 Like
4

I thought mouseX and mouseY is a system variable to get the x and y position of the mouse?
I first made this game in Processing and it was working fine, but now I need it in p5js. So I have been trying to figure out what changes I need to make this work in p5js.

1 Like
5

They are system variables … but if you don’t pass the arguments mouseX/mouseY will be undefined within that method. Seems like it’s an opening for confusion.

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

function draw() {
  background(220);
  
  logMousePos();
}

const logMousePos = (mouseX,mouseY) => {
 console.log(mouseX,mouseY); 
}
2 Likes
6

thanks for that idea. I got it to work using this method, but then there are no more circles falling down. so i created an if statement checking if there are less than 4 circles to push more circles in the array. This was the only way I can think of to have it continuously falling circles. Is there a better way?

1 Like
7

thanks for the explanation. I see what I did wrong, the game is slowly coming together.

1 Like