こんにちは、パキラです
前回で勝敗を判定するプログラミングをしました
今回は勝敗が決した後に、マークの付いていない空のマス目にマークを入れないプログラミングとリセットボタンを押したときにマス目がリセットされるプログラミングをします
○×ゲームとしてのプログラミングはこれで最後になります
ゲーム実行中のフラグ
まず○×ゲームが実行中か判断するために、フラグを立てておきます
let isGame = true;このisGameという変数にtrueを代入しておき、もしfalseが代入されたら、クリックをしてもマークされないようにします
ゲームの終了時というのは、勝敗が決したときなので
//勝敗の結果を表示させる
function displayResult(message){
$("display").innerHTML = message;
isGame = false;
}勝敗を表示させる関数の中でisGameにfalseを代入します
これで勝敗が決したときに、結果が表示されるとゲーム実行中のフラグがfalseになる
次にクリックしたときの関数に、フラグがfalseになったときの処理をいれる
//ゲーム実行中でなければ何もせずに終了
if(!isGame){
return;
}これはif文でisGameがfalseだったときreturnを返すという処理です
isGameに！が付くことによって、isGameがtrueでなかったら(つまりfalseだったら)、そこで処理が終わりになります
これで勝敗が決した後に、空のマス目をクリックしてもマークが付かないようになりました
リセット
次にリセットボタンを押したときに、すべてのマス目が空になり最初に戻るようにします
<input type="button" id="reset" value="もう一度遊ぶ"></input>HTMLのもう一度遊ぶボタンにid属性でresetを設定しておきます
続いて、このもう一度遊ぶボタンを押されたときの処理です
function resetAction(){
//ターンを1に戻す
count = 1;
changeDisplayCount();
//ターン表示を切り替える
for(let row=0; row < 3; row++){
for(let col=0; col < 3; col++){
$(IDS[row][col]).value="";
}
}
//結果の表示をリセットする
displayResult("");
//ゲームを実行中に戻す
isGame=true;もう一度遊ぶボタンが押されたときは、４つの処理をします
①ターンを1に戻す
②ターン表示を切り替える
③結果の表示をリセットする
④ゲームを実行中に戻す
以上の処理をします
次にこの処理を画面を読み込んだときの処理に組み込みます
$("reset").onclick = resetAction;これでもう一度遊ぶボタンがクリックされたときにresetActionが実行されるようになりました
ではここまでの〇✖ゲームのプログラミングが終了となります
実際に実行してみます
まずはHTMLのコードです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>○✖ゲーム</title>
<style>body{
font-size:30px;
text-align:center;
}
input{
font-size:30px;
}
.block{
width:3rem;
height:3rem;
margin:4px;
vertical-align:middle;
margin-bottom:0.5rem;
}
input[value="○"]{
color:#ff0000;
}
input[value="✖"]{
color:#0000ff;
}
.item1{justify-content: center;
display:flex;
}
.item2{justify-content: center;
display:flex;
}
.item3{justify-content: center;
display:flex;
}</style>
<script src="main.js" defer></script>
</head>
<body>
<h1>○✖ゲーム</h1>
<div>
<p id="display">○の番です !</p>
</div>
<div class="box">
<div class="item1">
<input id="b1" class="block" type="button" ></input>
<input id="b2" class="block" type="button" ></input>
<input id="b3"class="block" type="button"></input>
</div>
<div class="item2">
<input id="b4"class="block" type="button"></input>
<input id="b5"class="block" type="button"></input>
<input id="b6"class="block" type="button"></input>
</div>
<div class="item3">
<input id="b7"class="block" type="button"></input>
<input id="b8"class="block" type="button"></input>
<input id="b9"class="block" type="button"></input>
</div>
</div>
<div>
<p id="displayResult"></p>
<input type="button" id="reset" value="もう一度遊ぶ"></input>
</div>
</body>
</html>続いてJavaScriptのコードです
//先攻のマーク
const FIRST_MARK = "○";
//後攻のマーク
const SECOND_MARK = "✖";
//ターン数
let count = 1;
//マス目のIDリスト
const IDS = [
['b1','b2','b3'],
['b4','b5','b6'],
['b7','b8','b9']
];
//ゲーム実行中のフラグ
let isGame = true;
//ID取得する関数
function $(id){
return document.getElementById(id);
}
//先攻のターンか判定する
function isFirstMove(){
let isFirst = count % 2;
return isFirst == 1;
}
//勝敗の結果を表示させる
function displayResult(message){
$("displayResult").innerHTML = message;
isGame = false;
}
//ターン表示を切り替える
function changeDisplayCount(){
if(isFirstMove()){
//先攻のターンの場合
$("display").innerHTML = FIRST_MARK + 'の番です！';
}else{
//後攻のターンの場合
$("display").innerHTML = SECOND_MARK + 'の番です！';
}
}
//クリックされたときの処理
function clickAction(event){
//ゲーム実行中でなければ何もせず終了
if(!isGame){
return;
}
//イベントからクリックされたマス目のIDを取得する
let id = event.target.id;
//IDからオブジェクトを取得する
let object = $(id);
//既にマークが設定されている場合はスキップ
if(object.value !=""){
return;
}
//オブジェクト(マス目)にマークを設定する
if(isFirstMove()){
object.value = FIRST_MARK;
}
else{
object.value = SECOND_MARK;
}
//ゲーム終了
if(judgEnd()){
return;
}
//ターンを+1する
count +=1;
//ターン表示を切り替える
changeDisplayCount();
}
//もう一度遊ぶボタンが押されたときの処理
function resetAction(){
//ターンを1に戻す
count = 1;
changeDisplayCount();
//ターン表示を切り替える
for(let row=0; row < 3; row++){
for(let col=0; col < 3; col++){
$(IDS[row][col]).value="";
}
}
//結果の表示をリセットする
displayResult("");
//ゲームを実行中に戻す
isGame=true;
}
//勝敗を判定する処理
function judgEnd(){
let isEnd = false;
//横３マスが同じマーク
for(let row=0; row<3; row++){
//勝敗を判定
isEnd = isWin(IDS[row][0],IDS[row][1],IDS[row][2]);
if(isEnd){
displayResult($(IDS[row][0]).value + "の勝ち！");
return true;
}
}
//縦３マスが同じマーク
for(let col=0; col<3; col++){
//勝敗を判定
isEnd = isWin(IDS[0][col],IDS[1][col],IDS[2][col]);
if(isEnd){
displayResult($(IDS[0][col]).value + "の勝ち！");
return true;
}
}
//斜め(右下がり)３マスが同じマーク
isEnd = isWin(IDS[0][0],IDS[1][1],IDS[2][2]);
if(isEnd){
displayResult($(IDS[0][0]).value + "の勝ち！");
return true;
}
//斜め(左下がり)３マスが同じマーク
isEnd = isWin(IDS[0][2],IDS[1][1],IDS[2][0]);
if(isEnd){
displayResult($(IDS[0][2]).value + "の勝ち！");
return true;
}
//引き分けの判定
if(9<=count){
displayResult("引き分け！");
return true;
}
//ゲーム続行
return false;
}
//勝利を判定する
function isWin(firstId,secondId,thirdId){
//1つ目のマス目が空の場合は終了
if($(firstId).value==""){
return false;
}
//2つ目のマス目が空の場合は終了
if($(secondId).value==""){
return false;
}
//3つ目のマス目が空の場合は終了
if($(thirdId).value==""){
return false;
}
//３つのマス目が同じマークである場合は勝利
if(
($(firstId).value == $(secondId).value) && ($(secondId).value == $(thirdId).value)
){
return true;
}
//３つのマス目が同じマークじゃないとき勝利ではない
return false;
}
//画面を読み込んだときの処理
function onloadAction(){
//マス目にイベントを設定する
for (let row = 0; row < 3; row++){
for(let col = 0; col < 3; col++){
$(IDS[row][col]).onclick = clickAction;
}
}
//もう一度遊ぶボタンにイベントを設定する
$("reset").onclick = resetAction;
}
//画面読み込み時のイベントを設定
window.onload = onloadAction;○✖ゲーム
○の番です！
【初心者向け】ブログの始め方完全ガイド！立ち上げから収入を得る方法まで 
まとめ
ここまで読んで頂いて、本当にありがとうございました
なんとか〇✖ゲームのプログラミングが理解できました
最初は『OASYS Technologies』さんのyoutubeの動画を拝見しながらコードを模写しただけで理解することができませんでした
しかしブログを書く事により、徐々に理解できるようになりました
一つ一つのコードを理解しないと説明ができませんし、ブログ内〇✖ゲームを実行するために四苦八苦しました
そのため始めた当初より、理解が深まったと思います
その分時間は掛かりますが、自分の為になっていると思います
全くの未経験者が、1からのスタートで、かつ独学で、youtubeなどの動画コンテンツで勉強しながらのブログなので大変スローペースで申し訳ないです
ここまでおよそ１年かかりました
これからも自分のペースで無理をしないように長くプログラミングをしていきたいと思います
ありがとうございました
コメント