In this post I will be writing about a very simple canvas game example and I might get around to expanding this post with additional simple examples at some point. There is of course a lot to cover when it comes to getting started with canvas games and javaScript, in addition there are many different ways to go about keeping things well structured as one moves forward with developing a game project. So I thought it would be a good ide to have a post where I go over some very simple starting points when it comes to canvas game development.

There are many other examples of how to go about making a canvas game with javaScript on the web. For example there is a nice tutorial on how to go about making a breakout clone on Mozilla Developer Network that is worth checking out as well. However In this post I will be going over a few simple examples of my own that I thrown together and touch base on many topics that come up when getting into other kinds of projects.

Read More

The javaScript throw statement can be used to intentionally throw a user defined exception, or error of you prefer much like the built in errors that will happen now and then. It can be used as a way to stop execution of a javaScript program in the event that some kind of essential condition is not in order, or it can be used with try catch statements, and other means of error handing with custom events rather than just what happens out of the box with javaScript.

In some cases I might use it as a way to intentionally throw a wrench into a machine sort of speak to stop execution of a program at a certain point as a means of debugging, but as of late I prefer to use alternatives to that to catch a state of affairs as to what is happening at a certain point in time. So for the most part the throw statement is used as a way to define my own errors, but always doing so in a way in which I am making sure that doing so is happening in the body of a try statement. Ether by using throw in a try statement, or in the body of a function that I am passing as an argument to something where try statements are being abstracted away.

So lets take a look at some examples of the javaScript throw keyword in action when it comes to working a few things out with native javaScript. There may only be so much to write about when it comes to the throw keyword itself, but there sure is a lot that branches off from the use of it.

Read More

So then canvas position might refer to positioning a canvas element using css style rules with the position property mainly. That means setting the position property to something other than the default value for elements which is static positioning, to relative, absolute, or fixed positioning for starters. Once the position property of the canvas is set to something other than static then additional rules like top and left can be used to position the actual canvas element in the container element of the canvas. So then this would not really be a post on canvas alone, but the positioning of HTML elements in general if that is what is meant by canvas position.

However there are some other topics that come to mind as well when it comes to what canvas position might mean. Such as repositioning a canvas element on a browser window resize, and also how to get a mouse or touch pointer event location relative to the current position of the canvas element rather than the window of the browser.

Then of course there is also positioning things inside a canvas when it comes to drawing things in the canvas such as images, paths, text, and so forth. That is having an object that is acting like a display object of sorts, and now to go about positioning that inside the canvas relative to an abstract map of some kind. For the most part a lot of this is simple, but sometimes these sort of things can lead to a time consuming rabbit hole when working out the code for a canvas project.

So then in this post I will be covering some topics when it comes to canvas position topics. That is positioning the canvas itself, getting the canvas rather than window relative position of pointer event objects, and how to go about positioning things inside a canvas element.

Read More

When starting to develop a complex project with javaScript the importance of using modules becomes of greater interest to help keep things neat, easy to follow, and to debug when it comes to working out problems with code. Modules are a great way to keep one of my projects broken down into smaller units of code that are easier to manage compared to one large monolithic block of code that all to often ends up getting messy. I have come to find that it is often a good idea to try to think more in terms of a whole bunch of smaller, simpler applications that work together, rather than just one big project also, and modules are a great way to start going in that direction.

There are a lot of talking points when it comes to modules and javaScript, and often the subject can get a little confusing especially for beginners with javaScript and modules. For example modules can be made in a way in which the module will work by itself without the need for any additional code that the modules depends on. However often I make modules where there is at least one central utility module of sorts, and then a few additional modules that will work on top of the main utility method and will thus break without the use of that main module.

In addition there is also making modules where a module is used as a way to play with a state that is held in the module itself as a local variable to the module which I would not recommend doing. With that said there is also having modules where a public method is used to create a new independent state object that I use outside of the module that created it, and pass the created object as one of the arguments for many of the public methods of the module.

There are a wide range of patterns and standard for module design when it comes to client side javaScript as well as nodejs. There is a standard for modules in client side javaScript that now involves the use of import and export keywords for example. One down side though is that this kind of standard is modern so it will not work on older browsers, another draw back is that it will not work over the file protocol and I like to make projects that will work off line via the protocol. However even when it comes to writing modules the tired yet true way there is a lot of ground to cover when it comes to the various standards and patterns.

So there are many little tips and tricks when it comes to module design in javaScript, also there is more than one pattern to be familiar with, and there are many things to be aware of when starting out with javaScript modules. So in this post I will be covering some basic module examples when it comes to module design with javaScript, and maybe touching base on some related topics of interest in the process.

Read More

So javaScript null is one of many possible values that a variable can be at any given time that stands the absence of an object value. On the surface it might seem that null is more or less the same as the undefined value, but this is not the case. There are some subtle differences between undefined and null, and as such null is not meant to be a replacement for undefined or vice versa.

A null value can be thought of as a lack of an identification value for what should be an object. This might be the main reason why the type of null is object when using the javaScript typeof operator with a null value. This is then also something that a developer needs to test for when trying to access something that might nit be there. For example there is not just testing for the type of a value to see if it is an object and then moving on, there is testing for an object and on top of that testing to make sure that a value is not null also.

In addition it is true that null is a value that must be assigned, rather than a value such as that is the undefined value. The thing about undefined is that it is often the assumed default for variables that have been declared but not assigned anything, it is also a value that is obtained for object keys that have not been defined also.

In this post I will be writing around some of the things to know about the javaScript null value when working out a project of some kid. There may only be so much to write about when it comes to null itself, but there might be a whole lot of ground to cover then it comes to various things that branch off from null. So then in the process of learning more about null, it might be possible to learn a thing or two about some other related topics in javaScript while we are at it here.

Read More