Home

Start here for documentation on using H5CGB.

Motivation

This project makes starting an interactive 2D Canvas application fast and easy, even for developers who have never used Canvas before.

Description

This project includes a modified version of HTML5 Boilerplate and adds some Canvas-specific boilerplate and a couple of useful JavaScript abstractions. In other words, it includes the code you were going to write for every canvas project anyway, plus a few tools for rapid prototyping of common features.

See also the complete explanation of everything the project provides.

Download

Download or clone:

git clone https://github.com/IceCreamYou/HTML5-Canvas-Game-Boilerplate.git myproject

Get Started

See the Getting Started section of the README. You should be able to open js/app/main.js and start developing immediately.

Though this project was designed as a boilerplate, the code is modular, so you can optionally choose not to use certain parts or to drop in the JavaScript into another project.

API Documentation

You can read the full documentation generated from the code or an explanation of everything the project provides.

Good to Know

This project provides boilerplate code and rapid prototyping tools, but there are many other great libraries you may be interested in using to help provide advanced functionality.

In addition to the JavaScript logic in main.js, there are a couple of generic files included in this project (for example, the favicon image) that you may want to customize.

Also check out the performance tips.

Examples

 - [Platformer (Mario)](http://icecreamyou.github.com/HTML5-Canvas-Game-Boilerplate/examples/mario.html)
   ([code](https://github.com/IceCreamYou/HTML5-Canvas-Game-Boilerplate/blob/gh-pages/examples/mario.js))
 - [Paint](http://icecreamyou.github.com/HTML5-Canvas-Game-Boilerplate/examples/paint.html)
   ([code](https://github.com/IceCreamYou/HTML5-Canvas-Game-Boilerplate/blob/gh-pages/examples/paint.js))
 - [Snake](http://icecreamyou.github.com/HTML5-Canvas-Game-Boilerplate/examples/snake.html)
   ([code](https://github.com/IceCreamYou/HTML5-Canvas-Game-Boilerplate/blob/gh-pages/examples/snake.js))
 - [Breakout](http://icecreamyou.github.com/HTML5-Canvas-Game-Boilerplate/examples/breakout.html)
   ([code](https://github.com/IceCreamYou/HTML5-Canvas-Game-Boilerplate/blob/gh-pages/examples/breakout.js))
 - [Pacman](http://icecreamyou.github.io/HTML5-Canvas-Game-Boilerplate/examples/pacman.html)
   ([code](https://github.com/IceCreamYou/HTML5-Canvas-Game-Boilerplate/blob/gh-pages/examples/pacman.js))
 - [Default project](http://icecreamyou.github.com/HTML5-Canvas-Game-Boilerplate/)
   ([code](https://github.com/IceCreamYou/HTML5-Canvas-Game-Boilerplate/blob/gh-pages/js/app/main.js))