Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
HTMLとCSSとJavaScriptを使って数独(ナンバープレイス)を作ってみる - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

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

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

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

スポンサーリンク

概要

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

ゲーム画面を描画する

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

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

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

正解か判定する

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

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

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

モバイルバージョンを終了