meow

When first learning about web animation with Javascript, we were tasked with moving a single cat .gif from one side of the screen to another. I got a little carried away, I guess! At the time I was interested in HTML Canvas and its ability dynamically display graphics using JS.

Features:

• Randomised speed and scale of .gifs introduced for each successful click
• HTML Map with polygon area shape used for approximately cropping the .gifs to only opaque areas so that transparent area can be ignored if clicked
• Self-taught canvas manipulation with getContext('2d')
• 'Painting' after game over randomises line/curve style between sequential successful click coordinates. Colour painted is the random background colour at the time of click.
• Ability to keep existing generated painting after gameover and play again, adding more paint over the top
• Ability to save/download art as .png after gameover
• No JS dependencies except jQuery to assist with animation and customised DOM node creation