The Sprite Sheet Challenge V1
I am providing you with four images:
● a character running to the right
● the same character running to the left (it's the same image really, but I flipped it horizontally in an image
editing program)
● the same character running up (same comment)
● the same character running down (same comment)
Here is the "to the right" version:
Make the size of your canvas at least 500px by 500px. You will make the character above run around the four
edges of a canvas so that it uses the correct sprite sheet when it is running. The character should simply keep
running around the edge of the canvas, in a loop. I have modified the image since we last used it; I changed its
size so that you will have to figure out the width/height of the subimages yourself. Otherwise, feel very free to use
the code found in the JavaScript lessons (this link should take you to the relevant section, Day 10).
● The character should start in the top-left corner and move along the top to begin
● When running along the top, it should move from the left to the right edge of the canvas
● When it gets to the top-right corner, it should start moving down along the right edge of the canvas
● When it gets to the bottom-right corner, it should start moving left along the bottom of the canvas
● When it gets to the bottom-left corner, it should start moving up the left edge of the canvas
● When it gets back to the top-left corner, it should start moving along the top and towards the right again…
For each stage, the character should use a different sprite sheet. When moving:
● right, use the "right" sheet from above
● left, use the "left" sheet from above
● down, use the "down" sheet from above
● up, use the "up" sheet from above
Use a state machine to help you accomplish this. I would use 4 states, corresponding to the directions of travel
(right, left, up, down). We'll start this in class and discuss state machines together.
When you are done, show me the working project on your computer.