Punchbag Game Vue

My first game yeeey

by Megi93

HTML

<div id="vue-app">

    <!-- bag image -->
    <div id="bag" v-bind:class="{ burst: ended}"></div>
	
    <!-- bag health -->
    <div id="bag-health">
        <div v-bind:style="{width: health + '%'}"></div>
    </div>
	
    <!--  game controls -->
    <div id="controls">
        <button v-on:click="punch" v-show="!ended">Punch</button>
        <button v-on:click="restart">Restart</button>
    </div>
	
</div>

CSS

#bag {
    width: 200px;
    height: 500px;
    margin: 0 auto;
    background: url("https://raw.githubusercontent.com/iamshaunjp/vuejs-playlist/lesson-13/img/bag.png") center no-repeat;
    background-size: 80%;
}

#bag.burst {
    background-image: url(https://raw.githubusercontent.com/iamshaunjp/vuejs-playlist/lesson-13/img/bag-burst.png);
}

#bag-health {
    width: 200px;
    border: 2px solid #000;
    margin: 0 auto 20px auto;
}

#bag-health div {
    height: 20px;
    background: crimson
}

#controls {
    width: 120px;
    margin: 0 auto;
}

JavaScript

new Vue ({
	el:'#vue-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;
		}
	},
	computed: {
	
	}
})