VueJS2 Net Ninja Part 7

by hlim188

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>VueJS2 Tutorials</title>
	<link href="style.css" rel="stylesheet">
	<script src="http://unpkg.com/vue"></script>
</head>
<body>
	<div id="vue-app">
		<!-- bag image -->
		<div id="bag" :class="{ burst: ended }"></div> 

		<!-- bag health -->
		<div id="bag-health">
			<div :style="{ width: health + '%'}"></div>
		</div> 

		<!-- game controls -->
		<div id="controls">
			<button @click="punch" v-show="!ended">Punch</button>
			<button @click="restart">Restart</button>
		</div>
    
  </div>
	<script src="app.js"></script>
</body>
</html>

CSS

#bag{
	width: 200px;
	height: 450px;
	margin: 0 auto;
	background: url(https://s25.postimg.cc/fl0ff76vz/bag.png) center no-repeat;
	background-size: 80%;
}

#bag.burst{
	background: url(https://s25.postimg.cc/hctea4de7/bag-burst.png) center no-repeat;
	background-size: 80%;	
}

#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;
}

Vue

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;
		}
  }
});