Tengo todos los componentes para este proyecto con la excepción de un método de clase para mostrar las dos primeras imágenes en la matriz (la Pokébola y el eevee predeterminado), luego elijo aleatoriamente de una matriz una imagen más (evoluciones de eevee) y luego detengo .
Por favor ten paciencia soy muy nuevo en esto.
class Pokemon { constructor() { this.listOfCharmander = [ "./images/pokeball.png", "./images/charmander/charmander0.png", "./images/charmander/charmander1.png", "./images/charmander/charmander2.png", ]; this.index = 0; this.pokemon = document.createElement("img"); } handleClick = () => { if (this.index < 3) { ++this.index; this.pokemon.src = this.listOfCharmander[this.index]; } }; buildPokemon = () => { this.pokemon.src = this.listOfCharmander[0]; this.pokemon.classList.add("pokemon"); this.pokemon.addEventListener("click", this.handleClick); main.appendChild(this.pokemon); }; } const pokemon = new Pokemon(); const pokemon1 = new Pokemon(); pokemon.buildPokemon(); pokemon1.buildPokemon(); class Eevee { constructor() { this.eeveeEvolutions = [ "/images/pokeball.png", "images/eevee/eevee0.png", "images/eevee/eevee1.png", "images/eevee/eevee2.png", "images/eevee/eevee3.png", "images/eevee/eevee4.png", "images/eevee/eevee5.png", "images/eevee/eevee6.png", "images/eevee/eevee7.png", "images/eevee/eevee8.png", ]; this.index = 0; this.eevee = document.createElement("img"); } handleClick = () => { if (this.index < 9) { ++this.index; this.eevee.src = this.eeveeEvolutions[this.index]; } }; buildEevee = () => { this.eevee.src = this.eeveeEvolutions[0]; this.eevee.classList.add("eevee"); this.eevee.addEventListener("click", this.handleClick); main.appendChild(this.eevee); }; } const eevee = new Eevee(); const eevee1 = new Eevee(); eevee.buildEevee(); eevee1.buildEevee();...
Pido disculpas si mi pregunta no es exactamente clara. Necesito agregar a mi método handClick. Una forma de mostrar la primera imagen (la Pokébola) y luego la segunda imagen (eevee predeterminado) y luego elegir al azar (incluyendo que permanezca igual, no podría haber ninguna evolución) una evolución más de la matriz restante.
si siempre necesita las dos primeras imágenes en su matriz, puede agregar un atributo adicional a su clase Eevee para almacenar la ruta de esas imágenes, y para una imagen aleatoria puede agregar este código a su handleClick()
handleClick = () => { this.index=Math.floor(Math.random(2,9)*10) this.eevee.src = this.eeveeEvolutions[this.index]; };