Google Blogoscoped


[OT] Canvas-Based Game

Philipp Lenssen [PersonRank 10]

Tuesday, April 8, 2008
12 years ago3,601 views

Canvas is the vector drawing method used in Firefox, Safari and Opera, and with the Google library ExplorerCanvas, it works in Internet Explorer too. With Canvas you can also create games, and I gave it a try with the game Oooze ( ...). Oooze is a bit of a mix between different games, like those games where you need to connect 3 colors, though it also has a bit of pool. Here is a little background from a development perspective. Note I left the JavaScript source code formatted so feel free to take a look.

The biggest issue unfortunately was that Internet Explorer 7 was incredibly slow to render Canvas. Perhaps I did something wrong, and I’m still looking for a solid workaround, as this ruined using Canvas for the purposes of this game. It would be very neat if Internet Explorer 8 would have implemented Canvas natively, and fast. As it was, I went ahead and created an alternative rendering approach for most of the vector stuff when IE displays the game. (The alternative rendering consists of loading 1,000 sprite image elements which can then be manipulated. As I separated the drawing layer from the game engine, it was fairly quick to toggle between the two rendering methods, but this is far from perfect and only allows for normal images, not full vector fun.)

Internet Explorer 8, by the way, did not run the game at all, though I heard it might be solvable and not a general problem.

Firefox on the other hand was quite fast on this machine, though unfortunately also a bit slower on other machines. I used two canvas elements, one in the foreground and one in the background. Then I clear the background canvas and draw everything on it, and when done, flip the screens. Theoretically this is done to reduce flickering but I was surprised to not notice any difference with or without flipping screens.

As far as structuring the game code, there’s several objects like game, sprites, and so on. (In JavaScript, objects are created using the "prototype" syntax, which I also used to restrict scope for independent modules.) The sprites are inside an array, and each object has properties like x, y, width, colorR, energy etc. For instance, to blow up a circular sprite, I’m setting the sprite’s radiusTarget to something larger than its normal target. Then when the sprite is handled by general functions, its radius will be increased until it hits the target size. (An energy counter goes down in the meantime and the sprite is removed from the array by using the splice method if it "dies.") All kinds of animations can be created this way; you can set a target RGB color, a target coordinate, and so on.

In the game, each sprite has a type and a subtype. The game Oooze didn’t need much of it but in theory, the type could be something like "bee" and the subtype could be "angry." Each type and subtype has their own behaviors expressed by handlers. For instance, a bee might happily buzz around, but once it collides with a sprite of the type player or type arrow (if the arrow’s owner is the player), it could switch to the angry mode and hunt down the player.

callum [PersonRank 2]

12 years ago #

Congrats Philipp – that's really slick. I'm surprised there aren't more canvas based games out there – perhaps it's because of the performance problems you encountered in IE.

This is worth a look – it's quite old but holds up pretty well – ...

You might also be interested in this – CAKE – a scenegraph for the canvas tag – very slick little test app too here: ...

Finally, Firefox3 will have support for hardware accelerated canvas surfaces via OpenGL – some details here: ...


Zim [PersonRank 10]

12 years ago #

Nice game, interesting development

Tony Ruscoe [PersonRank 10]

12 years ago #

On a related note...

<< Super Mario in 14kb Javascript

Here's an experiment in keepings things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). >> ...

TOMHTML [PersonRank 10]

12 years ago #

Wow thank you Tony!!!
"No boss, I'm not playing but learning JavaScript" :-P

callum [PersonRank 2]

12 years ago #

That's amazing Tony.

More than 14K but one of my favorite games – Lemmings – done with DHTML –

This thread is locked as it's old... but you can create a new thread in the forum. 

Forum home


Blog  |  Forum     more >> Archive | Feed | Google's blogs | About


This site unofficially covers Google™ and more with some rights reserved. Join our forum!