JavaScript を使用した数独の完全な実装プロセス

const 数独 = [
  ['.', '.', '.', '4', '.', '.', '.', '3', '.'],
  ['7', '.', '4', '8', '.', '.', '1', '.', '2'],
  ['.', '.', '.', '2', '3', '.', '4', '.', '9'],
  ['.', '4', '.', '5', '.', '9', '.', '8', '.'],
  ['5', '.', '.', '.', '.', '.', '9', '1', '3'],
  ['1', '.', '.', '.', '8', '.', '2', '.', '4'],
  ['.', '.', '.', '.', '.', '.', '3', '4', '5'],
  ['.', '5', '1', '9', '4', '.', '7', '2', '.'],
  ['4', '7', '3', '.', '5', '.', '.', '9', '1'],
]

const 数独 = [……]
// メソッドは、数独のグリッドを見つけるために、行と列の2つのパラメータを受け取ります。 functionsolve(row, col) {
  （列> = 9）の場合{ 
   // 9 列目を超えると、この行は終了し、新しい行を開始する必要があることを意味します col = 0
    行 += 1
    行数 >= 9 の場合
      // 新しい行を開始した後、9行目を超えると、数独全体が完成し、trueを返します
    }
  }
  数独[行][列] !== '.' の場合 {
    // グリッドが埋められている場合は、次のグリッドを埋めます。 returnsolve(row, col + 1)
  }
  // グリッドに1～9の数字を入力してみてください
  (num = 1; num <= 9; num++) の場合 {
    if (!isValid(行、列、数値)) {
      // 無効な番号の場合は、その番号をスキップして続行します
    }
    // 数字を入力する sudoku[row][col] = num.toString()
    // 次のグリッドに入力を続けます if (solve(row, col + 1)) {
      // 最後まですべてが正常であれば、このグリッドの数字は正常です。true を返します。
    }
    // 問題がある場合は、solve は false を返します
    // この場所を補充する必要があることを示します sudoku[row][col] = '.' // 数字を消去します }
  // 1～9 の数字がすべて入力されなかったため、前の数字に問題があることが示されています // FALSE を返し、戻って前の数字を再入力します false を返します
}

const 数独 = [……]
関数 isValid(行、列、数値) {
  // 行が繰り返されているかどうかをチェックする for (let i = 0; i < 9; i++) {
    if (sudoku[行][i] === num) {
      偽を返す
    }
  }
  // 列に重複があるかどうかを確認します for (let i = 0; i < 9; i++) {
    if (sudoku[i][col] === num) {
      偽を返す
    }
  }
  // 9 マスのグリッドが繰り返されるかどうかを判定します const startRow = parseInt(row / 3) * 3
  定数 startCol = parseInt(col / 3) * 3
  (i = startRow; i < startRow + 3; i++) の場合 {
    (j = startCol; j < startCol + 3; j++) の場合 {
      数独[i][j] === numの場合
        偽を返す
      }
    }
  }
  真を返す
}

const 数独 = [
  ['.', '.', '.', '4', '.', '.', '.', '3', '.'],
  ['7', '.', '4', '8', '.', '.', '1', '.', '2'],
  ['.', '.', '.', '2', '3', '.', '4', '.', '9'],
  ['.', '4', '.', '5', '.', '9', '.', '8', '.'],
  ['5', '.', '.', '.', '.', '.', '9', '1', '3'],
  ['1', '.', '.', '.', '8', '.', '2', '.', '4'],
  ['.', '.', '.', '.', '.', '.', '3', '4', '5'],
  ['.', '5', '1', '9', '4', '.', '7', '2', '.'],
  ['4'、'7'、'3'、'.'、'5'、'.'、'.'、'9'、'1']
]
関数 isValid(行、列、数値) {……}
関数は(行、列)を解決します{……}
solve(0, 0) // 最初のグリッドから解く console.log(sudoku) // 結果を出力

npx 作成-React-アプリ 数独
CD 数独

'react' から React をインポートします。
'./App.css' をインポートします。

