I want to make more canvas examples, some of which might turn into interesting game prototype projects maybe. Today I though I would make something like flappy bird, only maybe not a total clone that has nothing going on that sets it apart from that. When cloning something it is important to make at least some kind of effort to make it distinct after all. I shall call it flappy collector, until I come up with some better working title for such a canvas example as I am not so great with names.

The same basic idea is there though when it comes to having a display object at the far left side of the canvas and you click or tap the screen to have it jump up a little as it falls down constantly. So it is yet another kind of game like flappy bird, space invaders, or kaboom where you have the player sprite object fixed to one axis or another. Nothing wrong with that as there are plenty of grate games that have that kind of general game mechanic at play.

The nice thing about these kinds of projects is that it is very easy to get to that point where I have a clone of the general idea at least. However there is then the hard part of course and I would say that is where I go from there with it to make it more original so it is not just a cheep rip off. So with that said this post will be on my current standing flappy bird clone that is part of my canvas example collection.

Read More

The subject of bouncing a ball around a canvas is a typical canvas example for most beginners with javaScript and canvas, and I guess I have to admit that this is one that I find myself coming back to now and then also actually. I say that because even if you have been working with canvas and javaScript for a log time like I have, bouncing a ball around is one thing that I can never seem to get just right. On the surface it seems to be the kind of thing that is trivial, there is just a simple formula to be aware of, along with some basics concepts when it comes to collision detection, and that is all to it, yet often it is not so trivial. There is just bouncing a ball off of a wall, and then there is bouncing a ball off of other balls and surfaces. The code can start out easy, but then end up getting complicated fast, and if it is not done right, can result in all kinds of bugs.

In this post I will be going over some code that I put together for a basic bouncing ball canvas example. I will not be covering every little detail when it comes to this kind of example when it comes to advanced things pertaining to physics. However the canvas example will be about bouncing balls of of the edges of walls of the canvas at least for starters.

However I would not stop here when it comes to looking for additional resources on this kind of canvas example. If you want to get a bounding ball project up and running fast it would be best to go with a framework like phaser that comes equipped with a physics engine that can be used to get something like this working fairly quickly. In this post however I will be sticking to just working with javaScript and canvas by itself, and one way to go about doing this sort of thing from the floor up.

Read More

Today I will be writing about yet another canvas example, this one will be an idle game that makes use of a map or gird module. On top of the use of a grid module it will also make used of other modules, methods, and concepts that I have covered in other canvas example posts. It makes use of a state machine in the main app loop, and also a pointer movement module that I have worked out as yet another javaScript example that is closely tied to working with canvas.

In any case this canvas example will be a little involved, but I will have the whole state of the source code here as it was at the time of this writing. I might work on it more, or use it as a starting point for another project if I feel that this will be a good project that is worth more time. So for now lets take a look at what we have when it comes to this ma idle type canvas game example.

Read More

Todays post will be on yet another canvas example, this time a gun turret defense style game that will be just a turret at the center of the canvas that shoots at enemies coming in from all directions. There are a number of web based games that have come out over the years that involve a single player controlled turret, rather than a whole bunch of turrets all over the canvas and enemies that follow a path. In any case much of the basic logic is the same when it comes to using Math.atan2 to get an angle from one point to another and so forth. So the skills that are acquired here can be applied to just about any other kind of game that involves something to this effect.

As of this writing this canvas example is in need of a full work over as I am not doing a long of things the way that i would do them now. One thing I would do differently is take logic that has to do with an object pool and pull it out of the main gam.js file that I was using in this example. Also there is much that I would want to change when it comes to turning this into something that is an actual game, rather than something that plays on its own.

This example will make used of a lot of different methods some of which have to do with many concerns surrounding angles. So it will involve creating a utility module of sorts with methods that can be used for things like finding the distance between two points as well as the angular distance between two angles. Once that module is covered I will then be getting into the main game module, and then finally the module that is used to render the sate of this game to the canvas.

For now it will just be a game that plays itself, but if I get some more time to work on this one in the future I might get around to building something around it for real. The main thing I had in mind here was to just get the basic idea up and running and that is it.

Read More

Time now for another one of my canvas examples, this time I think I will make a basic example of a scrolling map of tiles or cells as they some times may be called. This is something that will come into play for many any and all projects that involve a large 2d grid. Many strategy and rpg style games come to mind, but that of course is not even the tip of the iceberg with this.

So this will be a not so basic, basic getting started canvas example of a canvas map, and moving around such a map. So it might not be the best solution for large maps, as I have not put a lot of time into this to improve performance. It is not to hard to at least be aware of a concern of sorts though as the size of a map grows. The larger the map, the more cells there are, and as such the more there is to loop over when it comes to updating state and rendering. However in any case I will not be getting into that sort of thing in depth here as I would like to keep this example as simple as possible.

Read More