Chrome Web Store Games: Canvas Defense
Chrome Web Store Games: Canvas Defense
Launch the Site

Prepare your battle stations!

The Chrome Web Store team approached Fi to create a game combining strategic defense with quick reactions. To showcase the Chrome browser’s abilities we decided to use the HTML5 canvas tag and set about creating Canvas Defense. The ‘base’ is on the left of the screen, and the enemies come from the right. Between the two users must place defensive measures to slow the progress of the enemies. There are different types of weapons (Tower, Magnet, Line & Laser), which users must combine expertly to stop their bases being overrun.

Project Screenshot

We were looking for a way to combine a puzzle game with quick reactions. Canvas Defense allows users to decide how they want to try and defend their base but also to react to the changing patterns of the enemies. We wanted users to experience the satisfaction of knowing that their defensive strategies worked, or if they don’t (the enemies begin to adapt in the later levels!) there is enough motivation to try again. If users manage to survive until the game’s time counter reaches zero users will advance to the next level. To beat the game, users must complete all eight levels. The game is primarily aimed at people who enjoy puzzle games, but like all the games Fi has created for Google, it’s plenty of fun for everyone.

Design

We created a modernized retro arcade style to suit the actual game play. We felt there was a need for some digital touches and glowing neon elements wrapped in a subtle monitor-like container to spice up the graphics. Most of the design style for Canvas Defense is inspired by the Tron movies and has a neon glow to it. We also wanted to make it feel a bit digital and electric. Even though we used lots of effects, we managed to keep the performance light and snappy.

Tech

Canvas Defense combines a lot of enemies and physics, all of which can be really intensive for the browser to handle. Often small optimizations in the code can have a huge impact on how well the game plays so we are constantly looking for ways to optimize the code when working with the canvas. Our biggest technical challenge was making the game perform well with so much going on. The game primarily uses the HTML5 canvas tag, which is a relatively low-level but powerful rendering engine. A major challenge of using the canvas tag is that very little is done for the developer as compared to using longer-standing platforms such as Flash. This also brings a great strength with it, too: we can focus on creating the purest experience possible, ensuring only what is needed is included in the game engine.

How to Win

You start each level with a set of defensive measures. In the earlier levels you will be introduced to each of these in turn. You place them using your mouse and, when you have multiple measures available to you, they can be switched by using the space bar. Each type of defensive measure works differently and you should combine them to protect your base as effectively as possible. If you survive the clock countdown you will advance to the next level where the enemies will be even more dastardly! Don’t leave any area uncovered because enemies will come from all angles and they can sneak through gaps, particularly on later levels. Once you’ve put down a defensive measure you can’t move it so place them wisely! Learn how to use each defensive measure most effectively and be creative with how you combine them.

The Result

In the end Fi had developed a fun and addictive game that showcases the power of the canvas tag and Google’s Chrome browser, which is one of the best in the world. We used a cutting-edge technology to create a unique experience that runs natively in the browser. We think the game is challenging and rewarding and encourages players to solve the puzzle of defending their base. Anyone who likes to solve puzzles will, we’re sure, find themselves determined to crack each level and its unique challenges.

Components

A collection of components from Chrome Web Store Games: Canvas Defense

Project Icon

Client
Google

Release Date
December 8, 2010

Technologies
HTML5
JavaScript
Flash

Similar Projects