Vue 入门：2048

前言

最近在入门 VueJS ,就顺便把上次从家坐大巴去无锡时，为了转移注意力克服晕车想的 2048 思路给实现了。但 2048 一下子就想完了，车程却有 4 个多小时，后来我就开始想毕业，想错过的班级合照，想 406 的倒霉蛋们……扯远了，但前言不就是这些有的没的。

如下

<template>
  <a-layout style="width: 200px">
    <a-input v-model="size"></a-input>
    <a-row v-for="(d, i) in data" :key="i">
      <a-col :span="6" v-for="(i, idx) in d" :key="idx" style="background: #ffaa55; text-align: center; cursor: default">
        {{ i }}
      </a-col>
    </a-row>
    <a-button-group>
      <a-button @click="react('left')"><a-icon type="left"></a-icon></a-button>
      <a-button @click="react('right')"><a-icon type="right"></a-icon></a-button>
      <a-button @click="react('up')"><a-icon type="up"></a-icon></a-button>
      <a-button @click="react('down')"><a-icon type="down"></a-icon></a-button>
    </a-button-group>
  </a-layout>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Watch } from 'vue-property-decorator'

@Component
export default class extends Vue {
  size = 4
  data: number[][] = []

  @Watch('size')
  init() {
    this.data = []
    for (let row = 0; row < this.size; row++) {
      const rowArr = []
      for (let col = 0; col < this.size; col++) {
        rowArr.push(0)
      }
      this.data.push(rowArr)
    }
    this.add()
  }

  add() {
    const [row, col] = [Math.floor(Math.random() * this.size), Math.floor(Math.random() * this.size)]
    const data = [...this.data]
    if (data[row][col]) this.add()
    else {
      data[row][col] = Math.random() > 0.5 ? 2 : 4
      this.data = [...data]
    }
  }

  move(rowArr: number[]) {
    const validArr = rowArr.filter((a) => a !== 0)
    rowArr.forEach((_, i) => (validArr[i] && (rowArr[i] = validArr[i])) || (rowArr[i] = 0))
  }

  merge(rowArr: number[]) {
    rowArr.forEach((r, i) => {
      if (i + 1 < rowArr.length && r === rowArr[i + 1] && r !== 0) {
        rowArr[i] *= 2
        rowArr[i + 1] = 0
        this.merge([...rowArr])
        return
      }
    })
  }

  act(rowArr: number[]) {
    this.move(rowArr)
    this.merge(rowArr)
    if (JSON.stringify(rowArr) !== JSON.stringify(rowArr)) {
      this.move(rowArr)
    }
  }

  react(direction: string) {
    this.update(direction)
    this.add()
  }

  update(direction: string) {
    let rowArr
    const data = [...this.data]
    for (let row = 0; row < this.size; row++) {
      switch (direction) {
        case 'left':
          this.act(data[row])
          break
        case 'right':
          this.act(data[row].reverse())
          data[row].reverse()
          break
        case 'up':
          rowArr = []
          for (let i = 0; i < this.size; i++) {
            rowArr.push(data[i][row])
          }
          this.act(rowArr)
          for (let i = 0; i < this.size; i++) {
            data[i][row] = rowArr[i]
          }
          break
        case 'down':
          rowArr = []
          for (let i = this.size - 1; i >= 0; i--) {
            rowArr.push(data[i][row])
          }
          this.act(rowArr)
          for (let i = 0; i < this.size; i++) {
            data[i][row] = rowArr[this.size - i - 1]
          }
          break
        default:
          break
      }
    }

    this.data = [...data]
  }

  created() {
    this.init()
  }
}
</script>

掉落

• 引起视图中 data 的更新，需要（或者关系）：

  • 1.改变对象的引用（push,pop,shift,unshift,splice,sort,reverse）

  • 2.Vue 的 set 方法

后语

就这。