
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:
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.