This canvas examples will be a more advanced version of the canvas example that I worked out that is a kind of flappy bird clone of sorts. In that post I made a canvas game example that is the basic ide of flappy bird where I just want to have a display object constantly drop down that is countered by the action of a player clicking or tapping the canvas. The canvas example is not a true clone of flappy bird of course, but the basic idea is there.
In this canvas example I am just expanding from that canvas example by making it so the game plays by itself. The player can still play manually if they want to, but after a period of inactivity the game will just play automatically. The direction I was going with this one was to make this canvas example into an idle game of sorts where the player can play manually, but there is also some kind of automatic action also.
In this section I will be going over all the code that is contained in a main game.js file. This is the file that is used to create and work with a game state that is then rendered to the canvas with an additional separate module. Many of the methods here are not all that much different from what i worked out in my other post that is a simpler version of this. Other methods are hacked over a little, and some are new.
I start off the module with an IIFE that will contain a bunch of private methods used only in the module, and then return a public api to a global variable that is used outside of the module. The first private method that I have here is a bounding box collision detection method that is not any different from the one that I am using in the other canvas example.
The method that I use to spawn new berries is a little different from what I worked out before. Here I am not taking into account the current berry level value of the state object, and using that to set the point worth of the berry as well as the speed in pixels per second.
Just a very simple change has been made with the update berries method where I am adding points based on the worth of the berry that was collected rather that a static number literal.
In this canvas example I added two new methods that have to do with setting the current berry level.
Another new method is one that can be used to set the berry delay time based on the current berry level.
the update bird pps method is not all the different from before. The one is just a place holder of sorts for what might eventually be a variable that is used to adjust things when it comes to auto play. That is if I continue working on this canvas example rather than others.
A new feature that is added in this canvas example is an auto play mode. This method is used to just find out if the bird should flap or not when working out a very simple AI for doing just that. That is why a game example like this is great for getting started with AI there is just one action that needs to be preformed, and I just need to work out some basic logic that makes the choice of preforming that action.
Now it is time to to get to the public API. Here I have the same set of methods as before, but there are now a buncj of changes to make use of the new features.
The new bird method does the same as before, just returns a new bird state object that can then be used with all the other methods that act on such a state object.
The main update method of the game module now checks to see if the berry level should be updated. In addition to this there are also some additional changes that have to do with auto play.
The flap method is now more than just a method that just sets the flap property to 1, making the method far less pointless.
Now that we have the game module out of the way it is time to have a draw module that is used to draw the current state of a bird object to a canvas element.
Now to tie everything together with html and a main.js file.