Here fishy fishy

screenshot of my JS/canvas fishpond

I love aBowman’s fish gadget, but it’s Flash, which seems to be more restricted every year. Nowadays it won’t even run for longer than a minute or so without clicking a play button.

Recreating an interactive fishpond with HTML, CSS, and JavaScript seemed like an excellent way to learn the associated skills. I started with MDN’s JS/canvas Breakout tutorial and then made the ball more interesting, and then plural. Here’s what I have so far:

[Visit my blog to see the fish in action]

This came together amazingly fast, but I expect every additional improvement will take longer than the last – more natural movement and appearance in particular. It has been a highly enjoyable challenge so far, though.

You can monitor the progress and grab this and other code on my GitHub. I can’t improve on the MDN tutorial, so (for now at least) I’ll just be showing results.

Leave a Reply

Your email address will not be published. Required fields are marked *