Game Battle Vue JS: Part3 Isi Darah

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

 

21 April 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat