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.
The main game module now has a few more helper methods that have to do with creating an updating an object of upgrade objects of the main game state object.
I now have a create upgrades helper along with the main public create state public method. This is the helper that is used to create the object of upgrade objects for a game state object. Just like the create minerals helper it can take an array of option objects that can be used to set the level for each upgrade. This array of upgrade options will be created each time the save method of the vue instance is called that is used to save the game state.
I also have a check upgrade public method that is the public method that will be called in the click method of the vue instance each time an upgrade button is clicked.
The vuejs instance has just a few additions made to the template to create a new upgrades div that will act as a menu for all upgrades. Beyond that I just made a few changes to the click method so that it will call the new game module public method that will upgrade a given upgrade when clicked.
I also made a change in the save method of the vue instance when it comes to the save state json. I am going to want to have something for upgrades in the save state object, but all that really needs to be stored is an array of objects for the upgrade key, and the current level of the upgrade.
There is then the html of that I have for this example. I still just have a single hard coded html element that is for a mount point, and then just some css worked out for the template.
So far this idle game is starting to come together, but I think I am going to want to write at least one or two more posts on this subject before moving on to something else. I might come back to editing this post, and the underlaying source code at some point in the future. There are at least a few more additions I would like to make when it comes ti just the current set of features, but for the sake of this post I will not be adding any more features to this example, for this post at least. There is the question of what is next in additional posts when it comes to additional features that I might want to add to a game such as this, however that is a matter for another post.