クラスAppはReact.Componentを拡張します。
  状態 = {
    // 状態 sudoku で数独の 2 次元配列を設定します: [
      ['.', '.', '.', '4', '.', '.', '.', '3', '.'],
      ['7', '.', '4', '8', '.', '.', '1', '.', '2'],
      ['.', '.', '.', '2', '3', '.', '4', '.', '9'],
      ['.', '4', '.', '5', '.', '9', '.', '8', '.'],
      ['5', '.', '.', '.', '.', '.', '9', '1', '3'],
      ['1', '.', '.', '.', '8', '.', '2', '.', '4'],
      ['.', '.', '.', '.', '.', '.', '3', '4', '5'],
      ['.', '5', '1', '9', '4', '.', '7', '2', '.'],
      ['4'、'7'、'3'、'.'、'5'、'.'、'.'、'9'、'1']
    ]
  }

 // TODO: 数独を解くsolveSudoku = async () => {
    const { 数独 } = this.state
  }

  与える（） {
    const { 数独 } = this.state
    戻る （
      <div className="コンテナ">
        <div className="ラッパー">
          2 次元配列を走査し、9 つの正方形のグリッドを生成します*/
          {sudoku.map((リスト、行) => (
            *div.row は数独の行に対応します*/
            <div className="row" キー={`row-${row}`}>
              {list.map((item, col) => (
              */* span は数独の各グリッドに対応します*/
                <span key={`box-${col}`}>{ 項目 !== '.' && 項目 }</span>
              ))}
            </div>
          ))}
          <button onClick={this.solveSudoku}>問題を解き始める</button>
        </div>
      </div>
    );
  }
}

。行 {
  ディスプレイ: フレックス;
  方向: 行;
  /* 行内の要素を中央揃えにする */
  コンテンツの中央揃え: 中央;
  コンテンツの位置を中央揃えにします。
}
.行スパン{
  /*各グリッドの幅と高さは同じです*/
  幅: 30ピクセル;
  最小高さ: 30px;
  行の高さ: 30px;
  テキスト配置: 中央;
  /* 点線の境界線を設定します */
  境界線: 1px 破線 #999;
}

/* 1行目の先頭に境界線を追加します*/
.row:n番目の子(1) span {
  上境界線: 3px 実線 #333;
}
/* 3、6、9行目の下部に境界線を追加します*/
.row:n番目の子(3n) span {
  下部境界線: 3px 実線 #333;
}
/* 最初の列の左側に境界線を追加します*/
.row span:最初の子 {
  左境界線: 3px 実線 #333;
}

/* 3、6、9 列目の右側に境界線を追加します*/
.row span:n番目の子(3n) {
  右境界線: 3px 実線 #333;
}

.row:n番目の子(3n + 1) span {
  上境界線: なし;
}
.row span:n番目の子(3n + 1) {
  左境界線: なし;
}

クラスAppはReact.Componentを拡張します。
  状態 = {
    // 状態 sudoku で数独の 2 次元配列を構成します: [...]
  }

  数独を解く = 非同期 () => {
    const { 数独 } = this.state
    // 入力された数字が有効かどうかを確認します。上記のコードを参照し、ここでは繰り返さない const isValid = (row, col, num) => {
      …
    }
    // 再帰 + バックトラックを使用して問題を解決します constsolve = async (row, col) => {
      （列> = 9）の場合{ 
        列 = 0
        行 += 1
        行 >= 9 の場合、true を返す
      }
      数独[行][列] !== '.' の場合 {
        戻り値:solve(行, 列 + 1)
      }
      (num = 1; num <= 9; num++) の場合 {
        if (!isValid(行、列、数値)) {
          続く
        }
 
        数独[行][列] = num.toString()
        this.setState({ sudoku }) // グリッドに入力したら、状態に同期する必要があります

        if (solve(行, 列 + 1)) {
          真を返す
        }

        数独[行][列] = '.'
        this.setState({ sudoku }) // グリッドに入力したら、状態に同期する必要があります
      }
      偽を返す
    }
    // 問題を解くsolve(0, 0)
  }

  与える（） {
    const { 数独 } = this.state
    戻る （……）
  }
}

関数solve(行,列) {
   …
   数独[行][列] = num.toString()
+ this.setState({ 数独 })
  …
   数独[行][列] = '.'
+ this.setState({ sudoku }) // グリッドに入力したら、状態に同期する必要があります
}

数独を解く = 非同期 () => {
  const { 数独 } = this.state
  // 入力された数字が有効かどうかを確認します。上記のコードを参照し、ここでは繰り返さない const isValid = (row, col, num) => {
    …
  }
  // イベントフローから外れてsetStateを呼び出す
  const setSudoku = async (行、列、値) => {
    数独[行][列] = 値
    新しいPromiseを返します(resolve => {
      タイムアウトを設定する(() => {
        this.setState({
          数独
        }, () => 解決())
      })
    })
  }
  // 再帰 + バックトラックを使用して問題を解決します constsolve = async (row, col) => {
    …
    (num = 1; num <= 9; num++) の場合 {
      if (!isValid(行、列、数値)) {
        続く
      }

   setSudoku(行、列、num.toString()) を待機します。

      if (awaitsolve(row, col + 1)) {
        真を返す
      }

   setSudoku(行、列、'.') を待機します。
    }
    偽を返す
  }
  // 問題を解くsolve(0, 0)
}