Game Battle Vue JS: Part1 Overview

21/04/2020    Maykhel David    901    Website

Membuat Konsep Game dengan Vue JS: Overview - Hallo semuanya, pada kesempatan kali ini kita akan mencoba membuat sebuah konsep game sederhana menggunakan vue js. konsep game berikut adalah game dengan konsep menyerang seekor monster atau musuh. kali inikita tidak akan membuat karakter game atau animasi saat karakter tersebut menyerang, tetapi kita akan membuat sebuah logika bagaimana sebuah game dapat berjalan meski hanya bermodal vue js, html dan css.

Persiapan

Pada artikel ini kita menggunakan foundation sebagai bantuan untuk membuat tampilan sederhana agar tidak terlalu banyak menambahkan css untuk mengubah tata letak elemen.

Apa yang akan kita lakukan?

Untuk berjalannya sebuah game, maka harus ada sebuah trigger yang bisa membuat interaksi antara user dan game yang dimainkan. Berikut adalah aktivitas yang akan kita berikan pada game tersebut.

- Start Game: tentu ketika kita membuat sebuah game, harus ada tombol atau trigger untuk memulai game yang ada.
- Menentukan Karakter: pada game ini kita memiliki dua karakter, yaitu Hero dan Monster yang akan saling serang.
- Menentukan Health Point Karakter: kita akan mendefinisikan jumlah Health Point yang nantinya akan berkurang dan bertambah sesuai kondisi selanjutnya.
- Membuat Serangan: disini kita akan membuat sebuah serangan dengan nilai acak tertentu, dan juga ketika selesai menyerang maka akan ada serangan balik dari monster.
- Menambah Health Point: selain menyerang, kita juga bisa menambah Health Point saat bertarung sekaligus mendapatkan serangan secara acak.
- Kalah atau Menang: disini kita akan menentukan bahwa Hero yang kita gunakan menang atau kalah sesuai dengan Health Point yang tersisa.
- Menyerah: selain kalah atau menang, kita juga memungkinkan pemain untuk menyerah dan langsung menyelesaikan pertandingan.

Sebagai catatan, artikel kali ini kita tidak akan melakukan desain dari karakter yang ada, disini hanya akan membuat logika sederhana saat membuat game pertarungan. Selebihnya kalian bisa memberikan kustomisasi dari hasil artikel ini. Demikian artikel ini yang membahas tentan Membuat Konsep Game dengan Vue JS. Sampai jumpa di artikel part berikutnya.

Tips dan Trik, Vue JS