Vue3で○×ゲームを作る③

2021年 09月 22日

タグ：

親コンポーネントで勝敗判定を行うための配列を用意し、更新する。

子コンポーネントから必要な情報を貰えたので、残りは親コンポーネントで勝敗判定をします。

やることは JavaScript で勝敗判定をするときとほぼ同じです。

まず、○× の情報を保存する 0 で埋まった配列statesを作ります。

Array(9).fill(0) は [0,0,0,0,0,0,0,0,0] と同じ意味です。

さらにdoCountUp内で、states を更新するようにします。

App.vue

// 略

import Masu from './components/Masu.vue';

export default {
  name: 'App',
  data() {
    return {
      count: 0,
      states: Array(9).fill(0),
      message: '',
    };
  },
  methods: {
    doCountUp(clickNumber, masu) {
      this.count += 1;
      // clickNumberは1~9までなので、１減らして配列に当てはめる
      this.states[clickNumber - 1] = masu;
    },
  },
};

勝敗判定のための配列を作る

勝敗を判定するために縦横斜めの 3+3+2 の８パターンの配列が必要です。

現在のstatesを受け取って、8 パターンの配列を返すメソッドmakeArraysを作ります。

array.filter() は、条件判定が true のものを抽出して新しい配列を返すメソッドです。
filter の第二引数は、その要素の配列内でのインデックス（順番）を返します。

array.slice()は、指定したインデックスの範囲を抽出して新しい配列を返すメソッドです。

App.vue


//略

methods: {
  makeArrays(array){
    // 縦の配列
    const columnA = array.filter((n,index) => index % 3 === 0)
    const columnB = array.filter((n,index) => index % 3 === 1)
    const columnC = array.filter((n,index) => index % 3 === 2)

    // 横の配列
    const rowA = array.slice(0,3)
    const rowB = array.slice(3,6)
    const rowC = array.slice(6,9)

    // 斜めの配列
    const diagonalA = [array[0],array[4],array[8]]
    const diagonalB = [array[2],array[4],array[6]]

    // 8個の配列を持った配列として返す
    return [columnA,columnB,columnC,rowA,rowB,rowC,diagonalA,diagonalB]
  },
  doCountUp(clickNumber, masu) {
    this.count += 1;
    // clickNumberは1~9までなので、１減らして配列に当てはめる
    this.states[clickNumber - 1] = masu;

    const checkArrays = this.makeArrays(this.states)

  },
},

勝敗判定をするメソッドを作り適用させる。

勝敗を判定するために縦横斜めの 3+3+2 の８パターンの配列が必要です。

data() 内に変数message を作り、それを template内で表示させます。

勝敗の判定を行うメソッドcheckWin()では、勝負がついたらmessageを変更させます。

array.every() は、配列内の条件判定が全て true なら true を返すメソッドです。

map()は、引数に指定したコールバック関数を各配列に作用させることができるメソッドです。

App.vue

<template>
  <div>
    <div class="board">
      <Masu
        v-bind:count="count"
        v-for="n of 9"
        v-bind:key="n"
        v-bind:number="n"
        v-on:count-event="doCountUp"
      />
    </div>
    <p class="message">{{ message }}</p>
  </div>
</template>

<script>
import Masu from "./components/Masu.vue";

export default {
  name: "App",
  data() {
    return {
      count: 0,
      states : Array(9).fill(0),
      message: "",
    };
  },
  components: {
    Masu,
  },

  methods: {
    makeArrays(array){
      // 略
    },

    checkWin(array){
      if(array.every(n=>n === "◯")){
        this.message = "Aの勝ち！"
      } else if (array.every(n=>n === "×")){
        this.message = "Bの勝ち！"
      }
    },
    doCountUp(clickNumber, masu) {
      this.count += 1;
      // clickNumberは1~9までなので、１減らして配列に当てはめる
      this.states[clickNumber - 1] = masu;

      const checkArrays = this.makeArrays(this.states)
      checkArrays.map((array)=>this.checkWin(array))
    },
  },
};

</script>

・勝敗判定がついたらゲームをストップする

・引き分けを判定する

などの機能が未完ですが、○×ゲームの基本的な機能はこれで実現することができました。