Menu vuejs example using components and render functions

There is starting out with just some very basic examples of vuejs, but sooner or later there is taking the time to start to get into making some real vuejs examples with vuejs as a front end framework. At least making a real example or project should be the long term goal when it comes to learning vuejs, or any framework for that matter after all. Unless your aim is to just make blog posts on simple vuejs examples in which case I stand corrected.

Anyway for todays vuejs example I think it is a good idea to work out a simple, solid solution for making a kind of menu for a major application using vuejs. This menu will contain a main vuejs instance, but also a number of other vuejs components each of which is a menu item for an over all application. So each external component will be a child off from the main vuejs instance, as such this example will be an exercise in many aspects of vuejs, including components, directives, events, and render functions.

In addition I think I should also make a special custom Class based off of Vue by using the Vue.extend method. This way I can pull a lot of options and features into this special class and then just use the main Vue instance that is created from it to add the few options that will change from project to project. I would like to make something that can be reused over and over again from one example to the next so it seems like a good move.

Read More

Sprite animation Canvas example

For a new canvas examples I think I would like to start another example expanding on what I started with my other canvas example on animation basics. This time I would like to build on top of this basic library that helps with animations that I just call forFrame by making a solution that I can use to make sprite sheets with a little javaScript code.

The goal here is to at least start working on something that will serve as a way to include basic pixel art graphics without having to hassle with external images. The image assets can just be part of the source code build. So I will just need to work out some simple system where I have an array of pixel data for each frame, along with some additional values like a color palette and so forth. I am thinking that it would also be nice to have some kind of plug in format where all of this data is pulled into external files, and also that each file can have more than one animation, each with a different set of frames, and they can also share color palettes.

So this kind of project might prove to be a little involved, but because I am working on top of something that I have made before hand, and also because I have a fair amount of experience I was able to get the basic idea of what I wanted up and running within just a single day.

Read More

Reset feature for a vuejs idle game example

This week I am taking another look at my vuejs content and starting to edit and expand this week starting with a bunch of vuejs examples on making an idle game with just vuejs, and vanilla javaScript. I have made a few other posts on this topic starting with just working out the very basics when it comes to manual production or resources. I then moved on to additional topics that include production over time, and starting an upgrade system. There is just one more basic feature that I think all idle games should have and that is having some kind of reset point system.

A reset point system is where the play will start playing the game all over again from the beginning, but will start off with an amount of another kind of resource that is a kind of resource point. These resource points will effect the base values of various attributes in the game so that although the player is starting over, they will progress much faster now. The process of reseting can then be called over and over again, each time building up additional reset points.

Read More

Upgrades for a vuejs idle game example

Today I am continuing with making a basic idle game using vuejs as a framework to help expand my collection of vuejs examples. In the last two posts on this subject I started out with a very basic example that I just manual production or resources, and selling those resources for money. In yesterdays post I work out the very basics of over time production or resources, and at this post I also have a single save state working. There is just one more very basic feature that an idle game should have before moving on to more advanced topics that might help to turn this into something interesting, and that is having some kind of system for upgrades.

The topic of upgrades alone can quickly turn into a major rabbit hole if I let it do so, but for this example I just want to work out a simple system and move on, at least for now anyway. I have made a a few other games over the years that include an upgrade system, and this is something that I never get worked out just the way that I want it. There are a lot of things that come to mind when it comes to things like the expressions used to figure upgrade cost, as well as expressions that update the game object properties that are effected up the upgrade and so forth. However generally I think that an upgrade system should be an array of objects, and each object should have a method that is called that will be used to apply the upgrade to the main game state object.

There is a lot more to an upgrade system if I go wild with ideas when it comes to all the various ways that I can go about designing such a system. However for this vuejs example of a basic idle game I think I am going to want to keep things fairly basic.

Read More

Adding over time and away production to a vuejs idle game example

In yesterdays post on a basic vuejs powered idle game I started a very basic idle game with the vuejs framework, and just a little vanilla javaScript to expand a collection of vuejs examples to help serve as starting points for projects using the framework. The example at the state it was in at that point lacks many of the core features that I think just about any idle game should have. The basic example was just manual production of a resource, and selling that resource for money, and that is it.

I might get back to improving that post, and the corresponding code, but I think that maybe that specific example should say pretty basic with just that first step being the focal point. The next step forward could be a great number of things, but one feature that is needed is having over time production of a resource rather than just clicking manually. There is not just having production over time, but also away production, which is also a feature that I would like to at least start in this vue example. There are so many other little things that I would like to add even when it comes to just the very basics, but for now one more thing I would like to start at this point is save states.

Over time production is just one of many must have features for an idle game, in fact the first idle game example is not really an idle game because of the absence of over time production, so lets get this one out of the way and move on the next steps.

Read More