Monster Game | Vue Js Game | Vue Js Game Development
Hello Everybody , In this article you are going to learn Vue js app develoment and vue js game development . As vue js is a trending frontend framework now a days and no doubt it will grow more in future . In this article we will build kill the monster game using vue js and obviousely HTML and CSS with it . You can get the source code from here and can also download Vue js game project Zip file .
This project ( Monster Game using vue js ) contains following files
- index.html
- style.css
- app.js ( The vue file )
Index.html Source code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Me and the monster game</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="container mt-5">
<div id="app">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-12 text-center mr-auto">
<h2 style="color: crimson;font-weight: 700;letter-spacing: 2px;">YOU</h2>
<img src="images/person.gif">
</div>
</div>
<div class="col-12 p-0">
<section id="userHealth" class="shadow">
<div id="userHealth" style="background-color: green;width: 100%;text-align: center;color: #fff;" :style="{width:userHealth + '%'}">
{{ userHealth + '%' }}
</div>
</section>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-12 ml-auto text-center">
<h2 style="color: crimson;font-weight: 700;letter-spacing: 2px;">MONSTER</h2>
<img src="images/monster.gif" height="220px" width="220px">
</div>
</div>
<div class="col-12 p-0">
<section id="monsterHealth" class="shadow ml-auto">
<div id="monsterHealth" style="background-color: green;width: 100%;text-align: center;color: #fff;" :style="{width:monsterHealth + '%'}">
{{ monsterHealth + '%' }}
</div>
</section>
</div>
</div>
</div>
<div class="row mt-5 text-center">
<div class="col-12">
<section id="startGame" v-if="!running">
<button class="btn btn-primary" @click="start">Start Game</button>
</section>
</div>
<div class="col-12 mt-2">
<section id="allButton" v-if="running">
<button id="attack" class="btn btn-danger" @click="attack">Attack</button>
<button id="spattack" class="btn btn-info" @click="spattack">Special Attack</button>
<button id="heal" class="btn btn-primary" @click="heal">Heal</button>
<button id="giveup" class="btn btn-warning" @click="giveup">Give Up</button>
</section>
</div>
</div>
<div class="row mt-5">
<div class="col-12 text-center shadow">
<section id="result" v-if="li">
<ul>
<li style="font-size: 20px; letter-spacing: 3px; font-weight: 500;background-color: chocolate;color: #eee;border-radius: 10px;padding: 8px;">
<i class="fa fa-gavel" aria-hidden="true"></i>
<span>you harmed the monster with {{ this.lidata1[this.i] }}% </span>
<i class="fa fa-gavel" aria-hidden="true"></i>
</li>
<li style="font-size: 20px; letter-spacing: 3px; font-weight: 500;background-color:darkcyan;color: #eee;margin-top: 2px;border-radius: 10px;padding: 8px;">
<i class="fa fa-gavel" aria-hidden="true"></i>
<span>Monster harmed you with {{ this.lidata1[this.i-1] }}% </span>
<i class="fa fa-gavel" aria-hidden="true"></i>
</li>
</ul>
<!-- <ul v-for="data2 in lidata1">
<li> Monster harmed you with {{ data2 }}% </li>
</ul> -->
</section>
</div>
</div>
</div>
</div>
<script src="js/vue.js"></script>
</body>
</html>
Style.css source code :
body {
margin: 0;
padding: 0;
}
#userHealth {
width: 80%;
height: 50px;
background-color: #eee;
transition: 0.5s all;
border-radius: 10px;
}
#monsterHealth {
width: 80%;
height: 50px;
background-color: #eee;
transition: 0.5s all;
border-radius: 10px;
}
ul li {
list-style-type: none;
}
Vue.js Source code :
new Vue({
el: "#app",
data: {
userHealth: 100,
monsterHealth: 100,
running: false,
lidata1: [],
lidata2: [],
i: -1,
li: false,
},
methods: {
start: function () {
this.running = true;
},
attack: function () {
this.li = true;
var max = Math.floor(Math.random() * 10) + 1;
var min = 3;
var final = Math.max(max, min);
this.lidata1.push(final);
this.i++;
this.userHealth -= final;
if (this.userHealth <= 0) {
this.userHealth = 0;
alert("monster wins the match");
this.userHealth = 100;
this.monsterHealth = 100;
this.running = false;
this.li = false;
return;
}
var maxm = Math.floor(Math.random() * 10) + 1;
var minm = 3;
var finalm = Math.max(maxm, minm);
this.lidata1.push(finalm);
this.i++;
this.monsterHealth -= finalm;
if (this.monsterHealth <= 0) {
this.monsterHealth = 0;
alert("you wins the match");
this.monsterHealth = 100;
this.userHealth = 100;
this.running = false;
this.li = false;
return;
}
},
spattack: function () {
this.li = true;
var max = Math.floor(Math.random() * 10) + 1;
var min = 6;
var final = Math.max(max, min);
this.lidata1.push(final);
this.i++;
this.userHealth -= final;
if (this.userHealth <= 0) {
this.userHealth = 0;
alert("you wins the match");
this.userHealth = 100;
this.monsterHealth = 100;
this.running = false;
this.li = false;
return;
}
var maxm = Math.floor(Math.random() * 10) + 1;
var minm = 6;
var finalm = Math.max(maxm, minm);
this.lidata1.push(final);
this.i++;
this.monsterHealth -= finalm;
if (this.monsterHealth <= 0) {
this.monsterHealth = 0;
alert("you wins the match");
this.monsterHealth = 100;
this.userHealth = 100;
this.running = false;
this.li = false;
return;
}
},
heal: function () {
var healAmount = 20;
if (this.userHealth >= 100 || this.monsterHealth >= 100) {
this.userHealth = 100;
this.monsterHealth = 100;
return;
} else {
this.userHealth += healAmount;
this.monsterHealth += healAmount;
if (this.userHealth >= 100 || this.monsterHealth >= 100) {
this.userHealth = 100;
this.monsterHealth = 100;
return;
}
}
},
giveup: function () {
this.running = false;
this.userHealth = 100;
this.monsterHealth = 100;
this.li = false;
}
}
});
The images used inside this project you will get from the zip file whose download link is given below.
The main concept of making these game in vue js is make yourself more aquanted with vue . you can also make vue js multiplayer games easily by starting with such small games and programs . Not only multiplayer game , you can also make vue js card game , vue js canvas game etc . using vue js .Vue js is recently getting more popular for its very easy to use feature . I will say vue js is one of the best fronted framework of js you should learn . Everyone starts from 0 . So start from 0 with vue and slowly slowly learn about what is vue js game engine and how vue.js game development works and learn about vuetify etc and lots more . The main thing is you just need to start.
Thank you for reading this article .....
