このページではソースコードの一部分を簡単な解説をしています。
完成品で遊ぶにはコチラから
完成品のソースコードはgithubにあります
概要
数独（ナンバープレイス）で遊べます。全1問。遊び方は数字を入力したい空いているマスをクリックして、下の１～９の入力したい数字をクリックすると数字が入力されます。正解チェックボタンを押すと正解か不正解か表示されます。
ゲーム画面を描画する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// 問題 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プロパティを利用しています。
空白のマスに数字を入れる
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// クリックされた要素を保持 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プロパティを代入しゲーム画面上の空白のマスにも数字が入力されます。
正解か判定する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
// 正解判定 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にあります
