Game Battle Vue JS: Part2 Menyerang

21/04/2020    Maykhel David    746    Website

Game Battle Vue JS: Part1 Menyerang - 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 dimana konsep game berikut adalah game dengan konsep menyerang musuh dan mendapatkan serangan balik. kali ini kita tidak akan membuat karakter game atau animasi saat karakter tersebut menyerang. Tetapi kita coba menyediakan bar HP (Health Point) sebagai indicator kalah atau menang.

 

Disini kita akan menggunakan Foundation framework namun hanya CSS nya saja


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.6.3/css/foundation.min.css" integrity="sha256-ogmFxjqiTMnZhxCqVmcqTvjfe1Y/ec4WaRj/aQPvn+I=" crossorigin="anonymous" />


Sebelum kita memulai membuat aktivitas menyerang, kita akan buat struktur dasar tampilan healthbar terlebih dahulu.

<section class="row">
        <div class="small-6 columns">
            <h1 class="text-center">YOU</h1>
            <div class="healthbar">
                <div
                        class="healthbar text-center"
                        style="background-color: green; margin: 0; color: white;"
                        :style="{width: playerHealth + '%'}">
                    {{ playerHealth }}
                </div>
            </div>
        </div>
        <div class="small-6 columns">
            <h1 class="text-center">MONSTER</h1>
            <div class="healthbar">
                <div
                        class="healthbar text-center"
                        style="background-color: green; margin: 0; color: white;"
                        :style="{width: monsterHealth + '%'}">
                    {{ monsterHealth }}
                </div>
            </div>
        </div>
    </section>

Dan menentukan property dari masing – masing health pada app.js

new Vue({
    el: '#app',
    data: {
        playerHealth: 100,
        monsterHealth: 100,
        gameIsRunning: false,
        turns: []
    },
// method
});

Jika sudah, selanjutnya kita akan  membuat layout tombol yang akan kita gunakan dengan masing-masing mengarah ke method yang berbeda.

<section class="row controls" v-if="!gameIsRunning">
        <div class="small-12 columns">
            <button id="start-game" @click="startGame">START NEW GAME</button>
        </div>
    </section>
    <section class="row controls" v-else>
        <div class="small-12 columns">
            <button id="attack" @click="attack">ATTACK</button>
            <button id="special-attack" @click="specialAttack">SPECIAL ATTACK</button>
            <button id="heal" @click="heal">HEAL</button>
            <button id="give-up" @click="giveUp">GIVE UP</button>
        </div>
    </section>

Pertama, kita harus membuat method untuk memulai game dengan method berikut

startGame: function () {
            this.gameIsRunning = true;
            this.playerHealth = 100;
            this.monsterHealth = 100;
            this.turns = [];
        },

Selanjutnya kita akan membuat sebuah method yang attack yang berfungsi Ketika tombol attack ditekan dan menghasilkan demage yang cukup kecil.

attack: function () {
            var damage = this.calculateDamage(3, 10);
            this.monsterHealth -= damage;
            this.turns.unshift({
                isPlayer: true,
                text: 'Player hits Monster for ' + damage
            });
            if (this.checkWin()) {
                return;
            }

            this.monsterAttacks();
        },

 

Untuk menghasilkan demage yang cukup besar, maka kita perlu membuat method baru yang bernama specialAttack dengan kode berikut

specialAttack: function () {
            var damage = this.calculateDamage(10, 20);
            this.monsterHealth -= damage;
            this.turns.unshift({
                isPlayer: true,
                text: 'Player hits Monster hard for ' + damage
            });
            if (this.checkWin()) {
                return;
            }
            this.monsterAttacks();
        },

Dengan begitu kita memiliki  dua buah tombol yang berfungsi untuk menyerang. Sebagai catatan, artikel kali ini kita tidak akan melakukan desain dari karakter yang ada, disini hanya akan membuat logika sederhana saat membuat game pertarungan. Demikian artikel kali ini sampai jumpa di artikel game battle dengan vue js part selanjutnya

Tips dan Trik, Vue JS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More
chatarrow