Vue的康威游戏GameOfLife v0.5

<template>

  <Layout>

    <Form>

      <!--<FormItem>

        <Input v-model="rank" placehole="请输入棋盘大小" style="width:120px;" />

        <Button type="primary" >ok</Button>

      </FormItem>-->

      <FormItem>

        <p>Custom column styles:{{times}}

          <Button type="primary" @click="init">Replay</Button>

        </p>

      </FormItem>

    <Card style="background-color: #081e43;border-color: #1b468b;">

      <ul>

        <li v-for="index1 of rank" :key="index1">

          <div style="display:inline-block;"  v-for="index2 of rank" :key="index2"

            v-bind:class="array_val[(index1-1)*rank+(index2-1)] == 1 ? 'alive' : 'dead'" @click="change((index1-1),(index2-1))">

            {{array_val[(index1-1)*rank+(index2-1)]}}

          </div>

        </li>

      </ul>

    </Card>

    </Form>

  </Layout>

</template>

<style>

    .dead {

      padding: 20px;

      margin: 5px;

      border: 1px solid Gray;

        text-align: center;

        background-color: #fff;

        color: #000;

    }

    .alive {

      padding: 20px;

      margin: 5px;

      border: 1px solid Gray;

        text-align: center;

        background-color: #000;

        color: #fff;

    }

</style>

<script>

export default {

  data () {

    return {

      rank: 8,

      timer: '',

      times: 0,

      array_val: []

    }

  },

  computed: {

    total: function () {

      return this.rank * this.rank

    }

  },

  methods: {

    game () {

      let tempArr = []

      let num = this.rank

      function stack (number, beg, end) {

        var arr = []

        arr.push(number)

        if (number > beg)arr.push(number - 1)

        if (number < end)arr.push(number + 1)

        return arr

      }

      function scalarArrayEquals (array1, array2) {

        return array1.length == array2.length && array1.every(function (v, i) { return v === array2[i] })

      }

      for (var i = 0; i < num; i++) {

        for (var j = 0; j < num; j++) {

          let alivecount = 0

          var iArr = stack(i, 0, num - 1)

          var jArr = stack(j, 0, num - 1)

          iArr.forEach(m => {

            jArr.forEach(n => {

              if (this.array_val[num * m + n] > 0)alivecount++

            })

          })

          if (alivecount > 3 || alivecount < 2) tempArr[num * i + j] = 0

          else if (alivecount == 3) tempArr[num * i + j] = this.array_val[num * i + j]

          else tempArr[num * i + j] = 1

        }

      }

      if (scalarArrayEquals(this.array_val, tempArr)) {

        clearInterval(this.timer)

        alert("The game has Done")

      }

      this.array_val = tempArr

    },

    change (r, c) {

      let index = this.rank * r + c

      this.array_val[index] = this.array_val[index] == 1 ? 0 : 1

      console.log("change", index, this.array_val[index])

    },

    play () {

      this.game()

      this.times++

    },

    init () {

      this.array_val = []

      for (var i = 0; i < this.rank * this.rank; i++) {

        this.array_val[i] = Math.round(Math.random())

      }

      this.times = 0

      clearInterval(this.timer)

      this.timer = setInterval(this.play, 1800)

    }

  },

  mounted () {

    this.init()

  },

  beforeDestroy () {

    clearInterval(this.timer)

  }

}

</script>