The variable ans is defined, which sets the animation that will play on screen. Later, in the update() function, the row of animation on the sprite sheet which is played is set by the ans variable. ans is set to 0, which plays the default car moving animation. In other parts of the code, ans is changed to 1 or 2, based on if the the answer was correct or incorrect, for a set amount of time. This updates the this.Y property of the Car object, which changes the animation
Changing ans:
this.frameX and this.frameY determine the position of the sprite thats being rendered on the sprite sheet:
As 1 is continuously added to this.frameX, the rendered sprite moves to the right*, creating a smooth animation. Once the rendered sprite reaches the 16th sprite, it resets back to 0
*the sprite width is set as a variable. this.frameX is multiplied by the sprite width. This sets the x position at which the sprite render starts
this.frameY is determined by the ans variable (talked about above)
animate function: The animate function first clears the canvas of the previous sprite. Then it draws a new sprite, and updates the positioning of the sprite for the next time the function is called. requestAnimationFrame() calls the animate function at a continuous rate of 24 fps
Object Oriented JS:
Car Sprite Animation:
Changing ans:
As 1 is continuously added to this.frameX, the rendered sprite moves to the right*, creating a smooth animation. Once the rendered sprite reaches the 16th sprite, it resets back to 0
*the sprite width is set as a variable. this.frameX is multiplied by the sprite width. This sets the x position at which the sprite render starts
this.frameY is determined by the ans variable (talked about above)