-
Notifications
You must be signed in to change notification settings - Fork 57
Home
Start here for documentation on using H5CGB.
This project makes starting an interactive 2D Canvas application fast and easy, even for developers who have never used Canvas before.
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 or clone:
git clone https://github.com/IceCreamYou/HTML5-Canvas-Game-Boilerplate.git myproject
See the Getting Started section of the README. You should be able to open js/app/main.js and start developing immediately. Also check out the walkthrough, which introduces the H5CGB rapid prototyping tools by building a Mario-style platformer game.
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.
You can read the full documentation generated from the code or an explanation of everything the project provides.
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.
The examples below are included with the project in the examples directory. The concepts they illustrate are included next to them below.
- Platformer (Mario) (code) - custom keyboard handling, parallax, side-scrolling, inheritance, Boxes and collision, Collections, TileMaps, Layers, Sprites/SpriteMaps and images
- Command & Conquer-style RTS (code) - mouse scrolling, mouse zooming, mouse tracking and events, top-down environment, inheritance, custom movement mechanics, Collections
- Paint (code) - mobile interaction, mouse tracking and events, HTML menu, Layers, no update() function
- Snake (code) - inheritance, custom movement mechanics, custom keyboard handling, Boxes and collision, Collections
- Breakout (code) - fixed size canvas, mobile interaction, mouse tracking and events, restricted movement, Boxes and collision, TileMap, Layers
- Pacman (code) - fixed ratio canvas, inheritance, custom movement mechanics, Boxes and collision, Collections, TileMaps, Layers
- Default project (code) - full-size canvas, top-down scrolling
Every example except Paint and C&C has keyboard-controlled movement.