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

0

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 ) 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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 ) 




 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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 ) 




 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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



Post a Comment

0Comments
Post a Comment (0)