Time for yet another canvas example, this time I am thinking in terms of a decent starting point for a canvas grid module example. A grid is something that will come up all the time when it comes to all kinds of canvas games, but other projects as well such as drawing apps.

When it comes to grids there is drawing them, and then there is having a model of sorts that contains the values of the grid that is to be rendered to the canvas. I would say that it is very much a good idea to keep these things independent from each other by having one module that serves as a way to create a grid object, and another that is used to draw all of cells of this grid to a canvas element. So we will want at least three javaScriopt files. One module for creating and mutating a grid object, another module for drawing a grid object to a canvas element, and some additional code that will make use of these two other modules and provide the rest of the functionality of the example.

The grid object can have an array of cell objects for each x and y position in the grid, tile, grid location, or whatever you call it for each such location in the grid. Another approach is to just have a width and height for the count of cells, a cell size value, and think of all cell locations in an abstract sense. That is that there are only cell objects for certain locations but they are snapped into a location that conforms to the nature of a grid. Either way I would want a way to create some kind of grid object, and have a module that will be used to create and mutate this grid object.

There are a wide range of different ways to go about starting with a grid module, however in order to move forward one just has to make a choice and get going with a project. So for this canvas example I will be starting with a module example where I have a single array of objects for each cell.

Read More

So now and then when I work out various projects I sometimes want to use a select element to provide an interface to select two or more option elements as a way to change some kind of application setting. Just like any other html element, these option elements can be hard coded in the html itself, but they can also be added with javaScript when it comes to dom manipulation.

So there is the document.createElement method which is what is often used when it comes to making Option elements, or any kind of element for that matter, but there are also dedicated constructors for creating many elements in client side javaScriopt also, and Options Elements are no exception. With that said on top of the create element method there is also the javaScript Option constructor in the window object that can be used to quickly create an option element in client side javaScript.

There are a few things to cover when it comes to option elements, there is not just how to create them, but also how to use them. In this post I will be going over some basic examples of the javaScript Option constructor, but I will also be touching base on event handers, specifically the on change event that will fire each time an option is changed for a select element. In the process of doing so I might manage to cover many other related topics when it comes to making use of these elements in a client side javaScript project.

Read More

The canvas rotate method can be useful for doing quick on the fly rotations, but doing so will cost some overhead compared to having sprite sheets where the rotations have been worked out before hand.

The canvas rotate method is often used in conjunction with other canvas methods such as the translate method, as well as save and restore. There is also of course the context methods that are used to render to the canvas once a rotation has been preformed.

Still if I just want to quickly rotate something in canvas there is the rotate method in the 2d drawing context, so lets look at some examples of this as well as related topics such as the canvas translate method, save and restore, and many others.

Read More

The lodash at method can be used to create an array of values from an object with a given array of paths to values from the object that are to be included in the array. When using the lodash at method the order of the index values for the elements in the resulting array correspond with the order of the paths given in the array that is passed when calling the lodash at method. So in other words this can resolve issues where the order of key names in a plain old javaScript object are not always in a desired order.

Read More

A wrapper method generally might refer to a simple kind of method that just gives and alternative interface for using a method that is all ready in place. In other words a wrapper method does not really have any functionality of its own, it just accepts input and then uses that input for another method that actually does something. In lodash there are a few wrapper methods, that are methods that just make use of native vanilla javaScript methods. It would be different if these methods feature tested for a native method and use that if available, and then used another javaScript solution if that native method is not there. However in late versions of lodash a few methods are just straight up referencing native javaScript methods.

Read More