Hit region and html 5 canvas elements

There is the possibly of a new hit region api in canvas that can be used as a way to define additional interactivity for objects that are drawn in a canvas. As of this writing there is very poor browser support for this, in fact it does not seem to work at all in any browser that I use at least. However there are other ways of doing this when it comes to just working gout my own methods, and finding things on line that have to do with bounding box collision detection and other ways of doing such a task.

Still I though that I should write a post on this subject, and also on hit detection in general in canvas projects. So this post will not be on the hit region api that much, but it will be on bounding box collision detection in a vanilla javaScript canvas project. A subject that will come up often in many such projects.

In addition I think it might be worth mentioning that I do have the source code for what I am writing about here also up on my test_vjs repository in github. That would be the place to go to see what might be coming up next when and if I get around to editing this post. Also if you want to make a pull request because you see something wrong you might want to do it there.

Read More

A grid defense game canvas example

Time for another canvas example post to help me keep on track with the reasons why I started getting into javaScript to begin with, which is doing things that are fun, or at least interesting with canvas and javaScript. In goes without saying that canvas can be used in the creation and maintenance of more practical projects, but that is not what this example will be for sure. This canvas example will be of a very simple defense game that involves the use of a grid like the one I worked out in my other canvas example post on grids. It will also make used of an additional class that builds on top of a Grid class.

This will not be a tower defense game, or any such game that will involve path detection, as it will be the kind of simple defense game that involves units just moving from one side of the screen to another. Even with this style of game I will be keeping things as simple as possible to make it so this post does not go on forever.

There is of course diving into the more complex ideas that I have for canvas examples, but many of them are the kind of projects that might end up taking months or even years to develop. This idea is not one of those at all, and these kinds of projects are not necessary inferior to the more involved ideas for projects. The first step is to get the basic idea working, and then it is more about what I need to do to set it apart from all the other games that are like it.

Read More

Pop The Lock Canvas Example Game Clone

A long time ago I played a game called pop the lock on android, and managed to end up getting hooked for a while. It was a very simple game that just involved a circle moving along the path of another circle, and once it gets close to a target area you need to tap the screen or else you loose, you also loose if you tap to soon. I can then try again and the object is to repeat this process up to a certain count of times to unlock a lock.

I find myself making clones of this game now and then, in part because it is so easy to make a game like this. It is the kind of game where I can make a working clone within just about an hour or so when I am working at my best, sometimes even less than that when it comes to just the basic idea of what it is. However there is so much room of programing things a little differently so that I am making something new rather than something that is just a clone of the same game.

Many of the game prototypes that I have made so far are the kind of projects where it takes a long time to get something together that is just starting to look like a game, but things do not always have to be that way when it comes to this sort of thing, a game can be simple. It is also a great example of what really matters when making a game which is just to make something that is fun, or addictive in a distinct unique way. Often I think that I put way to much time and thought into a game, so it is nice to take a break from that are work on a game like this.

So todays canvas example will be a game that is a clone of this pop the lock game to some extent, but a little different. I want to play around with the various values that come to mind when making a game like this, and maybe make it work a little differently altogether so it is not just a full rip off of the original. Sense the time that I have started this post I have updated the source code a few times, when I come back to this one I like to experiment with new game modes, and features.

Read More

node delete files with fs.unlink

The way to go about deleting files in nodejs with the built in file system module is with the fs.unlink method. So there is no node delete method, but there is fs.unlink, and fs.rmdir that can be used to delete files an folders. There is also of course all kinds of user space npm packages that can help making the process of deleting recursively, and selectively easy, such as rimraf, but in this post I will be sticking to vanilla javaScript examples.

Read More