Land sections vuejs example
One of my many canvas examples in the works is a game prototype that I am calling just simply Mr Sun. So far I just have a general idea of the kind of game that I would like to make, but many of the core logic features are still not together. The general idea at least is that there is a sun object that is surrounded by world section objects, and the player can move the sun object around inside of this circle of world objects. When moving the sun that changes the distance between the sun and any given world section and that in turn can effect each world land section object in a different way.
The basic idea then is simple enough, but what has proved to not be so simple is what to do when it comes to building on top of that simple general idea. There is a lot that comes to mind when it comes to adding features that will result in an interesting game that people might want to play. There are in fact maybe a few to many ideas actually, but I am thinking it might be fun to take it in some kind of sandbox or god game type direction maybe.
So I thought I would make a simple vuejs examples of the basic idea of the game, and have a few menus to switch between. The focus of this vuejs example will be to not make the game a canvas project, but more of a front end project in general where I am using vuejs as a framework to pull everything together.
1 - A utils lib
As of this writing in this file I have a distance formula that I am using to find the distance between the sun, and a given land section, however it is also a function that I might use all over the place if this project does continue to grow.
I also have some typical methods that I often use in many of my canvas examples such as this create canvas and get canvas relative methods that I use to just create a canvas method and also to help get a canvas rather than window relative pointer object position.
1 - The main menu.js file and vue instance
I then have a main vuejs instance as I do with all of my vuejs examples thus far as usual. That is that this is the main vuejs instance that I will be attaching to the hard coded html with using the vue el option. This is based off of what I worked out with my other vuejs example where I worked out a basic menu system. So the basic idea of this is that I have this main vue.js instance that renders a navigation bar that can be used to change what the current menu is. Then a component added in one of the many additional files that add menus is used to render the rest of the view. This allows me to create a collection of menus each of which provide a user interface to work with an aspect of the game state.
2 - The menus thus far
So then the main vuejs instance will render a navigation bar, and whatever the current menu is. So then I should take a moment to go over these menus as they currently stand.
2.1 - simple home menu
I have a simple home section that I might do away with in future edits of this vuejs example if I do not find something more useful to do with it. For now I am just using it as a place to render basic information about the state of the game.
2.2 - The sun menu
I have a main sun menu where I am just providing an interface to change the position of the sun object relative to the other world sections.
2.3 - The sections menu
I then have an additional sections menu where I can view info about each section.
2.4 - The sections table menu
The whole point of this example is to work out a simple form of a game that I would like to actually be a major canvas game with great graphics and so forth. In this form of the game the focus is not the final product but a side project where I am working out the core logic of what the game should be. So I would like to have a menu that will display the current state of all of the land sections as a way to vue what is going on with various properties of these land section objects.
3 - The mixin folder
I have a mixin folder where I have objects that contain vuejs features that I would like to have across all vuejs instances. For now this is just a set of methods that have to do with setting the position of the sun object but if I continue working on this project it is possible that this folder might grow with additional global mixins that I will want for this example.
3.1 - Sun methods
For now I just have some methods that have to do with setting the position of the sun object.
4 - The components
For this vuejs example I have made a number of components that I have pulled into there own files in a comp folder in the root of the example folder. These are a whole bunch of components that are used in each of the menus for various things like moving the position of the sun object with a canvas element, but then there are others that do the same thing only with direct text input of an angle and distance from a center point.
4.1 - sections-info-table
In the sections menu I have a sections grid component that displays the current state of a land section object.
4.2 - sections-ui-grid
In the sections menu I have a sections UI grid component that displays the current state of a land section object s gird. For this component I went with a collection of div elements for starters, but at some point in the future I might switch to using a canvas element if I keep putting more time into this.
The general idea here is to have a component that will be used to interact with, or at least display the current status of a grid for a currently selected land section object.
4.3 - sections-ui-select
In the sections menu I am going to want to have a way to select a current land section object. This current land section object can then be worked with using other components in the sections menu.
4.4 - sun-base
Here I have a file with some base components for the sun menu. I have one that is used to just display basic info about the sun object, and another than can be used to set the position of the sun with direct text input.
4.5 - sun-ui-canvas
The is a component that I am using in the sun menu that is used to display the current position of the sun relative to the land section objects using a canvas element. The component can also be used as a way to set the position of the sun by clicking and dragging the sun object around in the canvas element.
5 - The html
I then just need a little html and css to pull this all together. In the html file I of course need to have a script tag that links to vuejs, however I also need script tags for my utils lib, the mixins, and all the additional components that I will be using. In addition I am also using a link element to link to an extremal css file where I have all my css classes that I will be using for the various templates.
The css file:
6 - Conclusion
The basic idea that I had in mind for this vuejs example is up and running all ready, but there is much more work to do in order to get this working the way that I really had in mind. I would like to start adding a lot of features that will help me to get the core logic of the game, and all the features that I want working. This might prove to be a good move for this idea that I had in mind for a game in the sense that I am putting aside everything that has to do with graphics for the most part and am focusing more so on just working out the rules and mechanics of the game.
If all goes well a simple largely text only, or with just simple canvas graphics only type of game should still be fun if I do this right. Then it is just a matter of using what I worked out here in an actual full canvas game with a 2d view with lots of half way decent art, and animations.