xinggevip

Vue2.x_1.9小游戏实战
app.jsnew Vue({ el:"#vue-app", data:{ ...
扫描右侧二维码阅读全文
18
2019/05

Vue2.x_1.9小游戏实战

app.js

new Vue({
    el:"#vue-app",
    data:{
        health:100,
        ended:false,
        bg:"bg01",
    },
    methods:{
        punch:function () {
            this.health -= 10;
            console.log(this.health);
            if (this.health <= 0){
                this.ended = true;
                this.bg = "bg02";
                console.log(this.ended);
            }
        },
        restart:function () {
            this.health = 100;
            this.ended = false;
            this.bg = "bg01";
            console.log(this.health);
            console.log(this.ended);
        }
    },
    computed:{

    }
});

style.css

/*通过控制对象名的真假实现
#bag{
    width: 200px;
    height: 300px;
    margin: 0px auto;
    background: url("img/girl01.jpg")center no-repeat;
    background-size: auto 300px;
    background-size: 80%;
    border: 1px solid red;
}


#bag.bg02{
    background: url("img/girl02.jpg")center no-repeat;
    background-size: auto 300px;
    background-size: 80%;
}
*/
#bag{
    width: 200px;
    height: 300px;
    margin: 0px auto;
    background-size: auto 300px;
    background-size: 80%;
    border: 1px solid red;
}
.bg01{
    background: url("img/girl01.jpg")center no-repeat;
}
.bg02{
    background: url("img/girl02.jpg")center no-repeat;
}

#bag-heatlth{
    width: 200px;
    margin: 20px  auto;
    border: 2px solid #000;
}
#bag-heatlth div{
    height: 20px;
    background: indianred;
}
#controls{
    width: 200px;
    margin: 0px auto;
}
#controls button{
    margin-left: 20px;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="vue-app">
        <!--图片-->
        <!--通过判断对象名的真假实现-->
        <!--<div id="bag" v-bind:class="{bg02:ended}"></div>-->
        <!--通过js判断实现-->
        <div id="bag" v-bind:class="bg"></div>
        <!--进度情况-->
        <div id="bag-heatlth">
            <div v-bind:style="{width:health + '%'}" ></div>
        </div>
        <!--控制按钮-->
        <div id="controls">
            <button v-on:click="punch()" v-bind:disabled="ended">技能攻击</button>
            <button v-on:click="restart()">重新开始</button>
        </div>




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

效果演示

http://hao.qiangssvip.com/vuestudy/Lesson09

Last modification:May 21st, 2019 at 09:22 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment