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

I really like canvas elements they are the coolest HTML elements to work with, so oif course I have got into the habit of making a bunch of canvas examples, and writing posts on these canvas examples here on my github pages site. 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 post in each canvas example post. So then this post will serve as that sort of central index post on all of my canvas examples that I have made thus far.

The canvas examples I have made range form simple animations, to more complex game and simulation prototypes. I am going all over the board when it comes to this naturally because lets fact it canvas is a great example of fun and exciting javaScript rather than boring yet practical javaScript. SO of course I have to make a lot of them, and maybe it I get to it pour a little more time and effort into some of them. So lets get to the list of canvas examples here then.

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 to play around with and use locally. Most if not all of them should work okay by just opening up the index.html file of an example via the file:\/\/ protocol when it comes to just using them that way. If you actually want to help improve the source code of some of them I might be will to except helpful changes that improve quality. However this is mostly still my project, and I assume that may of you might wish to spend time working on your own set of canvas examples that might progress into actually games, animations and utility projects.

2 - The Canvas Examples list

Now for the list of examples with links to each, and a brief description while I am at it. The list is just in alphabetical order going by the name of each canvas example for now. I am not sure if I will get around to breaking these down into smaller categorizes yet, but I might at some point in the future because many of them are just animation type things while others are games that work with user input.

As of this writing I am working on making embedded version of each of the canvas example in each page. SOme of them will have them, and others will not. I am sinking a lot of time into this both when it comes to making additional examples and improving the quality of the older ones.

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 bounce 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, and I also find making them easy and therapeutic actually. There is of cousre going in all kinds of novel and interesting directions with clocks, but there is also just starting out with the basics. So with this canvas example I worked out just a basic form of how to go about making a simple clock object model, and draw module for just a simple digital and analog combination clock.

2.8 - Clock and particles

Yet another clock example this time it involves a collection of particle objects that move outward from the center of the clock face. Thus clock is just a slightly more advanced version of the basic clock example that I started out with.

2.9 - game beach concept

This is a concept for a game that involves turrets and ships to which the turrets attack. I wanted to make something where the whole game of sorts if you can call it is actually fully automated. So this canvas example does not involve any user input, but rather involves javaScript code that automated the actions that the user would otherwise preform.

2.10 - 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.11 - 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. That is some kind of game where you have a way of shooting a display object off from a given starting position, angle, and power, and then see how far t goes from there. This is my first, and as of this writing last effort and making that kind of game from the ground up.

2.12 - cross hairs!

A game about a cross hairs object that you can move around and do damage to things.

2.13 - Fixed shooter hybrid

This is like a fixed axis shooter game only the player is fixed to an area rather than a single axis. One such game that might be similar to this is the classic game centipede.

2.14 - 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.15 - Flappy collector idle a flappy bird clone

This is just a flappy bid clone of sorts, I just wanted to take a moment to make my own rendition on this one, and then maybe one or two more based off of it. Many games now are just clever, unique remakes of things that have all ready been done before hand anyway. The idea I have in mind is to start cloning something that has been done before, but then try to find a way to make it my own somehow. However first i do have to start with a clone that is not all that different from the original.

2.16 - 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.17 - 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.18 - game spinner

So I wanted to have at least one canvas example that is a game spinner that is similar to that of something that you find with many board games.

2.19 - Grass blades

just some grass blade type things.

2.20 - Gird defense

A gird defense style game prototype.

2.21 - 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.22 - Grid world simulator core

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

2.23 - Canvas Grid module

A grid module for canvas projects.

2.24 - 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.25 - image loader

Here I have a simple image loader example for a canvas project that I worked out for my own reference for when it comes to getting around to skinning some of these with some external images.

2.26 - input controller

An input controller concept for canvas projects.

2.27 - Map scrolling

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

2.28 - object pool

This project is an exercise of having an object pool. That is just simply a set collection of objects that are used over and over again, rather than pushing and splicing out as needed.

2.29 - 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.30 - search and destroy particles

Search and destroy particles.

2.31 - percent values and Math log

A simple canvas example that shows graphically what a method I work out does with a percent value.

2.32 - 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.33 - 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.34 - 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.35 - space shooter

A Canvas Example of a space shooter type game.

2.36 - 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.37 - 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.38 - 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.