More than 3 years have passed since last update.

脱出ゲーム#2　アイテムスロット

Posted at 2020-04-14

##脱出ゲームのアイテムスロットを作ってみました。
アイテムをクリック→かばんにアイテムが入る→アイテムが消える流れを作りました。
（2020/04/15追記　試作のため、粗削り。）

nazotoki.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="nazotoki.css">
    <title>謎解きWEB</title>
</head>

<body>
    <div id="app">
        <div class="bag">
            {{bag}}
        </div>
        <hr />
        <div class="itembox">
            <div class="ball item" 　v-on:click="onclick('ball')"  v-show="show1" key="ball">ボール</div>
            <div class="banana item" 　v-on:click="onclick('banana')" v-show="show2" key="banana">バナナ</div>
            <div class="key item" 　v-on:click="onclick('key')" v-show="show3" key="key">カギ</div>
        </div>
    </div>

    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="nazotoki.js"></script>
</body>

</html>

vue.js

new Vue({
    el: '#app',
    data: {
        bag: ['〇','〇','〇','〇','〇'],
        show1: true,
        show2: true,
        show3: true,
    },
    methods: {
        onclick: function(kind){
            if (kind === 'ball'){
                Vue.set(this.bag, 0, 'ボール');
                this.show1 = false;
            }else if (kind === 'banana'){
                Vue.set(this.bag, 1, 'バナナ');
                this.show2 = false;
            }else if (kind === 'key'){
                Vue.set(this.bag, 2, 'カギ');
                this.show3 = false;
            }
        }    
    }
});

nazotoki.css

.itembox{
    display: flex;
}

.item{
    width: 60px;
    margin: 10px;
    font-weight: bold;
    border: 1px solid #000;
    border-radius: 2px;
    cursor: pointer;
    cursor: hand;
}

.ball{
    background-color: blue;
    color: white;
}

.banana{
    background-color: yellow;
}

.key{
    background-color: red;
}

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

脱出ゲーム#2 アイテムスロット

脱出ゲーム#2　アイテムスロット