ナンプレゲームのロジックはほぼ全て入れ込んだので、最後に気になる機能や見た目などを整えたいと思います。
ソースコード
[一部追加] index.html
※.buttonsの中に以下を追加
<button id='NumberPlace_NewGame'>New Game</button>
[全部更新] css/buttons.css
#NumberPlace .buttons{
width : calc(var(--size-stage) + 2px);
/* height:40px; */
display:flex;
gap:5px;
}
button#btn,
button#NumberPlace_NewGame{
width:100%;
height:100%;
padding:10px;
border:2px solid var(--color-border-2);
display:block;
margin:0;
margin-bottom:5px;
background-color:#ddd;
border-radius:4px;
cursor:pointer;
}
button#btn:hover,
button#NumberPlace_NewGame:hover{
background-color:#eee;
}
button#btn:active,
button#NumberPlace_NewGame:active{
background-color:#fee;
border-color:#FAA;
color:#FAA;
}
button#btn[data-status='start']{
border-color:#88f;
background-color:#ddf;
}
button#btn[data-status='next']{
border-color:#f88;
background-color:#fdd;
}
button#btn[data-status='check']{
border-color:#fa8;
background-color:#ffd;
}
button#btn[data-status='start']::before{
content : 'Start';
}
button#btn[data-status='check']::before{
content : 'Check';
}
button#btn[data-status='next']::before{
content : 'Next';
}
button#btn[data-status='disabled']{
pointer-events:none;
background-color:#bbb;
color:#ddd;
}
#NumberPlace:has(button#btn[data-status='start']) button#NumberPlace_NewGame{
display:none
}
#NumberPlace[data-status='history-view'] button#btn{
display:none;
}
解説・ポイント
チェックボタンと、Newボタンを分けてみました。
ゲーム途中で、もう一回最初からやり直したい時に、チェックボタンしかないと、エラーしか出ないので、Newは、プレイしている最新面の問題をプレーンに表示する機能にしています。
リンクで履歴をクリックした場合に、最新面に戻したい時にも使えるので、Newボタンにしてみました。
今やっている面をclearするボタンにするというのも便利だと思うので、ここからは、自信で便利だと思うボタンを追加して機能追加してみましょう。
ボタンアクションの考え方
webブラウザゲームでは、ボタンやリンクをクリックしてそのイベントによって処理を実行するというのは、次のような手順で行います。
【クリックイベントに対する処理】
1. 【抽出】 イベントを発生させたい要素（エレメント）をquerySelector()する。
2. 【設置】 addEventListener()を使って、イベントの種類、処理を実行する関数（または実行コード）を設置する。
3. 【処理】 イベントが発動した時に、必要であれば、値を受け取って処理を実行する。
自由にイベント処理が設置できるようになったら、webページにおけるゲーム以外でもホームページ作成も思ったことができるようになるでしょう。
github
今回のシリーズのプログラミングコードを、githubで掲載しています。
https://github.com/yugeta/number_place
ただし、古いコードに追加しているので、ブランチはmasterやmainではなく、ver2で登録しています。
cloneしたい場合は、以下のコードでどうぞ。
git clone https://github.com/yugeta/number_place.git ver2
※gitプロトコルでcloneしたい場合は、適宜変更してコマンドを実行して下さい。
GoogleBlogger
今回のナンプレゲームを作る工程は、読んでいるブログに特集ページを作っておきました。
[ブラウザゲームの作り方] Number-Place（数独）
Podcast
音声で解説を聞きながら、学習することができるように、Podcase番組で収録を予定しています。
https://www.hackman.site/
2023年６月ぐらいからの配信予定なので、リアルタイムにこのブログを見ている人は、楽しみにお待ち下さい。
※Podcast番組「Hackmanラジオ」では、全ての講座シリーズを、Amazonの電子書籍にて販売も行っています。
最後に
インターネットブラウザで手軽に遊べるパズルゲームを自分で作ることができたら・・・
と考えたら、あなたならどんなゲームを作ってみたいですか？
個人的には、インターネットブラウザは、世の中で一番普及しているプラットフォームなので、手軽に遊べるゲームなどを便利に公開できて、スマホでもパソコンでも何の設定もいらずにアクセスできる、無敵のプラットフォームだと思っています。
そんなプラットフォームを使って、脳トレから、暇つぶしゲームなど、中には3Dを使ったリッチなアドベンチャーゲーム、ファミコンゲームなんかが遊べるようになると、もはや宝箱のように感じませんか？
今後もそんなブラウザゲームのシリーズを増やしていく予定なので、リックエストなどあれば、メッセージを送ってくださいませ。
