Game Battle Vue JS: Part3 Isi Darah

21/04/2020    Maykhel David    734    Website

Hallo semuanya, pada kesempatan kali ini kita akan melanjutkan bagaimana cara membuat sebuah konsep game sederhana menggunakan vue js. Sebelumnya kita juga pernah bahas pada artikel bagian overview dan juga bagian membuat serangan dimana konsep game berikut adalah game dengan konsep menyerang musuh dan mendapatkan serangan balik. Kali ini kita akan membuat method untuk menambah darah dari hero yang kita miliki, dan juga membuat fungsi menyerah Ketika kita mengklik tombol giveup.

Menambahkan Method Heal
Pada method berikut kita akan menambahkan poin pada playerHealth, tetapi kita juga akan menerima serangan dari monster dengan nilai acak.

heal: function () {
            if (this.playerHealth <= 90) {
                this.playerHealth += 10;
            } else {
                this.playerHealth = 100;
            }
            this.turns.unshift({
                isPlayer: true,
                text: 'Player heals for 10'
            });
            this.monsterAttacks();
        },

Yang harus kalian sadari pada artikel sebelumnya saya juga menambahkan kode this.monsterAttacks() tetapi kita belum membuat method tersebut, untuk membuatnya sama seperti method attack biasa, hanya saja kita menggunakan playerHealth sebagai targetnya

monsterAttacks: function() {
            var damage = this.calculateDamage(5, 12);
            this.playerHealth -= damage;
            this.checkWin();
            this.turns.unshift({
                isPlayer: false,
                text: 'Monster hits Player for ' + damage
            });
        },

Lalu kita akan membuat method sederhana untuk menyerah

giveUp: function () {
            this.gameIsRunning = false;
        },

Dan kita memerlukan sebuah fungsi yang akan kita beri nama calculateDemage untuk menghitung demage yang dihasilkan Ketika kita menyerang atau terkena serangan.

calculateDamage: function(min, max) {
            return Math.max(Math.floor(Math.random() * max) + 1, min);
        },

Dan yang terakhir, kita akan membuat sebuah method untuk mengecek apakah kita menang atau tidak

checkWin: function() {
            if (this.monsterHealth <= 0) {
                if (confirm('You won! New Game?')) {
                    this.startGame();
                } else {
                    this.gameIsRunning = false;
                }
                return true;
            } else if (this.playerHealth <= 0) {
                if (confirm('You lost! New Game?')) {
                    this.startGame();
                } else {
                    this.gameIsRunning = false;
                }
                return true;
            }
            return false;
        }

Sebagai catatan, artikel kali ini kita tidak akan melakukan desain dari karakter yang ada, disini hanya akan membuat logika sederhana saat membuat game pertarungan.

Dengan begini semua fungsi yang kita butuhkan sudah bisa digunakan, untuk pengembangan lebih lanjut kalian bisa menambahkan level atau stage, semua tergantung dari kreasi kalian masing-masing. Demikian aartikel kali ini sampai jumpa di artikel game battle dengan vue js part selanjutnya

Tips dan Trik, Vue JS