• Home
  • Odalami shefa – interactive Vue.js example

Odalami shefa – interactive Vue.js example

Wellcome again in this demonstration skills series. So you may ask yourself what sort of app is this (check demo here). This app is not part of any of my real life apps and it’s job is simply to demonstrate some Vue features. You can find code in my Github repository or go to DEMO HERE.

So why I build this app. There is no good reason … Simply I just wanna try some capabilities that Vue.js provide when you develop something. In this app when you clicks button “ODALAMI” or “ODALAMI JAČE” that means you try to punch your imaginary boss. You and your boss are represented with green process indicators on the top.

So what this “usefull” app actually do… when you click button “POKRENI NOVU IGRU” app shows you some buttons “ODALAMI”, “ODALAMI JAČE”, “PRIKUPI SNAGU”, “PREDAJ SE” and two strength indicators above. Left indicator represents you and your strength (initial is 100) and right indicator represents your boss strength. When you click button “ODALAMI” or  “ODALAMI JAČE” you “hit” your boss with some “random generated power” and that weakeness you and also your boss. Two indicators will show your new strength and also strength of your boss.  After you punch your boss also boss will punch you back (automatically), so strength indicators recalculate and show your and boss strength after that punch. Strength of punches is randomly calculated in Vue so maybe you won at the end, but sometimes your boss won. Button “ODALAMI” represents a normal punch, button “ODALAMI JAČE” represents higher strength punch, button “PRIKUPI SNAGU” pause your next punch and give you some additional strength and button “PREDAJ SE” simply means “quit game” and your boss won.

So there is bunch of interactivity here … so how I done this:

For building this I use Vue.js and some styling with Foundation CSS

In index.html there is everything for rendering this app in browser with some Vue template markups but real logic is inside app.js which I will briefly explain here:

data: {
        mojaSnaga: 100,
        shefovaSnaga: 100,
        igraTece: false,
        arrpor: [],
        mojBackColor: 'green',
        shefBackColor: 'green'
    },

In code above we simply add some properties that represents my and bosses strength, some other properties needed in app, and also we initialize background property for strength fields (green)

methods: {
        pokreniNovuIgru: function () {
            this.igraTece = true;
            this.mojaSnaga = 100;
            this.shefovaSnaga = 100;
            this.arrpor = [];
        },
        napad: function () {
            var snaga = this.calculatesnaga(3, 10);
            this.shefovaSnaga -= snaga;
            this.arrpor.unshift({
                isJa: true,
                text: 'Udario sam Shefa snagom ' + snaga
            });
            if (this.provjeriPobjedu()) {
                return;
            }

            this.shefofNapad();
        },
        jaciNapad: function () {
            var snaga = this.calculatesnaga(10, 20);
            this.shefovaSnaga -= snaga;
            this.arrpor.unshift({
                isJa: true,
                text: 'Udario sam Shefa snagom  ' + snaga
            });
            if (this.provjeriPobjedu()) {
                return;
            }
            this.shefofNapad();
        },
        povratiSnagu: function () {
            if (this.mojaSnaga <= 90) {
                this.mojaSnaga += 10;
            } else {
                this.mojaSnaga = 100;
            }
            this.arrpor.unshift({
                isJa: true,
                text: 'Povratio sam snagu za 10'
            });
            this.shefofNapad();
        },
        odustani: function () {
            this.igraTece = false;
            location.reload();
        },
        shefofNapad: function() {
            var snaga = this.calculatesnaga(5, 12);
            this.mojaSnaga -= snaga;
            this.provjeriPobjedu();
            this.arrpor.unshift({
                isJa: false,
                text: 'Shef me udario snagom  ' + snaga
            });
        },
        calculatesnaga: function(min, max) {
            return Math.max(Math.floor(Math.random() * max) + 1, min);
        },
        provjeriPobjedu: function() {
            if (this.shefovaSnaga <= 0) {
                if (confirm('Pobijedio si Shefa! Nova igra?')) {
                    location.reload();
                } else {
                    this.igraTece = false;
                    location.reload();
                }
                return true;
            } else if (this.mojaSnaga <= 0) {
                if (confirm('Shef te nokautirao! Ustaj i pokreni novu igru!')) {
                    location.reload();
                } else {
                    this.igraTece = false;
                    location.reload();
                }
                return true;
            }
            return false;
        }
    },

Explanation of methods above:

  • pokreniNovuIgru() is method for start new game
  • napad() is method for punch when you click “ODALAMI”.  Here is calculated strength of punch, then we update strength indicator and also then we call new punch that represents boss punch
  • jaciNapad() is method for punch when you click “ODALAMI JAČE”. Basically it means that you punch your boss with more power than simple punch allows you
  • povratiSnagu() is method for “heal” you from punches. This will increase your strength indicator
  • odustani() in this method we “surrender” and then “boss” win
  • shefovNapad() is method in which “boss” punch us and here is calculated strength of his attack and ours strength after attack
  • calculatesnaga() simple method for calculate “power of punch” based on min and max value we provide in app
  • provjeriPobjedu() method that return state of game (“Win” or “Loose”) and reload new game if needed
watch: {

        mojaSnaga: function(val) {

            if(val <= 49) {

                this.mojBackColor = "red";
            }
        },
        shefovaSnaga: function(val) {

            if(val <= 49) {

                this.shefBackColor = "red";
            }
        }
    }

In above code we simply “watch” for changes (events in app) and update the properties

So that’s it … hope you like what you see here … See you in my next article…

*Please note: I’m not a native english speaker – so forgive me grammar or other mistakes in text here 🙂 – is that ok? 

 

Tags: , ,

Copyright by Kristijan Klepač 2018