【Vue初心者向け】シンプルなじゃんけんアプリを作る

Vue.jsで作ったシンプルなサンプルコードです。

対象者は、Vue.jsを始めたところで、色々サンプルコードをいじってみたい人です。

じゃんけんボタンを押すと、相手の手がランダムで決定され、結果が表示されます。

実際に動作はこちらで確認できます。

じゃんけんアプリ

<template>
    <div class="janken">
        <p>じゃんけん…</p>
        <div class="janken_choice">
            <button @click="startJanken(0)">グーを出す</button>
            <button @click="startJanken(1)">チョキを出す</button>
            <button @click="startJanken(2)">パーを出す</button>
        </div>
        <div class="janken_result">
            <p v-if="result">あなたは{{this.choice[this.yourChoiceNumber]}}を出して、相手は{{this.choice[this.enemyChoiceNumber]}}を出しました。結果は{{this.result}}です</p>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            choice: ["グー", "チョキ", "パー"],
            result: null,
            yourChoiceNumber: null,
            enemyChoiceNumber: null,
        }
    },
    methods:{
        startJanken(yourChoiceNumber){
            //ランダムで相手の数字を決定する
            var enemyChoiceNumber = Math.floor( Math.random()*3 );

            this.enemyChoiceNumber = enemyChoiceNumber
            this.yourChoiceNumber = yourChoiceNumber

            //じゃんけんの手によって結果を判定する
            if(yourChoiceNumber - enemyChoiceNumber == 0){
                this.result =  "あいこ"
            }
            if(yourChoiceNumber - enemyChoiceNumber == 1){
                this.result =  "負け"
            }
            if(yourChoiceNumber - enemyChoiceNumber == 2){
                this.result =  "勝ち"
            }
            if(yourChoiceNumber - enemyChoiceNumber == -1){
                this.result =  "勝ち"
            }
            if(yourChoiceNumber - enemyChoiceNumber == -2){
                this.result =  "負け"
            }
        }
    }
}
</script>

<style scoped>
.janken_result{
    margin-top:20px;
    font-weight:bold;
}

</style>

ポイントは、じゃんけんの手は配列にしている点です。配列の番号（数字）で手を判別します。
相手のじゃんけんの手は、Javascriptの乱数を用いています。0〜２が返ってきます。
じゃんけんの勝敗の判定の実装方法は色々あるようですが、今回はコードとして長いですが、自分の手と相手の手の数字の差で判別しています。

宣伝：ブログ書いてます！ブログ