盘他

Leo-Wei105 · Aug 14, 2019 · 2670d7a · 2670d7a
1 parent f423659
commit 2670d7a
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 0 deletions.
diff --git a/Demo/css/demo_style.css b/Demo/css/demo_style.css
@@ -0,0 +1,36 @@
+#bag{
+	width:200px;
+	height: 500px;
+	background: url(../img/bag.png) center no-repeat;
+	margin: 0 auto;
+	background-size: 60%;
+}
+#bag.burst{
+	background: url(../img/bag_burst.png) center no-repeat;
+	background-size: 60%;
+}
+
+
+#bag-health{
+	width: 200px;
+	border: 2px solid black;
+	margin: 0 auto 20px auto;
+}
+
+#bag-health div{
+	background: red;
+	height: 20px;
+}
+
+#controls{
+	width: 200px;
+	margin: 0 auto;
+
+}
+
+#controls button{
+	margin-left: 20px;
+	color: #fff;
+	background: gray;
+	border: 1px solid #fff;
+	border-radius: 6px;}
diff --git a/Demo/demo.html b/Demo/demo.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+
+	<head>
+		<meta charset="utf-8">
+		<title>demo</title>
+		<link rel="stylesheet" type="text/css" href="css/demo_style.css" />
+		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+
+	<body>
+		<div id="vue-app">
+			<!--图片-->
+			<div id="bag" v-bind:class="{burst:ended}">
+			</div>
+			<!--进度条-->
+			<div id="bag-health">
+				<div v-bind:style="{width:health+'%'}"></div>
+			</div>
+			<!--控制按钮-->
+			<div id="controls">
+				<!--<h1>{{health}}</h1>
+				<p>{{ended}}</p>-->
+				<button v-on:click="punch" v-show="!ended">盘他！</button>
+				<button @click="restart">重新开始</button>
+			</div>
+		</div>
+		<script src="js/demo_app.js" type="text/javascript" charset="utf-8"></script>
+	</body>
+
+</html>
diff --git a/Demo/img/bag.png b/Demo/img/bag.png
diff --git a/Demo/img/bag_burst.png b/Demo/img/bag_burst.png
diff --git a/Demo/js/demo_app.js b/Demo/js/demo_app.js
@@ -0,0 +1,24 @@
+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:{
+
+
+	}
+
+});
diff --git a/Demo/js/vue.min.js b/Demo/js/vue.min.js