理由・背景

Vue.jsを業務で使うことになったので学び中。
チュートリアルをたどってゲームを作りました。
少し改造しようと思ったけど作りが思ったのと違ったのでそのままです。

やって見て

動画の主が歯切れよく進行するので飽きずに作ることができた。

元にした動画

構造

Basicフォルダ

img
app.js
inde.html
style.css

コード

app.js

Vue.component('greeting', {
    template: '<p>Hey there, I am a re-usable component</p>'
});

/* new Vue({
    el: '.test',
    template: '<p>I am a template</p>'
}); */

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

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>VueJS Tutorials</title>
        <link href="styles.css" rel="stylesheet" />
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <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>

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

style.css

#bag{
    width:200px;
    height:500px;
    margin: 0 auto;
    background: url(./img/bag.png) center no-repeat;
    background-size: 80%;
}

#bag.burst{
    background: url(./img/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;
}

作成したゲームの画像