Some may say that a good way to learn javaScript, or any programing language is to study the language itself, as well as various libraries that are written in the language. However maybe the best way to go about learning javaScript would be to just start making some fun, or useful javaScript examples that you can start to actually play with, or use to help solve some kind of problem.
For todays javaScript example I worked out a new draw points method, or actually a draw line method rather as what I want is a way to draw a collection of points rather than just one. This kind of method would be a typical method that I might use in one or more canvas examples that I am working on that would call for such a method, and would work with one or more methods that I can use to create and mutate a state that would be used by such a draw points method. I have made a method like this many times, but I thought I should work out a half way decent method that will work well with certain situations where I want to have a display object that constitutes many lines.
When I make a basic draw points method such a method will just draw an array of points in the form of a single array of numbers where each set of two numbers is another point to draw to. That is that the first two numbers in the array are a position to use with the ctx.moveTo method, and then each set of numbers from there is another point to draw to from there with the ctx.lineTo method. However there is much more to drawing lines to a canvas than just having an array of points for a line, such as if the line should be closed at the end or not, and if the what is drawn should just be stroked, filled, or stroked and filled. Also I might want to draw something that involves not just one line, but a whole bunch of lines, with all kinds of different settings for each line or shape. So a simple solution might work okay for starters, but sooner or alter I might want to move on to using something a little more advanced.
So then in this post I will be going over a more advanced draw points method, and a new format of object that I might use as a way to draw images to a canvas without having to bother with external images. This format will not just be a single array of numbers for points, but an array of such arrays, in addition I can add some string values that will change settings for each line. I have made a few solutions for this sort of thing, but I think I might like to work out a few more, and also improve the ones that I have all ready made.
For todays javaScript example I worked out an attack wave control system that I might use in one or move canvas projects that will be games that might make use of such a system. What I am taking about here is a system where there is an object pool that is used for buttons that from a bar or sorts. As time goes by the buttons move along to a given point such as the top of the canvas element. When a button reaches the top of the canvas it will become inactive, and that wave will then become the current wave, and as such will add however many enemies the wave will add to a queue.
There are a number of canvas examples that I would like to improve with a system such as this, and a whole bunch of additional ides for canvas element powered games that might make use of this feature in one way or another. So for this post for starters I would like to get a solid starting point for this kind of system up and running. Once I have that it is just a matter of shoehorning it into a project.
When it comes to formating numbers in javaScript there is now a built in feature called the Intl Object, that is worth checking out before looking into user space options, or making ones own solution for number formating. I first became aware of this new built in feature when researching solutions for quick and simple money string formatting, and found a stack overflow post on the topic of the NumnberFormat constructor of the Intl object that had to do with using that constructor to format a money string. So I thought that it might be a good idea to write a post on this Intl object to gain a better sense of what this object is for when it comes to formating strings, and numbers for the purpose of display, rather than preforming operations.
The next step after learning javaScript is to start creating some actual projects, or at least some examples of basic features and modules. For todays new javaScript example post I thought I should write a quick post on having a long once method that often proves to be an important part of a basic debugging kit of sorts.
Learning to use the console.log method to log something to the javaScript console of a browser, or the standard output of a terminal in a nodejs environment is one of the first things to become aware of when learning javaScript for the first time. However just having console.logs all over ones source code is not always the best way to go about debugging code, often it might be better to have a custom log method that is used in place of doing something such as that. That is having a log function all over the source code of a project, and having everything pipe to this function first. Then in the body of that function I can use console.log to log out some kind of debug message, or I can comment that out with just one line. I can also have this kind of messaging piped to something other than console.log.
Anyway I also often find myself in situations in which if something happens I just want something to be logged once, not over and over again for each element in a loop. To create such a log function I would need to have a function that will return this kind of function, in other words a javaScript function closure.