I love Conway’s Game of Life and I’ve made a version in pretty much every language I’ve ever learned, including QBasic. So a Javascript implementation was pretty much inevitable…
This was my first time bringing in HTML elements outside the canvas to control the simulation, and I also integrated a third-party slider component from DHTMLX.
The mini javascript projects continue apace. Today’s little program: an implementation of Wilson’s Algorithm.
Read More →
So far in this series we’ve set up a basic framework to get us started and then added a render loop and some actual bubbles.
This part will make the game interactive, adding mouse and touch input, and discussing some of the pitfalls that can crop up as you do so.
Read More →
Now we’ve got graphics, animation and interactivity, what’s left? In this final part of my HTML5 javascript/canvas tutorial we finish off our little game by adding some sound effects – what good is popping bubbles without the satisfying sounds of destruction? Unfortunately, adding audio is far trickier than it has any rights to be, so hopefully this tutorial will save at least one person the troubles I had to go through.
Read More →
In the first part of this series we set the stage by putting together our framework and then getting a simple background on screen. This article will add our rendering loop to the code and let us actually get some bubbles out there.
Read More →
When I started this little project I had only a vague idea of how it would look and even less of an idea how it would be written or structured. As it turned out I just slapped down a quick gradient background, came up with a simple Bubble class and set a timer to move the bubbles up the screen. That gave me a basic core to work from, but as I started to tweak and add I realised just how messy it was, even for a simple project like this.
So this tutorial is going to ignore all my mistakes and lead you gently to the finished version with something resembling logical sense. This entry in particular will focus on giving us a basic framework to work within, and go as far as putting a background on screen. Part 2 will introduce the render loop and actual animation.
Read More →
After my early forays into canvas and Javascript I commented on Twitter how good it felt to be learning something new, something that felt like it opened up a whole new toolbox to me and the attendant possibilities.
The main upshot of this is that I finally have the tools at my disposal to make the game I’ve been promising my two-year-old son for a while now. This project is ongoing but “functionally usable” now. It hit a few bumps along the road so I’m writing this series of articles to describe the development of the game, the problems I encountered and how I overcame them.
Read More →
The last animation I posted was just a work in progress, halfway to something a little more complex. As promised, here’s the fruits of that work. I’ve put together a page of my little collection of animations.
Mostly this was an excuse to put up another of my HTML5 logos with the stolen XKCD people.
Oh go on then. Here’s another canvas animation. It’s pretty simplistic but so far it’s just a work in progress of something more fun. And after that, some thoughts on what comes next on a technical level.
Read More →
Today I discovered r/loadingicon and promptly spent an unwise amount of my precious free time staring mesmerised at the screen. When I finally snapped out of it I finally resolved to actually sit down and learn how to use the HTML5 canvas element. I’m not claiming to have the arty chops of the people posting those icons, but it seemed like a really fun way of getting into the spirit of things.
And you know what? Basic canvas drawing with Javascript is easy. Really, really easy. An hour later I had something I’m going to call halfway fun to sit and stare at.
Read More →