I have the sprite sheets animated and what not but I need to know how to make them move with the arrow keys and how to make the video react to the sprite movements.

Required HTML Elements (4):

(2) HTML: p4.html

(2) JavaScript: p4.js

(0) CSS (optional): p4.css

Required HTML elements (4):

(2) An HTML canvas object with width and height attributes

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

Required JavaScript functionality (92):

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

(2) 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!

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

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

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

(4) Download or create one video.

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

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

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

(10 extra credit) After your video pauses, fade out your video, then remove the video display

(5 extra credit) Add an animated SVG component to your canvas background

Note: Complete the entire project before attempting the extra credit. Extra credit may not be awarded for incomplete projects.