【vue.js 超初心者】vue.jsでじゃんけんアプリ
【vue.js 超初心者】vue.jsでじゃんけんアプリ:
vue.jsを最近学び始めたので、じゃんけんアプリを作ってみた。
htmlのbodyタグ内
janken.html
<body>
<div id="app">
<!-- 結果 -->
<div>
<p>結果 : {{ result }}</p>
<p>勝ち数 : {{ winCount }}</p>
<p>負け数 : {{ loseCount}}</p>
</div>
<!-- 敵 -->
<div>
<p>敵の手は : {{ enemyHand }}</p>
</div>
<!-- 自分 -->
<button v-on:click="fight('ぐー')">ぐー</button>
<button v-on:click="fight('ちょき')">ちょき</button>
<button v-on:click="fight('ぱー')">ぱー</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</body>
続いて、js
main.js
new Vue({
el: '#app',
data: {
handArr: ['ぐー','ちょき','ぱー'],
enemyHand: '',
result: '',
winCount: 0,
loseCount: 0
},
methods:{
fight: function(myHand){
var index = Math.floor(Math.random()*Math.floor(3));
this.enemyHand = this.handArr[index];
//引き分け
if(myHand === this.enemyHand){
this.result = '引き分け';
}
//勝ち
if(this.enemyHand === 'ぐー' && myHand ==='ぱー'){
this.result = '勝ち';
this.winCount++;
}
if(this.enemyHand === 'ちょき' && myHand ==='ぐー'){
this.result = '勝ち';
this.winCount++;
}
if(this.enemyHand === 'ぱー' && myHand ==='ちょき'){
this.result = '勝ち';
this.winCount++;
}
//負け
if(this.enemyHand === 'ぐー' && myHand ==='ちょき'){
this.result = '負け';
this.loseCount ++;
}
if(this.enemyHand === 'ちょき' && myHand ==='ぱー'){
this.result = '負け';
this.loseCount ++;
}
if(this.enemyHand === 'ぱー' && myHand ==='ぐー'){
this.result = '負け';
this.loseCount ++;
}
}
}
})
コメント
コメントを投稿