{"id":446,"date":"2022-10-06T13:24:14","date_gmt":"2022-10-06T11:24:14","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=446"},"modified":"2022-11-18T15:17:07","modified_gmt":"2022-11-18T13:17:07","slug":"9-4-arrays-y-objetos","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/9-4-arrays-y-objetos\/","title":{"rendered":"9.4. Arrays<\/em> y objetos"},"content":{"rendered":"

Ahora que sabemos utilizar los arrays<\/em>, podemos hacer frente a las dificultades que se nos planteaban a la hora de crear m\u00faltiples objetos, ya que podemos tambi\u00e9n crear arrays<\/em> de objetos. Creemos una clase Car<\/span> con propiedades para su posici\u00f3n (un array<\/em> para las coordenadas x<\/em> e y<\/em>), velocidad y tama\u00f1o. Tambi\u00e9n a\u00f1adiremos m\u00e9todos para que se muevan, se paren y el m\u00e9todo que los dibuje.<\/p>\n

class Car {\r\n  constructor(position, speed) {\r\n    this.position = position;\r\n    this.speed = speed;\r\n    this.color = random([\"lightblue\", \"pink\"]);\r\n    this.size = 50;\r\n  }\r\n  display() {\r\n    rectMode(CENTER);\r\n    fill(this.color);\r\n    rect(this.position[0], this.position[1], this.size);\r\n    fill(255);\r\n  }\r\n  move() {\r\n    this.position[0] += speed;\r\n  }\r\n  checkBorder(){\r\n    if(this.position[0] > width + this.size * 0.5){\r\n      this.position[0] = -this.size * 0.5;\r\n      this.position[1] = random(height);\r\n    }\r\n  }\r\n  stop() {\r\n   this.speed = 0;\r\n  }\r\n}<\/pre>\n
Ahora en otra pesta\u00f1a podemos escribir el c\u00f3digo de nuestro sketch<\/em> principal, donde crearemos los distintos objetos de la clase Car<\/span>.<\/p>\n
\"\"
Figura 124. Creaci\u00f3n de un array de objetos
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
En el setup()<\/span> creamos mediante un bucle un total de diez coches con posiciones en (x<\/em>, y<\/em>) aleatorias y velocidad variable entre 1 y 3. En el draw()<\/span> iteramos por el array<\/em> de coches para llamar a los m\u00e9todos display()<\/span>, move()<\/span> y checkBorders()<\/span> de cada uno de los objetos y, por \u00faltimo, en keyPressed()<\/span> volvemos a iterar por el array<\/em> para llamar al m\u00e9todo stop() de cada uno.<\/p>\n
Otra manera en la que podr\u00edamos a\u00f1adir objetos al array<\/em> es mediante el m\u00e9todo push()<\/span>. Este m\u00e9todo a\u00f1ade un nuevo elemento al final del array<\/em> al que lo apliquemos. En el ejemplo anterior, podr\u00edamos querer que adem\u00e1s de los objetos que aparecen al iniciarse el sketch<\/em> pudi\u00e9ramos a\u00f1adir nuevos objetos al hacer clic con el rat\u00f3n:<\/p>\n
function mousePressed() {\r\n   let mouseCar = new Car([mouseX, mouseY], random(1, 3));\r\n   cars.push(mouseCar);\r\n}<\/pre>\n
A\u00f1adiendo esta funci\u00f3n a nuestro c\u00f3digo principal, cada vez que hagamos clic con el rat\u00f3n estaremos creando un nuevo objeto Car<\/span> (en este caso, con las coordenadas del rat\u00f3n) y a\u00f1adi\u00e9ndolo al array<\/em> preexistente. Adem\u00e1s de push()<\/span> tambi\u00e9n podemos usar pop()<\/span> para eliminar el \u00faltimo elemento de un array<\/em> dado:<\/p>\n
let names = [\"John\", \"Mary\"];\r\nnames.push(\"Tom\");\r\nconsole.log(names);  \/\/Imprime [\"John\", \"Mary\", \"Tom\"];\r\n\r\nlet values = [3, 10, 20];\r\nvalues.pop();\r\nconsole.log(values);  \/\/Imprime [3, 10];<\/pre>\n","protected":false},"excerpt":{"rendered":"
Ahora que sabemos utilizar los arrays, podemos hacer frente a las dificultades que se nos planteaban a la hora de crear m\u00faltiples objetos, ya que podemos tambi\u00e9n crear arrays de objetos. Creemos una clase con propiedades para su posici\u00f3n (un array para las coordenadas x e y), velocidad y tama\u00f1o. Tambi\u00e9n a\u00f1adiremos m\u00e9todos para que […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/446"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=446"}],"version-history":[{"count":3,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/446\/revisions"}],"predecessor-version":[{"id":994,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/446\/revisions\/994"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}