9. Objectes i arrays

9.4. Arrays i objectes

Ara que sabem utilitzar els arrays, podem fer front a les dificultats que se’ns plantejaven a l’hora de crear múltiples objectes, ja que podem també crear arrays d’objectes. Creem una classe Car amb propietats per a la seva posició (un array per a les coordenades x i y), velocitat i mida. També afegirem mètodes perquè es moguin, s’aturin i el mètode que els dibuixi.

class Car {
  constructor(position, speed) {
    this.position = position;
    this.speed = speed;
    this.color = random(["lightblue", "pink"]);
    this.size = 50;
  }
  display() {
    rectMode(CENTER);
    fill(this.color);
    rect(this.position[0], this.position[1], this.size);
    fill(255);
  }
  move() {
    this.position[0] += speed;
  }
  checkBorder(){
    if(this.position[0] > width + this.size * 0.5){
      this.position[0] = -this.size * 0.5;
      this.position[1] = random(height);
    }
  }
  stop() {
   this.speed = 0;
  }
}

Ara en una altra pestanya podem escriure el codi del nostre sketch principal, on crearem els diferents objectes de la classe Car.

Al setup() creem mitjançant un bucle un total de deu cotxes amb posicions en (x, y) aleatòries i velocitat variable entre 1 i 3. Al draw() iterem per l’array de cotxes per cridar als mètodes display(), move() i checkBorders() de cadascun dels objectes i, finalment, a keyPressed() tornem a iterar per l’array per cridar al mètode stop() de cadascun.

Una altra manera en la qual podríem afegir objectes a l’array és mitjançant el mètode push(). Aquest mètode afegeix un element nou al final de l’array al qual l’apliquem. A l’exemple anterior, podríem voler que, a més dels objectes que apareixen en iniciar-se l’sketch, poguéssim afegir objectes nous en fer clic amb el ratolí:

function mousePressed() {
   let mouseCar = new Car([mouseX, mouseY], random(1, 3));
   cars.push(mouseCar);
}

Afegint aquesta funció al nostre codi principal, cada vegada que cliquem amb el ratolí estarem creant un objecte nou Car (en aquest cas, amb les coordenades del ratolí) i afegint-lo a l’array preexistent. A més de push() també podem usar pop() per eliminar l’últim element d’un array donat:

let names = ["John", "Mary"];
names.push("Tom");
console.log(names);  //Imprimeix ["John", "Mary", "Tom"];

let values = [3, 10, 20];
values.pop();
console.log(values);  //Imprimeix [3, 10];