HTMLとCSSとJavaScriptを使って数独（ナンバープレイス）を作ってみる

bubudoufu

3年前

このページではソースコードの一部分を簡単な解説をしています。

完成品で遊ぶにはコチラから
完成品のソースコードはgithubにあります

概要
ゲーム画面を描画する
空白のマスに数字を入れる
正解か判定する

概要

数独（ナンバープレイス）で遊べます。全1問。遊び方は数字を入力したい空いているマスをクリックして、下の１～９の入力したい数字をクリックすると数字が入力されます。正解チェックボタンを押すと正解か不正解か表示されます。

ゲーム画面を描画する

// 問題
const question = [
  [8, 7, 1, 0, 0, 0, 5, 6, 4],
  [0, 9, 5, 0, 1, 7, 2, 3, 8],
  [2, 0, 3, 4, 5, 8, 0, 7, 1],
  [0, 2, 0, 1, 0, 3, 7, 9, 5],
  [0, 1, 9, 2, 7, 0, 8, 4, 3],
  [7, 0, 4, 0, 8, 5, 0, 0, 2],
  [1, 5, 0, 0, 0, 4, 3, 8, 0],
  [0, 8, 7, 5, 0, 0, 0, 0, 6],
  [0, 0, 0, 0, 3, 2, 1, 0, 7],
];

// ゲーム画面生成
function init() {
  const main = document.querySelector(".main");
  const select = document.querySelector(".select");
  
  for (let i = 0; i < 9; i++) {
    let tr = document.createElement("tr");
    for (let j = 0; j < 9; j++) {
      let td = document.createElement("td");
      td.onclick = mainClick;
      tr.appendChild(td);
      if (question[i][j] != 0) {
        td.textContent = question[i][j];
        td.classList.add("clickdisable");
      } else {
        td.textContent = null;
        td.classList.add("clickenable");
      }
    }
    main.appendChild(tr);
  }

  for (let i = 0; i < 9; i++) {
    let td = document.createElement("td");
    td.onclick = selectClick;
    td.value = i + 1;
    select.appendChild(td);
    td.textContent = i + 1;
  }
}

// 問題

const question = [

[8, 7, 1, 0, 0, 0, 5, 6, 4],

[0, 9, 5, 0, 1, 7, 2, 3, 8],

[2, 0, 3, 4, 5, 8, 0, 7, 1],

[0, 2, 0, 1, 0, 3, 7, 9, 5],

[0, 1, 9, 2, 7, 0, 8, 4, 3],

[7, 0, 4, 0, 8, 5, 0, 0, 2],

[1, 5, 0, 0, 0, 4, 3, 8, 0],

[0, 8, 7, 5, 0, 0, 0, 0, 6],

[0, 0, 0, 0, 3, 2, 1, 0, 7],

];

// ゲーム画面生成

function init() {

const main = document.querySelector(".main");

const select = document.querySelector(".select");

for (let i = 0; i < 9; i++) {

let tr = document.createElement("tr");

for (let j = 0; j < 9; j++) {

let td = document.createElement("td");

td.onclick = mainClick;

tr.appendChild(td);

if (question[i][j] != 0) {

td.textContent = question[i][j];

td.classList.add("clickdisable");

} else {

td.textContent = null;

td.classList.add("clickenable");

}

main.appendChild(tr);

}

for (let i = 0; i < 9; i++) {

let td = document.createElement("td");

td.onclick = selectClick;

td.value = i + 1;

select.appendChild(td);

td.textContent = i + 1;

}

数独の問題は2次元配列の変数questionに数字が元からある場所には数字を入れ空白のマスには０を入力しています。init関数はゲーム画面を描画する関数です。for文の二重ループを使い９×９のマスをtrタグとtdタグで作ると同時に問題の数値もtextContentプロパティで入れていき、空白のマスにはnullを入れています。数値が元から入っているマスはクリックできなくするためにclassList.addメソッドでクラス属性追加してCSSで制御しています。36行目からのfor文は空いてるマスに入れる数字を選ぶボタンをtdタグで作っています。このボタンにはボタンと同じ数字をvalueプロパティに持たせていて、空白に数字を入れるときはこのvalueプロパティを利用しています。

空白のマスに数字を入れる

// クリックされた要素を保持
let place;

// 問題パネルのマスが押された時の処理
function mainClick(e) {
  if (place != undefined) {
    place.classList.remove("mainClick");
  }

  place = e.target;
  place.classList.add("mainClick");
}

// 数字選択のマスが押された時の処理
function selectClick(e) {
  place.textContent = e.target.value;
}

// クリックされた要素を保持

let place;

// 問題パネルのマスが押された時の処理

function mainClick(e) {

if (place != undefined) {

place.classList.remove("mainClick");

}

place = e.target;

place.classList.add("mainClick");

}

// 数字選択のマスが押された時の処理

function selectClick(e) {

place.textContent = e.target.value;

}

空白のマスをクリックするとmainClick関数が呼び出され、place変数にクリックされた要素が格納されます。数字選択のマスがクリックされるとselectClick関数が呼び出されplace変数のtextContentプロパティに選択された数字ボタンのvalueプロパティを代入しゲーム画面上の空白のマスにも数字が入力されます。

正解か判定する

// 正解判定
function check() {
  const h2 = document.querySelector("h2");
  const tr = document.querySelectorAll(".main tr");
  let checkFlag = true;
  // 横計算
  for (let i = 0; i < 9; i++) {
    let sum = 0;
    let td = tr[i].querySelectorAll("td");
    for (let j = 0; j < 9; j++) {
      sum += Number(td[j].textContent);
    }
    if (sum != 45) {
      checkFlag = false;
      break;
    }
  }
  // 縦計算
  for (let i = 0; i < 9; i++) {
    let sum = 0;
    for (let j = 0; j < 9; j++) {
      let td = tr[j].querySelectorAll("td");
      sum += Number(td[i].textContent);
    }
    if (sum != 45) {
      checkFlag = false;
      break;
    }
  }
  if (checkFlag) {
    h2.textContent = "正解です!!";
  } else {
    h2.textContent = "間違いがあります";
  }
}

// 正解判定

function check() {

const h2 = document.querySelector("h2");

const tr = document.querySelectorAll(".main tr");

let checkFlag = true;

// 横計算

for (let i = 0; i < 9; i++) {

let sum = 0;

let td = tr[i].querySelectorAll("td");

for (let j = 0; j < 9; j++) {

sum += Number(td[j].textContent);

}

if (sum != 45) {

checkFlag = false;

break;

}

// 縦計算

for (let i = 0; i < 9; i++) {

let sum = 0;

for (let j = 0; j < 9; j++) {

let td = tr[j].querySelectorAll("td");

sum += Number(td[i].textContent);

}

if (sum != 45) {

checkFlag = false;

break;

}

if (checkFlag) {

h2.textContent = "正解です!!";

} else {

h2.textContent = "間違いがあります";

}

正解か不正解の判定は横一行ずつ、縦も一列ずつ加算していき、それぞれの行と列の結果が全て45の場合は正解と判定しています。

最後までお読みいただきありがとうございました。

完成品で遊ぶにはコチラから
完成品のソースコードはgithubにあります