Click and point game with array - troubleshooting

p5.js Coding Questions
8

It worked!!! And it allowed me to “clean” my setup function and get a better understanding of the constructor. Thank you very much. I can now move to a next step in my game.

Here is my new code:

let aquarium;
let inventaireblue;
let fishs = [];
let fishblue1;
let fishblue2;

function setup() {
  createCanvas(1200, 700);
  inventaireblue = new Inventaire(1060, 150, 150);  
  aquarium = new Aquarium(600, 350, 650);
  for (let i = 0; i < 10; i++) {
    fishs[i] = new Fish(color(255, 0, 204));
    fishblue1 = new Fish(color(51, 153, 255));
    fishblue2 = new Fish(color(51, 153, 255));
}
}

function draw() {
  inventaireblue.show();
  aquarium.show();

  //Fishes that stay in the aquarium
  for (let i = 0; i < fishs.length; i++) {
    push();
    fishs[i].move();
    fishs[i].show();
    pop();
  }

  //Intruder fishes
  //Fish blue #1
  push();
  fishblue1.show();
  fishblue1.move();
  pop();
  //Fish blue #2
  push();
  fishblue2.show();
  fishblue2.move();
  pop();
}

function mousePressed() {
  if(fishblue1.inside(mouseX, mouseY)){
    fishblue1.hasBeenClicked = true;
    print('fish#1 clicked');
  }
  if(fishblue2.inside(mouseX, mouseY)){
    fishblue2.hasBeenClicked = true;
    print('fish#2 clicked');
  }
}


//INVENTORY
class Inventaire {
  constructor(tempX, tempY, tempR) {
    this.x = tempX;
    this.y = tempY;
    this.r = tempR;
  }

  show() {
    fill(171, 252, 255);
    stroke(51, 153, 255);
    strokeWeight(10);
    ellipse(this.x, this.y, this.r);
  }
}

//AQUARIUM
class Aquarium {
  constructor(tempX, tempY, tempR) {
    this.x = tempX;
    this.y = tempY;
    this.r = tempR;
  }

  show() {
    fill(171, 252, 255);
    stroke(255, 0, 204);
    strokeWeight(20);
    ellipse(this.x, this.y, this.r);
  }
}

//FISH
class Fish {
  constructor(tempColor) {
    this.x = random(500,700);
    this.y = random(200,500);
    //x y inventaire
    this.x2 = random(1050, 1100);
    this.y2 = random(100, 200);
    this.color = tempColor;
    this.xspeed = random(1,3);
    this.yspeed = random(1,3);
    this.rbody = 100;
    this.fscale = random(0.6, 0.8);
    this.hasBeenClicked = false;
  }

  inside(px, py) {
    let d = dist(px, py, this.x, this.y);
    if (d < 50) {
      return true;
    } else {
      return false;
    }
  }

  //changeColor(Color2) {
    //this.color = Color2;
  //}

  changePosition(Position2) {
    this.position = Position2;
  }
  
  changeSide() {
    if (this.xspeed > 0) {
      scale (this.scale = 5, this.scale);
    } 
  }


  move() {
    if (this.hasBeenClicked){
      this.xspeed = 0;
      this.yspeed = 0;
    }
    let d2 = dist(this.x, this.y, aquarium.x, aquarium.y);
    if (d2 > 200 || this.y < 200) {
      this.xspeed = this.xspeed * -1;
      this.yspeed = this.yspeed * -1;
    }
    this.x = this.x + this.xspeed;
    this.y = this.y + this.yspeed;
  }

  show() {
    if (this.hasBeenClicked) {
      translate(this.x = this.x2, this.y = this.y2);
      scale(0.3);
      fill(this.color);
      stroke(0);
      strokeWeight(3);
      ellipse(0, 0, 100, 100);
      //queue
      triangle(- 50, 0, - 100, - 50, 0 - 100, 50);
      //aileron
      triangle(0, 10, 5, 30,  - 30, 30);
      //yeux
      fill(255);
      ellipse(15,  - 10, 30, 30);
      fill(0);
      ellipse(15, - 10, 15, 15);
      //this.xspeed=0.5;
      //this.yspeed=0.2;
    } else {
      //corps droite
      if (this.xspeed > 0) {
        translate(this.x, this.y);
        scale(this.fscale);
        fill(this.color);
        stroke(0);
        strokeWeight(3);
        ellipse(0, 0, 100, 100);
        //queue
        triangle(- 50, 0, - 100, - 50, 0 - 100, 50);
        //aileron
        triangle(0, 10, 5, 30,  - 30, 30);
        //yeux
        fill(255);
        ellipse(15,  - 10, 30, 30);
        fill(0);
        ellipse(15, - 10, 15, 15);
      } else {    
        //corps gauche
        translate(this.x, this.y);
        scale(this.fscale);
        fill(this.color);
        stroke(0);
        strokeWeight(3);
        ellipse(0, 0, 100, 100);
        //queue
        triangle(50, 0, 100, - 50, 100, 50);
        //aileron
        triangle(0, 10,  - 5, 30, 30, 30);
        //yeux
        fill(255);
        ellipse(- 15, - 10, 30, 30);
        fill(0);
        ellipse(- 15, - 10, 15, 15);
      }
    }
  } 
}
1 Like