Linear percent values to other zig zag and arc percent values as a javaScript example

When making a javaScript project that is some kind of game or something to that effect I often end up working with percentage values that are in the from of a number between and including zero and one. So I thought I would work out a quick javaScript example that makes use of some custom utility methods that take a percentage value and return another percentage value that does not go from zero to one in a linear way.

In other words there is just taking a value like 25 and diving it over 100 to get 0.25, and as I increase the first value that is the numerator by one on each update then the value between zero and one will go up in a way in which the change can be graphed as a straight line. Another way of thinking about this is having a box and having a straight line draw from the bottom left corner to the upper left corner. However sometimes I might want things to move or update in a way that would be graphed in a different way than that.

So then it would make sense to create at least one, if not a few javaScript examples where I just want to break free from updating things in a one up, and one over kind of way. In this post I will be doing just that with a little javaScript code, and I think I will also be making this a kind of canvas example of sorts also to really get an idea of what this is all about.

Read More

Canvas example percent values and Math log

I have been busy with things lately so this weeks canvas example is going to be a simple one that has to do with percent values that are linear and making them not so linear. In other words having a value that is typically some kind of index value, or numerator value, that is then divided over a max index value, denominator value, or any other value that is a max value relative to another value that is not. The result of such an operation is going to result in a value that is between and including zero and one. In most cases this value ends up being in a linear, or straight line kind of way which might work okay in some situations, but at other times I might want to do something else with this kind of value. So it might be nice in some situations to have one or more methods that can be used to take a percent value such as this, and return another percent value that is not going up in such a strait line kind of fashion. When looking into all kinds of expressions to do something like this one thing that might pop up is the Math.log method.

I am writing about this because I came across a situation in another canvas example where I wanted to have a method that would take a percent value between 0 and 1 and return another percent value that is consistent with something that is more of a curve rather than a straight line. This kind of method can be useful when it comes to positioning objects in a way where they are being aligned on a curve rather than what would otherwise be a strait line. However it can also be useful when it comes to applying it to other values that have to do with things like the rate of change of position. For example say I want a value that has to do with the rate at which a pixels per second rate changes change in a way so that an object accelerates at a rate that is not fixed or static. In addition this is also a topic that can come up when it comes to creating an experience point system, and a whole rage of other topics. So it makes sense to work out some examples now and then when it comes to this sort of thing, and to help get a visual sense of what Math.log is all about.

So with all that said this will be a quick canvas example where I am using the Math.log method to create a percent value from another percent value that goes up in a logarithmic kind of way. I will then be using the method to change the rate at which a display object moves, and have another display object to compare to this will help to show why working out a method like this can come into play often with various canvas projects.

Read More

vue destroyed lifecycle hook

The vue destroyed life cycle hook will fired when a vue instance is destroyed. Such an event can happen by calling the destroy instance method of a vuejs instance. So far I can not say that this is something that I do in actual projects but I am sure that if I make enough vuejs examples I might end up in a situation in which I might have to do this with vue instances.

There are several other life cycle hooks that are worth mentioning also such as the create, mounted, and updated hooks. The destroyed life cycle hook is yet another one of these hooks, so it makes sense that I should write one where I am focusing on the destroyed hook on top of those to continue with writing on life cycle hooks of vuejs.

Read More

The lodash is array like method, and array like objects in general

In javaScript it is possible to have objects that look a lot like arrays, but they are not arrays. That is an object with numbers rather than named key names, and a length property that is the highest index value of this set of number key names. Such objects are often regarded as array like objects, and although they are not arrays, than can often still be treated as array when it comes to just getting around the few subtle issues that might creep up with them.

So With all of that said in this post on lodash I will be going over the lodash _.isarray like method than can be used as one way to know if you are working with an array, or at least an array like object. I will also be going over how to go about finding out if you are dealing with one of these kinds of object when it comes to just working with native javaScript by itself.

Read More

Canvas example of a cross hairs game

For this weeks canvas example post I made a quick little cross hairs type game idea that just popped into my head one day. This is a game where I just use the mouse or touch events to move a cross hairs or Reticle if you prefer around the canvas, and depending on where the cross hairs is located will result in panning movement around a map, or firing of the current weapon at some map cells. That is the basic idea at least, but I have added much more to it then just that at this point when it comes to choosing this example as something to continue working on at least a little each day, or at least fairly often.

At the time that I started this not much thought went into the other aspects of this that can help turn the game into something that is a little fun, interesting, or just simply addictive. I think that it might be fun to have a game where you just go around and shoot at stuff below me, and just rack up a whole lot of damage on what there is below in a top down perspective. So far that is more or less what this is, but it could still use a little something more that I have not yet hammered down thus far I think. Maybe put some things in the map that fire back for one thing, so that it is a kind of game where it is possible to, you know, loose.

However another thought was to make this just some kind of idle game where there are no such enemies that fight back, I am just blowing stuff up, and it keeps growing back. I all ready have some code worked out that automates the process of playing that I have enabled by default that will kick in after a moment of inactivity, but at any time the player can just take over and start playing. This is a kind of feature that I find myself enjoying when it comes to where I am at when it comes to playing video games, I can not say that I am that interested in playing them any more, but I sure have not lost interest in making them. The act of making the game has become the game sort of speak. So I seem to like games that involve things like away production, and games that to one extent or another play themselves.

So in this post I will be wring about all of the source code for the game thus far, so this will likely be a pretty lengthy post as it is over 1500 lines of code thus far. There are all ready a few modules, and I keep expanding them, and writing more modules as I keep adding features.

Read More