Tech x Talent
Published in

Tech x Talent

Build a Monster Slayer App using Vuejs

Hello Readers,

I am back with my new article where I will be explaining how to create your own monster slayer app using VueJS.

VueJS is a JavaScript framework for building user interfaces. Its core part is focused mainly on the view layer and it is very easy to understand. The version of Vue that we are going to use in this tutorial is 2.0. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Now, let us understand how to actually code and create the app, you might find this app created a number of places but it’s very important to actually understand and then create this app so that you could easily modify and bring changes to the app or create a new app in future.
Let us learn and implement this app on our own and understand the components of vuejs.

Now, before jumping into actual coding let us first think about the core features of our app which will be as follows:

  1. When the player attacks the monster, the monster will attack too at the same time and not indifferent time interval.

So, now let us begin with our actual coding and making this app
First of all, let us design our skeleton HTML page where there would be just our HTML code and the template which we wish to render to our page, later on, step by step we will keep on adding methods to our app to make it work dynamically!

This is how our very starting HTML code in index.html looks like

Now, let us learn what are the different important tags we need to import to make this application
The first important tag (used in line 12) which is very important to import to make your application work for vuejs is

<script src="https://unpkg.com/vue@next" defer></script>

This tag is useful for learning purposes and you could also use the tag below
for deployment purposes, if you want!

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

just make sure that all your div ids, headers ids, and element ids are carefully named as it might later create a problem when using it in your js or CSS file.

Now, use the CSS file as given below to make your static webpage look beautiful and stunning! name it as styles.css

don’t forget to integrate your CSS file into your HTML file to make your website look stylish as you want!

you could edit the above code in your CSS file to make it look as you want and after loading your page it looks something like this now! Here you would only see a static website with no functionality! we will add them all step by step later.

The first look of your app!

Now! it’s time to add methods to your application in order to make your features work, so let us start by creating an app.js file that will serve as a Javascript file and will help us in implementing vuejs code there. Your js code should look like this

now, talking about the methods created in our app.js file we can see different methods I have created here. (read the comments carefully and try to understand what these methods do) , you may also create your own methods and test them!

Here you could notice a very special vue attribute which is computed this is one of the attributes where every time you do a method call it gets updated for all and shows you the latest information on your screen.

Now, since we have made our very first change to the Javascript file we will need to also update our HTML code to see the changes in our website and make it functional, and don’t forget to use the code

<script src="app.js" defer></script>

to integrate your javascript file into your HTML code.
Now, your HTML file should look something like this

You could see that there are some vue attributes added to our HTML code, let’s discuss them one by one, the attribute @click is the one which calls for a particular method when the particular button is clicked here we have the button as ATTACK and the method called is attackMonster the next attribute is :disabled which enables to disable the function with name mayUseSpecialAttack which executes in every 3 round (you may modify it to 2 or 4 or even 5 depends on you!) according to the logic written in the method if it becomes true then the button becomes disable else it’s enabled. We have also added a battle log which we will be implementing later.

Now, your application should look like as shown below and should now actually work!

The second look of your app!

Now, we will move forward with our app quickly and create the healing functionality to our app which will help the player to heal him/her self and also we will now finally implement all the core features of our app and the battle log as well so, now your final code will look something like this

HTML code

CSS code

javascript code

now, let us have a look at the newly added features to our app here
The new methods added are surrender() which sets the winner as the monster and in our HTML code we have set a condition where if the winner is monster then you lost the game else you are the winner if both of the two conditions are false then, the game is drawn! and then when you click the button start game then, the method startGame() gets called and the variables are reset again!
Another new method is the addLogMessage() which helps to display the log of the game and has three arguments for who, what, and value in each move, and it gets rendered in our HTML code using the vue attribute named v-for which iterates through the logmessages[] array and reads out the object fields in it which could be passed by using :class attribute in vue and it checks for the given condition and displays the message to the screen.

Now, your final app looks something like this and is completed!!

Your app is ready!

Refer to the vue documentation for more knowledge Here

Keep learning and keep growing and also keep exploring more!

All the very best!

For more interesting and informative articles and tips follow me on Medium and Linkedin

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Swapnil Kant

Swapnil Kant

82 Followers

Hi, I am Swapnil Kant, an avid programmer, and a full-time learner! One who is highly interested in Algorithm Optimization and Development