Hit the Mark: Building a Vue.js Punch Bag Game

How to make a Punch Bag Game using Vue.js | Vue js game development with source code for beginners

Want to make a Vue js Game ? In this tutorial you gonna learn how to make a simple game using vue js . It's totally for beginners . It's gonna be a super easy tutorial .So let's dive in .

Game rule :

The game rules are very simple . user will press punch button and the health of the punch bag a will be decreased with a specific amount and when the health will be zero ( 0 ) then the punch bag will burst and the game will restart when the user press the restart button ,it's that simple .

In this game we will use vue js CDN in our HTML file . You can copy the CDN from below

vue.js CDN :

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Files we need :

index.html

style.css

vue.js

Index.html ( source code )

<!DOCTYPE html>
<html>
   <head>
      <title>
         Punching bag using VUE JS
      </title>
      <link rel="stylesheet" type="text/css" href="style.css">
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
      <div id="app">
         <div id="image">
            <div  v-bind:class="{burst:ended}"></div>
         </div>
         <div id="health">
            <div id="inside-health" v-bind:style="{width:health+'%'}">
            </div>
         </div>
         <div id="button">
            <button v-on:click='punch' v-show="!ended">PUNCH</button>
            <button v-on:click='restart'>RESTART</button>
         </div>
      </div>
      <script type="text/javascript" src="vue.js"></script>
   </body>
</html>

style.css ( source code )

body
{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
#app
{
 margin-left: 35%;
}
#app #image div
{
 margin-top:10%;
 height: 520px;
 width: 45%;
 background: url(punch.gif);
 background-size: cover;
 border-radius: 20px;

}
#app #image .burst
{
 height: 520px;
 width: 200px;
 background: url(bag-burst.png);
 transition: 0.5s all;
}
#health
{
 margin-top: 20px;
 width: 540px;
 border:2px solid #000;
 border-radius: 50px;
}
#button button
{
 margin-top: 20px;
 height: 40px;
 width: 100px;
}
#health #inside-health
{

 height: 20px;
 background-color: red;
 display: block;
 border-radius: 50px;
}

vue.js ( source code )

new Vue({

el:'#app',
data:{
 health:100,
 ended:false
},
methods:{
punch:function(){
 this.health-=10;
 if(this.health<=0)
 {
  this.ended=true;
 }
},
restart:function()
{
 this.health=100;
 this.ended=false;
}
}

});

Now your game is ready , just run your index.html and play the game..

Hope it helps you -:)

Also Read :-

Monster game using Vue js

How to integrate vue js in Laravel

How to install vue js using CLI