I need help with this sprite animation project.

HTML Elements:

HTML

JavaScript

CSS (optional)

HTML elements:

An HTML canvas object with width and height attributes

One HTML video object, unless you elect to load your video dynamically

Required JavaScript functionality:

Include appropriate JavaScript single line and multi-line comments. You may also comment your HTML and CSS.

Create or download an image sprite with individual images for no movement, left movement, and right movement. For example, search on "animal sprites" in Google Images. You are definitely free to create your own sprites!

Enable sprite movement using the arrow keys (right, left, up and down).

During sprite movement, use JavaScript (not CSS) to extract an appropriate sprite image so that your sprite visually changes with each movement.

When not moving, and when first loading your game, display a neutral, non-moving version of your character.

Download or create one video.

Display the video when your animated character reaches a clearly marked pre-determined location.

Display your video for a pre-determined amount of time, such as 5 seconds, then pause your video.

Stop and hide the video if your animated character again moves.

Extra Credit: After your video pauses, fade out your video, then remove the video display

Extra Credit: Add an animated SVG component to your canvas background

Tips

Below are a few tips to completing this assignment:

Consider using functions as much as possible to avoid duplication of code

Although not required for this project, you may want to use classes/objects

Consider coding your solution in steps:

Displaying your neutral character

Moving your character in response to arrow keys

Changing the character animation using your sprite images as your character moves

Boundary checking to determine when your character reaches a display video location

Displaying a video on canvas

Appropriately placing and sizing your canvas displayed video