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. 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.
I have been neglecting my content on vuejs, so to help get me in gear for changing that I thought I would write a quick post on the vue destroyed life cycle hook as a way to continue expanding on vuejs. There are several other life cycle hooks that are worth mentioning also such as the create, mounted, and updated 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.
For this weeks canvas example post I made a quick little cross hairs type game. So far this is a game where I just use the mouse or touch events to move a cross hairs object around the canvas. The general idea here is that the cross hairs object is used to move around but also to fire. So the cross hairs object can be moved from an inner area in the center of the canvas to an outer area outside of this inner area, when that happens the cross hairs object is used to move around a map. The player can also just tap around in the inner area to do damage to cells in the map for now when it just comes to having something to do with this.
The idea beyond just how to go about moving around and attacking, and doing so with just touch events is the main thing I had in mind with this one. So at the time that I started this not much thought went into the other aspects of this that can help turn it into more of an actually game. I think that it might be fun to have a game where you just go around and shoot at stuff below you and just rack up a whole lot of damage on what there is below you. Maybe put some things in the fire back also so that it is a kind of game where it is possible to, you know loose. In any case at the tie of this writing at least the main focus was just making a module that just creates, and updates an object that is used to move around a map.
I made another canvas example that is like this one that I called just simply pointer movement. That one was programed a little differently from this one as that was just simply a means to move around a map by clicking and dragging away from the point that was clicked. Here I have a set of circles fixed at the center of the canvas, or any other location that I choose to fix these circle areas to.There is an outer circle area that is used to move around based on the distance from the end of the inner circle rather than the center point. In addition the inner circle area will not result in any movement, but is used as an array where you can shoot at things, but not move. So I guess this kind of interface can be programed a whole bunch of different ways, but it is still more or less the same basic thing.
This will be a quick post on the vuejs model directive that might need to be used now and then when doing something with input elements in a template. The model directive may not need to always be used when working out an interface in a template but I have found that I need to use it with input, select, and text area tags. The vue model directive will make it so that you have two way bindings between input tags, and a value in the data object of a vue instance. So that when something changes in the data object, that change will effect the value of an input tag, and that if the user changes the value in the input tag that will change the value in the data object.