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.
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.
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.
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.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.
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
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.
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.
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.
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
2.38 - Turret defense
Turret defense games are sometimes nice so I have a Canvas Example on that in general.
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.