For todays canvas example I made a state machine that helps to keep code broken down into many independent state objects. For simple canvas examples and projects a state machine is not needed, but if I am starting to make a serious project the use of a state machine becomes more important as a way to keep things better organized.

Say you want to make a project that is fairly complex and there are many states that the project needs to preform before it can even be used. For example content needs to be downloaded, and then some objects need to be initialized before the project can be started at which point the user can interact with it.

In addition even when a game is up and running there are many menus that the user can navigate between before starting a main game state. Once a game is over there are often two kind of outcomes to the end of the game, and how they should be treated when updating a game save. So in that kind of situation some way to compartmentalize all these different states of sorts needs to be implemented and such a thing if often referred to as a state machine.

Many frameworks such as phaser will have a state machine as part of the functionality of the framework, but when it comes to starting a vanilla javaScript project this aspect of the game would need to be created from the ground up. When it comes to making a canvas framework I often think that a state machine should be a part of such a framework, but I guess it does not have to be when it comes to making such a project. In any case this post will be on just one way to go about making a state machine by itself without much more beyond that.

So in this post I will be going over the current state of a state machine example for a canvas project. As of this writing the state of the code of this state machine is in an Alpha state for sure. When it comes to my collection of canvas examples I generally like to start each canvas example from the ground up. However this example represents the current state of a step in a new direction in which I am starting to put something together that is my own framework of sorts.

Read More

If I want to create an array from something other than an array, such as a string, or an object of a constructor other than that of Array there are a number of ways of doing so. For example when it comes to having a string of a bunch of numbers with each number separated by a comma I can use the String.split prototype method to create an array of substrings where each substring is one of the numbers. However in this post I am mainly going to be writing about the Array.from static method that will work okay with array like objects, however it will not always work out so great in other situations sometimes.

The array from method might work okay with array like objects, but even then it might not always work out the way I want it to deeding on what I am trying to do. For example when it comes to making a copy of an array, the array from method might work okay when it comes to making a shallow copy of an array, but not a deep one.

There are of course other options here and there without having to write some sort of method by hand, which I should always go for first an foremost as I hate waisting time making my own methods for simple tasks like this. So in this post I will be looking at the array from static method as well as a number of other options for creating an array from something other than an array in javaScript.

Read More

In this canvas example I will be working out some logic that has to do with moving what could be a map by way of a pointer such as a mouse. So this example will not really be a game, animation, or anything to that effect, but it will be just a simple demo that makes use of a single module that can be used as a user interface type thing. Many canvas examples, mainly games will require some way to pan around a game map of sorts, so some kind of logic such as what I am going over here would need to be used to do so.

I will not be going over how to create a grid or map like state, I have wrote many posts on those subjects before this one. Instead I will just be writing about a module that I put together that just has to do with maintaining the state of an object that would be used to update a map position. So this canvas example will be fairly simple, and striped down, but that is the idea as I am just working out one little thing in this example rather than making a full blown canvas project.

Read More

In core javaScript there is the Math max and Math min methods that can be used to find the highest and lowest numbers in a set of numbers. The methods work by passing the set of numbers as arguments, but it is also possible to use an array by making use of the apply function prototype method. The apply method can be called off of the Math.max or min method as it is a function prototype method, and then a null value can be given as the first argument, along with the array of numbers, more on that later.

The Math min and max methods can help save me from having to loop over the contents of an array to find the lowest or highest number in a array of numbers. The task of doing this does come up now and then when working out solutions for certain things that require the lowest and highest numbers in a collection of numbers. So lets take a look at some some examples, and a few additional use case examples of Math min and max.

Read More

This canvas example 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 idea 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 and that is all I wanted as a starting point at least.

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 that will kick in when the player just lets the game run.

Read More