Resources
//CSS: Animation
//STYLE: Avoid long lines
Hidden Agenda
- Have fun playing with a different kind of animation
- Keep in mind: THIS IS NOT THE USUAL WAY TO ANIMATE IN HTML!
- Learn how to program with shorter lines
Saving your work
Use Save as... to save this
empty template
as "1.07X-AnimateMario-LastName.html"
in your Computer Programming 12 directory.
The assignment
Use CSS animation to move Mario through a side-scrolling platformer.
Image bank
-
<img src="http://drapak.ca/cpg/img/marioMap.png"> -
<img src="http://drapak.ca/cpg/img/marioGoodGuy.png"> -
<img src="http://drapak.ca/cpg/img/marioBadGuy.png">
Extend and expand
There are other side scrolling platformers out there.
Find maps, and movable objects. Link to them and make them move!
Can you add the bad guys and have them move as you go? What about making the background sccroll by?