Tag Archives: Bubbles

“Bubbles” canvas tutorial part 3: Getting touchy

HTML5 Bubbles 4

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 →


“Bubbles” canvas tutorial part 4: Getting noisy

HTML5 Bubbles 5

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 →


“Bubbles” canvas tutorial part 2: Getting animated

HTML5 Bubbles 3

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 →


“Bubbles” canvas tutorial part 1: Getting started

HTML5 Bubbles 2

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 →


“Bubbles” canvas tutorial: Introduction

HTML5 Bubbles

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 →