frontendmemo

このサイトは、「html、css、js、ruby,ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

Vue.jsで簡単なじゃんけんゲームを作る

スポンサードリンク


スポンサードリンク


Vue.jsでじゃんけんゲームを作りました。

環境構築についてはこちらの記事をどうぞ
www.frontendmemo.xyz

index.html

  <body>
    <div id="app"></div>
    <script src="dist/build.js"></script>
  </body>

App.vue

<template>
  <div id="app">
    <h1>じゃんけんゲーム</h1>
    <!-- 自分の手 -->
    <div>
      じゃんけん、
      <button @click="fight('ぐー')">ぐー</button>
      <button @click="fight('ちょき')">ちょき</button>
      <button @click="fight('ぱー')">ぱー</button>
    </div>
    <!-- 敵の手 -->
    <div style="margin-top: 30px">
      コンピューター<br>{{ enemyHand }}
    </div>
    <h2>結果<br>{{ result }}</h2>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: function() {
         return  {
        hand: ['ぐー', 'ちょき', 'ぱー'],
        enemyHand: '',
        enemyHandImage: '',
        result: 'いざ勝負'
    }
  },
  methods: {
    fight: function (myHand) {
      const index = Math.floor(Math.random() * Math.floor(3));
      this.enemyHand = this.hand[index];
      // 引き分け
      if(myHand === this.enemyHand){
        this.result = '引き分け';
      }

      //勝ち判定
      if(this.enemyHand === 'ぐー' && myHand === 'ぱー'){
        this.result = '勝ち';
      }
      if(this.enemyHand === 'ちょき' && myHand === 'ぐー'){
        this.result = '勝ち';
      }
      if(this.enemyHand === 'ぱー' && myHand === 'ちょき'){
        this.result = '勝ち';
      }

      //負け判定
      if(this.enemyHand === 'ぐー' && myHand === 'ちょき'){
        this.result = '負け';
      }
      if(this.enemyHand === 'ちょき' && myHand === 'ぱー'){
        this.result = '負け';
      }
      if(this.enemyHand === 'ぱー' && myHand === 'ぐー'){
        this.result = '負け';
      }

    }
  }
}
</script>
import Vue from 'vue'
import App from './App.vue'
new Vue({
  el: '#app',
  render: h => h(App)
})

下記動画を参考にしています。とても分かり易いです。
www.youtube.com

初心者からVue.jsを学べるロードマップを作りました!
一緒に学びましょう!
www.frontendmemo.xyz

スラスラわかるHTML&CSSのきほん 第2版

スラスラわかるHTML&CSSのきほん 第2版

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)