毕设：week7-vue.js：敲击苦笑游戏（Demo）

本文链接：https://blog.csdn.net/qq_33516656/article/details/100893163

一、前言

本次的Demo主要是根据之前所学的知识来实现的，主要是数据绑定、v-if、v-on、v-bind等知识。come on!
1、先附上代码
index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>敲击苦笑游戏</title>
        <link href="style.css" rel="stylesheet" />
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
    <h1 style="text-align: center;">敲击苦笑游戏</h1>
        <div id="vue-app">
            <!-- bag image -->
            <div id="bag" v-bind:class="{ burst: ended }"></div>

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

            <!-- game control buttons -->
            <div id="controls">
                <button v-on:click="punch" v-show="!ended">敲击</button>
                <button v-on:click="restart">重新开始</button>
            </div>
        </div>
    </body>

    <script src="app.js"></script>
</html>

app.js

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: {

    }
});

style.css

#bag{
    width: 300px;
    height: 500px;
    margin: 0 auto;
    background: url(1.jpg) center no-repeat;
    background-size: 100%;
}

#bag.burst{
    background-image: url(2.jpg);
}

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

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

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

2、游戏的流程
游戏的玩法：当单击敲击按钮时。上图的红色进度条会相应的减少，当进度条为0时，会出现另外的照片，也可以单击重新开始按钮来重置游戏。
在这里插入图片描述 3、游戏的设计思路
当触发按钮时，会触发相应的事件，比如在我们的这个游戏当中，我们如果单击“敲击”按钮，会触发我们的进度条事件当中的属性值减去10，当我们单击“重新开始”按钮进度条事件的属性值加到100，与之和我们的图片绑定在一起，当进度条大于0时，一直是我们的哭脸，当进度条为0时，是哭笑脸。