表示用メソッドの作成 (KATAMINOを解くプログラムを作成する)

★前回の記事

yucatio.hatenablog.com

ここまでコンソールに表示してきましたが、仕上げとして画面に表示してみましょう。

実装

js/display.jsというファイルに表示用関数をまとめることにします。ファイルを作成して以下の内容を書いておきます。

const display = {
  show : (kataminoField) => {
    // TODO 実装
  },
}

index.htmlを変更します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>KATAMINO SOLVER</title>
  </head>
  <body>   
    <script src="js/util.js"></script>
    <script src="js/katamino-arr.js"></script>
    <script src="js/display.js"></script>  <!-- 追加 -->
    <script src="js/solver.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

今回は簡単に表示するので、kataminoFieldをテーブル形式で表示します。各マスのピースIDを表示してみましょう。

js/display.js

const display = {
  show : (kataminoField) => {
    let table = document.createElement("table")

    kataminoField.forEach((fieldRow) => {
      tableRow = table.insertRow(-1)
      fieldRow.forEach((val) => {
        cell = tableRow.insertCell(-1)
        cell.appendChild(document.createTextNode(val))
      })
    })

    document.body.appendChild(table)
  },
}

KATAMINOが解けたときにnextFieldを表示します。

js/solver.js

const solver = {
    // 中略

  solve : () => {
    while (solver.solverStack.length > 0) {
      // 中略

      if (nextUnPlaced.length <= 0) {
        console.log("完成")
        display.show(nextField)  // 追加
        break
      }

      // 中略
    }
  },
  // 中略
}