28 Canvas examples and counting, animations, games, modules, and more.

I have got into the habit of making a bunch of canvas examples, and writing posts on these canvas examples. It then seems like a good idea to have a post that will serve as a main index post of sorts for all of these canvas projects, and link back to this index in each post. The canvas examples I have made range form simple animations, to more complex game and simulation prototypes. This post then serves as an over all effort to make this collection of content more organized.

1 - The github repo

I have set up a git repository at my git-hub account for these canvas examples where all of the examples can be cloned down from if you want to quickly clone down the source cone of them.

2 - The Canvas Examples

Now for the list of examples with links to each, and a brief description.

2.1 - A planet of mine clone

I made a clone of the game called a planet of mine, or I have started one at least. This canvas example is of a game where I have a world object, and then worker objects that can be set to land tiles in the world object. I enjoyed playing the game that it is based off of and want to at least start a clone of it that I can start to play around with a little.

2.2 - Animation basics canvas example

In my animations basics canvas example I touched base on the basics of animation and canvas elements as I currently have come to understand it. Animation can be a powerful tool, as it is not always about making things that are artful, but practical as well. For example if you are trying to wok out some kind of problem it some times make sense to visualize that problem.

2.3 - Animation and fractals

I have some interest in fractals, and thus far I have this one post that I have worked out where I am making a basic fractal and displaying a fractal like animation with canvas elements.

2.4 - A simple ball bound canvas example

In this example I have just a simple bounding ball, a typical example that just about any javaScript developer will end up getting to at some point or another. getting to working on this kind of example is a good way to become familiar with certain things that are common with many javaScript projects such as collision detection, and how to go about setting or change the angles or directions of things when they hit a surface.

2.5 - A Basic idle game

In this post I made a very basic idle game prototype. Nothing major with it, just many of the core features of such a game in a very bland unbranded generic form.

2.6 - A button layout module

One thing that comes up often with canvas projects is how to go about adding buttons. A quick and simple way is to just use html input tags, however often it might be more desirable to have some area in the canvas element that acts as a button. So I have a post in which I work out a module that helps with the process of adding buttons to a canvas project.

2.7 - A basic clock canvas example

Making a clock with canvas can be fun. I find them simple to make, and there is so much that can be done that is centered around time.

2.8 - game beach concept

This is a concept for a game that involves turrets and ships to which the turrets attack.

2.9 - Making a breakout game clone

I thought it would be a good idea to start yet another breakout clone. This is one of many ideas of a kind of project that has been all ready done to death, but there still may be a great deal of potential for adding a unique spin to it.

2.10 - A cannon shoot game canvas example

There are many games that have came and went ever the years that can be described as a kind of cannon shoot type game.

2.11 - Flappy collector idle

This is a canvas example that aims to be a novel spin on flappy bird. Although it might be best to come up with a truly original idea for a canvas project, some times it is more realistic to take something that has been done before and try to find something new to do with it.

2.12 - Flappy collector idle a flappy bird clone

This is just a flappy bid clone of sorts.

2.13 - A kaboom clone

I have found myself making clones of certain classics from the Atari 2600, this is one such canvas example that is a clone of the game kaboom.

2.14 - Map idle game prototype example

There is yet another example of an idle type game that involves a gird that has assets at each location that generate money.

2.15 - Gird defense

A gird defense style game prototype.

2.16 - Grid gradient

A canvas example of a grid where each cell changes color depending on the status of an array of objects the properties of which can be changed by way of plug-ins for the main state module that is used.

2.17 - Grid world simulator core

A start with what might become a world simulator type canvas example thing like that of Sim Earth.

2.18 - Canvas Grid module

A grid module for canvas projects.

2.19 - The limits of 2d images

This is one project example I find myself coming back to now and then. It has to do with the limits of 2d images given a a set width, height, and color depth.

2.20 - input controller

An input controller concept for canvas projects.

2.21 - Map scrolling

In this canvas example I worked out a basic example of getting scrolling working with a large grid.

2.22 - binary particles

The idea just came into my head one day to make some kind of fun and interesting canvas example that involves two types of circles. When two of two different types combine into one, then it results in an explosion. The result is a somewhat interesting visual effect.

2.23 - search and destroy particles

Search and destroy particles.

2.24 - Pointer manager

I think that it is generally a good idea to make a canvas project to work with pointers in general rather than making a project to desktop or mobile centric. So I made a quick Canvas Example that is a way to manage pointer input from both mouse and touch events.

2.25 - Pointer movement

Here is a Canvas Example that is a User interface design for moving a map, or anything for that matter by way of touch or click events by way of a pointer start point and distance to a current point.

2.26 - pop the lock game clone

A Canvas Example that is a pop the lock game clone, the game is very easy to clone so it is a great getting started example.

2.27 - space shooter

A Canvas Example of a space shooter type game.

2.28 - Stars

I use to have a thing about drawing stars in all kinds of different ways so of course I have a Canvas Example on that.

2.29 - State machines

State machines are an important component for many javaScript projects so of course I have a Canvas Example on state machine in general.

2.30 - Turret defense

Turret defense games are sometimes nice so I have a Canvas Example on that in general.

3 - Conclusion

I will of course be updating and expanding this list as I continue to make additional canvas examples, as well as improve the quality of the examples and the content that I have written about them.