Adding over time and away production to a vuejs idle game example
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.
Pull the source for this and all my other vuejs exmaples at my github
The best way to run this example locally might be to clone down the source and run it locally. The source for this vuejs idle game can be found at my vuejs test repo at my github, along with all my other vuejs examples. When pulling it down npm can be used to install dependences for the repo and then the list script can be used to run a list for all the examples, including this one.
The list script can be used to serve a list for all examples.
At which point you can then view the list in a web browser at localhost:3000.
1 - The game module
Major introductions at this point include an update method that will update the game object by a given seconds. This method is intended to be used in a main update loop of one kind or another and is needed for the over time production features that I will be adding.
Additional major additions have to do with a few new helper methods that have to do with the action of mining. There is a mine helper method that is intended to be called just once that makes use of the Math.random method, another mine helper that called the one that uses Math.random a few times, and then another mine method that is intended to be used when dealing with a high count of mine actions.
2 - The vuejs instance
Now for the vue instance for this idle game example, here I have an updated template that will display a progress bar that is the amount of time until the next mine count to be preformed. I also added a number of methods for loading, saving and reseting a save state which is another basic feature that I added at this point thus far. Yet another change that was made was the introduction of a basic app loop in the mounted lifecycle hook, I am not sure if this is the ideal way to go about having a main app loop for a project such as this but I will be needing something to that effect for the resource gain over time features.
3 - The html file
4 - Conclusion
This basic idle game using vuejs as a client side framework is coming together okay, but there is still a great deal missing even when it comes to just the basic set of features that just about any idle game should have. In additional posts on this subject i think the next step should be having a way to do something with the money that is begin made in the game, in other words upgrades.
When it comes ot the state at which the game is at thus far in relation to the topic of this post, there might still be some additional room for improvement such as having a welcome back message rather than just having the amount of resources given. So I might want to come back, and edit this post, and refine the code a little at some point, but the basic idea that I had in mind for this post today is more or less done.