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 →
Responsive design. You can’t go anywhere on the internet without tripping over the term. And what a wonderful thing it is. Using modern CSS and Javascript techniques to let the same site reflow its content to fit different window sizes, growing and shrinking, showing and hiding as needed. It makes for some truly slick sites and, perhaps more importantly, reduces the maintenance effort by having less code and design to maintain since you no longer have to have separate sites for different sizes and devices – at least not to the same extent you’re used to.
But how does it work? That’s what I wanted to know, and this article is the fruits of my – admittedly lazy – research. A simple style sheet for a bare-bones responsive page.
Read More →