使用VUE实现的数独游戏

写在前面

数独游戏是个很有意思的数学游戏，实现一个数独游戏对自己的思维逻辑也有那么一点挑战，所以用VUE实现了一个。如果你喜欢这个游戏,，这是完整代码Github地址，下载下来可以直接玩；如果你也想自己做一个数独游戏，那么我可以把我的思路分享给你。

详细思路

1. 解析数独规则
   数独的结构是个9x9的九宫格布局，每个九宫格内是不重复的1-9数字，然后每行每列都是不重复的1-9数字，规则不算复杂
   
   DOM结构

	<div class="sudoku_area" :class="{
    'sudoku_start': gamestart}">
      <div class="sudoku_row" v-for="(row, index) in rowList" :key="index">
        <div class="sudoku_cell" v-for="(value, cellIndex) in row" :key="cellIndex">
          <input>
        </div>
      </div>
    </div>

结构简单明了，使用flex布局实现

2. 游戏逻辑
   想要实现一个数独游戏，本质上就是随机生成一个符合数独规则的9x9的表格，然后随机对里面一些数字进行隐藏让玩家填写，游戏难度可以通过隐藏的数量或者游戏时长限制来实现，此处最大的问题在于如何生成一个符合数独规则的数据。

3. 生成一个符合数独规则的数列
   i. 确定数据的格式
   我在网上看别人的例子有的人会采用以坐标为key的对象来保存数据，也有以单个九宫格内数据为一个数组的二维数组的模式，我最初的思路是以每行或者每列数据为一个数组的二维数组实现，但是后来还是采用了以九宫格为单位的二维数组为格式，具体原因下面会说到
   ii. 初始化数独中特殊位置三个九宫格的数据
   
   上面就是数独的九个九宫格，其中0、4、8或者2、4、6是比较特别的，因为这三个行列之间互不关联，（这也是我采用九宫格数组形式的原因，其实行列数组也行，就是采用行列数组的话这一段写起来不太简洁，就放弃了）所以可以优先生成这三个九宫格的数据，生成方式也很简单就是给1-9的数组进行随机排列就行

getKeyBlock () {
    // 0，4，8关键九宫格块使用随机排序生成
  const indexArr = [0, 4, 8]
  for (let i = 0; i < indexArr.length; i++) {
   
     const index = indexArr[i]
     const row = [1, 2, 3, 4, 5, 6, 7, 8, 9]
     this.rowList[index] = row.sort(() => Math.random() > 0.5 ? -1 : 1)
  }
}

我这里采用的是0、4、8三个，你想用2、4、6也没问题。有了这三个九宫格其他九宫格的数据生成也就有了约束规则，所以下面重点来了
iii. 其他九宫格的数据生成
先贴我的代码再详细解释一番

	getOtherBlock (colIndexArr, rowIndexArr, index) {
    // 其余位置九宫格块生成，传入同行已生成的九宫格的数组下标、同列已生成的九宫格下标与当前九宫格下标
      const rowList = []
      const colList = []
      const row = [1, 2, 3, 4, 5, 6, 7, 8, 9]
      for (let i = 0; i < rowIndexArr.length; i++) {
    // 按照列把同列九宫格数据拆成二维数组用来判断重复
        const rowArr = this.rowList[rowIndexArr[i]]
        rowList[i] = [[rowArr[0], rowArr[3], rowArr[6]], [rowArr[1], rowArr[4], rowArr[7]], [rowArr[2], rowArr[