Vue.jsで作るじゃんけんアプリのサンプルコード

vue

2020.06.24

じゃんけんアプリのサンプルコードです。

概要
サンプル
解説

概要

ジャンケンの手を出すと、対戦相手も手を出します。

勝ち、負け、あいこの判定し、結果を表示します。

実際のサンプルはこちら

VueとFirebaseコード集｜あめねこサンプルコード集

VueとFirebaseのサンプルコードに特化したサイト。あめねこサンプルコード集では、一つのページで動作確認とサンプルコードが閲覧ができるため初心者や入門者にもわかりやすくなっています。

サンプル

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