I am working on an assignment for school and have it working. The Goal was to render Pokémon to the page and have the ball shake as if something was trying to pop out of it. I have the images shaking but am not sure how to make it STOP once the final image is reached with what I have so far:
class Eevee extends Pokemon {
constructor (evolutionPath, evolutionStage) {
super (evolutionPath = [
"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"
], evolutionStage)
this.evolutionStage = 0
}
evolve = function () {
main.append(this.image)
this.image.setAttribute(`src`, `${this.evolutionPath[0]}`)
this.image.addEventListener("click", function () {
this.toggleShake(this.image)
let evolveChance = Math.floor(Math.random( ) * 5 + 1)
if (evolveChance === 1){
if (this.evolutionStage === 0){
this.evolutionStage = 1
this.image.setAttribute(`src`, `${this.evolutionPath[this.evolutionStage]}`)
this.evolutionStage = Math.floor(Math.random() * ((this.evolutionPath.length)- 2) + 1)
return this.image
} else if (this.evolutionStage <= this.evolutionPath.length - 1 && this.evolutionStage >= 2){
this.image.setAttribute(`src`, `${this.evolutionPath[this.evolutionStage]}`)
return this.image
}
}}.bind(this))
}.bind(this)
}
let eeveeA = new Eevee ()
eeveeA.evolve()I was able to refactor my previous if statement and get it to work:
evolve = function () {
main.append(this.image)
this.image.setAttribute(src, ${this.evolutionPath[this.evolutionStage]})
this.image.addEventListener("click", function () {
let evolveChance = Math.floor(Math.random( ) * 5 + 1)
***if(this.evolutionStage === 0 || this.evolutionStage === 1) {
this.toggleShake(this.image)
}***
if (evolveChance === 1){
if (this.evolutionStage === 0){
this.evolutionStage = 1
this.image.setAttribute(`src`, `${this.evolutionPath[this.evolutionStage]}`)
this.evolutionStage = Math.floor(Math.random() * ((this.evolutionPath.length)- 1) + 2)
return this.image
} else if (this.evolutionStage <= this.evolutionPath.length - 1 && this.evolutionStage >= 2){
this.image.setAttribute(`src`, `${this.evolutionPath[this.evolutionStage]}`)
return this.image
}
}}.bind(this))
}.bind(this) }