vue.js 五子棋

<template>
  <div class="home">
    <table border="1" align="center">
      <tr v-for="(item1, index1) in arr" :key="index1">
        <td
          v-for="(item2, index2) in item1"
          :key="index2"
          class="box"
          :id="index1 + '_' + index2"
          @click="selectedchess"
        >
          <span v-if="arr[index1][index2] == 'O'" :class="{ red: true }">
            {{ arr[index1][index2] }}
          </span>
          <span v-else :class="{ green: true }">{{ arr[index1][index2] }}</span>
        </td>
      </tr>
    </table>
    <h1>落子中：{{ curr }}</h1>
    <span>{{ count }}步</span><br />
    <button @click="reset">重置</button><br />
    <input type="text" size="1" v-model="row" @blur="reset" />
    x
    <input type="text" size="1" v-model="col" @blur="reset" />
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      row: 6,
      col: 6,
      status: false,
      arr: [[]],
      count: 0,
    };
  },
  created: function () {
    for (let i = 0; i < this.row; i++) {
      this.arr[i] = [];
      for (let j = 0; j < this.col; j++) {
        this.arr[i][j] = "";
      }
    }
  },
  computed: {
    curr: function () {
      return this.status ? "X" : "O";
    },
  },
  methods: {
    selectedchess(event) {
      if (event.target.id != "" && event.target.id != null) {
        let value = event.target.id.split("_");
        this.arr[value[0]][value[1]] = this.curr;
        this.status = !this.status;
        ++this.count;
        // let k = new Promise((resolve) => {
        //   this.referee(value);
        // });
        this.referee(value);
      }

      // let temparr = this.arr[value[0]];
      // temparr[value[1]] = this.curr;
      // this.arr.splice(value[0], 1, temparr);
    },
    reset() {
      this.arr = new Array(this.row);
      for (let i = 0; i < this.row; i++) {
        this.arr[i] = new Array(this.col);
        for (let j = 0; j < this.col; j++) {
          this.arr[i][j] = "";
        }
      }

      this.status = false;
      this.count = 0;
      // this.$forceUpdate();
    },
    referee(coordinate) {
      let x = coordinate[0];
      let y = coordinate[1];
      let value = this.arr[x][y];
      let win = 0;

      // 横向判定
      let xtemp = this.arr[x];
      for (let i = 0; i < xtemp.length; i++) {
        if (win < 5) {
          if (xtemp[i] === value) {
            ++win;
          } else {
            win = 0;
          }
        }
      }

      if (win == 5) {
        alert(value + " win");
        this.reset();
        return;
      } else {
        win = 0;
      }

      // 纵向判定
      let ytemp = [];
      for (let i = 0; i < this.arr.length; i++) {
        ytemp.push(this.arr[i][y]);
      }
      for (let i = 0; i < ytemp.length; i++) {
        if (win < 5) {
          if (ytemp[i] === value) {
            ++win;
          } else {
            win = 0;
          }
        }
      }

      if (win == 5) {
        alert(value + " win");
        this.reset();
        return;
      } else {
        win = 0;
      }

      //正斜方向
      let foblique = [];
      let startx, starty;
      startx = x;
      starty = y;

      for (; startx != 0 && starty != 0; startx--, starty--) {}

      for (
        ;
        startx <= this.row - 1 && starty <= this.col - 1;
        startx++, starty++
      ) {
        foblique.push(this.arr[startx][starty]);
      }

      for (let i = 0; i < foblique.length; i++) {
        if (win < 5) {
          if (foblique[i] === value) {
            ++win;
          } else {
            win = 0;
          }
        }
      }

      if (win == 5) {
        alert(value + " win");
        this.reset();
        return;
      } else {
        win = 0;
      }

      //反斜方向
      let backslash = [];
      startx = x;
      starty = y;

      for (; startx != this.row - 1 && starty != 0; startx++, starty--) {}

      for (; startx >= 0 && starty <= this.col - 1; startx--, starty++) {
        backslash.push(this.arr[startx][starty]);
      }

      for (let i = 0; i < backslash.length; i++) {
        if (win < 5) {
          if (backslash[i] === value) {
            ++win;
          } else {
            win = 0;
          }
        }
      }

      if (win == 5) {
        alert(value + " win");
        this.reset();
        return;
      } else {
        win = 0;
      }
    },
  },
};
</script>
<style>
.box {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 30px;
}
.red {
  color: red;
}
.green {
  color: green;
}
</style>