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.
1 - The game.js module for pop the lock
For this canvas example I made a game module that will be used to create and return a game state object, as well as provide methods to update that state object.
The game object contains values such as the current degree of the point in motion, and a value that reflects the total number of degrees in the main circle of the game. In addition there is also a target degree, and margin value that can be used to result in a range area in the circle. This range is the area where the payer will score if they make an action such as clicking or touching the canvas when the current degree is in that range. There are also a number of other values that have to do with the rate at which the current degree will move as well as the current direction, and a boolean that indicates that the current degree is in the range.
In recent version of this game I worked out a few methods for creating new target locations. One of which I like to use when it comes to creating trip up locations, and the other is for creating locations that end up farther away from the current degree location. Speaking of trip up locations this is another feature that I added that can help to make a game mode more challenging, when the trip up location feature is active new targets will spawn close to the current degree location give the player little time to react. I also mentioned modes when is another new feature where I am working out more than one way to go about creating this kind of game. I would like to write more about modes, but I think I am going to keep working on this example a great deal more in the coming days, and I would not like to get into it that much at this time.
|
|
In this module I am making use of a utils library that contains many useful methods such as mathematical modulo. I will be getter to that in a later section in this post.
So now that I have a game module worked out I am going to want to have some additional code that is used to draw the state of one of these game state objects to the canvas. In additional I am also going to want to have some javaScript code that will provide a main app loop, and a state machine that will be needed when it comes to continuing to expand this.
2 - The game modes thus far
So now that I have a plug in system for game modes I can experiment with different kinds of game modes where I am switching up the rules and settings a little from one game mode to another. The basic idea of the game is simple enough, but I cant help but think that there is so much more that can be done to make the game more interesting. There is having game modes where the player does not have to worry about missing a target, and the smaller circle moves at a fixed speed. There is then ideas for other modes that they player will loose if they miss just a single target, and each target gained will make the smaller circle go faster, and maybe tweak other features to make the game even more intense. So I thought it would be a good idea to start at least a few game mode files to work out these different ideas when it comes to the core logic of the game.
2.1 - Free Play mode
The first mode that I put together is a way to just freely play the game without having to worry about missing a target, or clicking to soon. In this mode missing a taker by being to late, or clicking when the smaller circle is not over a target might still negatively impact the score, however it will not result in an automatic game over also. In fact in this mode the only way to loose is to quit once the player gets board.
|
|
2.2 - Sudden Death Mode
In sudden death mode the game will process to the game over state when the player misses a single target, or clicks to soon. The speed of the smaller circle will increase with each target clicked also, and the speed will continue until the player looses. The object then is to just keep playing until a single miss or early click event happens, and get as many targets in the process of doing so to get a high score.
|
|
2.3 - Classic Mode
The classic mode is called such because the aim in this mode is to reproduce the same game mechanics as the original pop the lock game. One of the main settings of interest is the level setting which can be set to a value between 1 and 100 which is the number of targets that need to be clicked to win the game. Just like sudden death mode the game will come to an end the vary moment that the player misses a single target, but the game will not continue until the game gets to hard to continue also. So in this mode it is possible to win the game, rather than being about how long the player can hold out for until they loose no matter what, or playing until they get board.
|
|
2.4 - Endurance Mode
The endurance mode is like sudden death in that the game will keep getting harder with each target. However it is okay if the player misses a target or clicks to soon a few times. Such actions will not result in an automatic game over, however it will deduct health from a hit points bar of sorts.
|
|
3 - The draw method
So now that I have the game state object worked out it is time to work out a draw method for it, as well as some additional draw methods for the project as a whole. In this example I am not doing anything fancy with layering, sprites, and so forth. So I just have a collection of draw methods for drawing things like a solid color background, the current version number, and the current state of things when it comes to the game state object of course. I took the time to break things down into a whole bunch of helper methods, and then have just a few public drawing methods that I will be using in my main.js file.
|
|
If I put more time into this project this will end up getting broken down into many methods and will be pulled into a file of its one which is often the case with many of these canvas examples.
4 - The utils lib
Like all my other canvas examples these days I have a utils library where I park functions that I will likely use in more than one file in a project, and also might copy and paste over to other utils libraries in other canvas examples. For pop the lock thus far as of version 0.0.0 I am just using my create canvas method that is more or less standard for canvas examples now.
|
|
5 - An Object pool module that I am using for buttons in the state machine
I wanted to add an object pool module, however for this canvas example the only reason why is more so for the sake of having animated buttons, and maybe a few additional effects. This module is based off of what i worked out in my other canvas example on objects pools, in fact I copied that source code and just made a few changes here and there that I might add in future versions of that canvas example.
|
|
6 - The canvas, main app loop, and the html
So now to make use of everything I worked out in a main javaScript file that will proved the main app loop and the state machine. In this main.js file I create a canvas with the create canvas utils method, and get the drawing context to it.
In the main.js file I have started a basic state machine of sorts, as of version 1.0.1 I have a title state, as well as states for game mode settings, the game itself, and a game over state. As I continue working on this project I might get around to starting to break the main.js file down into the main.js file and a much of states define in stand alone javaScript files in a state folder.
In the main app loop I am calling the game module update method of my pop the lock game module, and passing the game object that I created with the game module create method. I am also using the draw method I have worked out to draw the current state of the game state object in the canvas element. I am also of course using request animation frame as always to create the app loop for the canvas example as with just about any other.
|
|
Now that I have covered everything that composes the main.js file I just need a little HTML to get this up and running. In my html I just have a div element that I am using for a container element to which the canvas element gets injected in when my main.js file runs, and then of course I have a script tag that links to my main.js file.
|
|
When the game is up and running I now have a title screen with animated buttons one of which will take me to the game mode settings state. When in the game mode settings state I can choose which game mode I want to play, the total number of games modes and settings for each will depend on the number of game modes I have loaded and the settings for each. Once I have a game mode that I want to play selected, and the settings for it just the way I want them, I can the play that game mode.
Once I am playing the current game mode I can press the quit button of the game mode, or get a game over for one reason or another at which point i then progress to the game over state. In he game over state I have three options, one to play again with the current game mode and settings, one to go back to settings, and another to go back to the title screen.
7 - Conclusion
This canvas example started out as a a quick, and fun little project that I put together in a flash, but is all ready starting to feel like a finished game. However there is still a great deal of room for improvement with it also, and I have yet to find a way to turn this kind of project into something more distinct from what I am cloning so that it is not just a knock off. To some extent I think I have done that all ready with the introduction of additional game modes, while still preserving the original game with the classic mode.
I often like to try to keep the projects in these canvas examples posts fairly simple and basic though so that I do not have to write an extremely lengthly amount of written content outlining the example. However this one is starting to get a little involved and I also have a lot more ideas that I keep writing down on my todo list for this one. The original game that I cloned off of was all ready a little addictive, but I found myself loosing interest fairly quick still. I thought to myself, hey this game is pretty cool actually, and it is so simple too, but it would be even better if it had some additional features.
I will be continuing to work on this one at least a little while longer, because I think that it could use a few more game modes. In addition I think some of the game modes still have some ruff edges when it comes to the logic, and some of them could use some more features actually which is what I have in mind for the endurance mode. However what I really want to do is see if I can come up with new modes, and additional features to tweak these modes in order to come up with something that I think will be pretty cool.
I think I should have some additional states, and even some basic features are still missing. I also have ideas of adding things like an experience point system and making game modes and settings features that must be unlocked. As I continue to work on this I hope to also work out a half way decent system when it comes to having a state machine, and user interface features to move from one state to another.