こんにちは、パキラです
前回クリックする毎に〇✖を切り替えるプログラミングをしました
今回はターン表示を切り替えるようにします
次に既にマークがついているマス目をクリックしても動作しないようにプログラミングをします
次の記事その⑥
まずは前回のJavaScriptです
//先攻のマーク
const FIRST_MARK = "○";
//後攻のマーク
const SECOND_MARK = "✖";
//ターン数
let count = 1;
//ID取得する関数
function $(id){
return document.getElementById(id);
}
//先攻のターンか判定する
function isFirstMove(){
let isFirst = count % 2;
return isFirst == 1;
}
//クリックされたときの処理
function clickAction(event){
//イベントからクリックされたマス目のIDを取得する
let id = event.target.id;
//IDからオブジェクトを取得する
let object = $(id);
//オブジェクト(マス目)にマークを設定する
if(isFirstMove()){
object.value = FIRST_MARK;
}else{
object.value = SECOND_MARK;
}
//ターンを+1する
count +=1;
}
//画面を読み込んだときの処理
function onloadAction(){
//マス目にイベントを設定する
$("b1").onclick = clickAction;
$("b2").onclick = clickAction;
$("b3").onclick = clickAction;
$("b4").onclick = clickAction;
$("b5").onclick = clickAction;
$("b6").onclick = clickAction;
$("b7").onclick = clickAction;
$("b8").onclick = clickAction;
$("b9").onclick = clickAction;
}
//画面読み込み時のイベントを設定
window.onload = onloadAction; |
図解！ JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編 [ 中田 亨 ] 価格:2,640円 |
ターン表示を切り替える
先攻のターンを判定する関数の後にターン表示を切り替える関数を作ります
まずは、htmlのターン表示である段落にid属性で『display』と設定しておきます
このあとJavaScriptでターン表示を切り替えていきます
//ターン表示を切り替える
function changeDisplayCount(){
if(isFirstMove()){
//先攻のターンの場合
$("display").innerHTML = FIRST_MARK + 'の番です！';
}else{
//後攻のターンの場合
$("display").innerHTML = SECOND_MARK + 'の番です！';
}
}この関数名は『changeDisplayCount』にします
処理の内容は if文を使用します
マス目に付けるマークと同じ表示になるため、先攻のターンを判定するで作成した『isFirstMove』を利用します
先攻のターンであれば、『$(“display”).innerHTML = FIRST_MARK + ‘の番です！’;』と処理され、後攻のターンであれば、『$(“display”).innerHTML = SECOND_MARK + ‘の番です！’;』と処理されます
htmlのターン表示を切り替えるので『innerHTML』を使用して、切り替えるターン表示を代入します
 |
確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ] 価格:2,728円 |
既にマークされているマス目をスキップ
次に既にマークされているマス目をクリックしても処理が実行されないようにします
これはクリックされたときの処理なので関数『clickAction』の中に書きます
//既にマークが設定されている場合はスキップ
if(object.value !=""){
return;
}この処理はオブジェクトの中にマークがあったらスキップします
『!=””』はオブジェクトの中身が空じゃなかったら以降の処理がされます
もし中身があった場合は『return』が処理され、それ以降の処理はされません
つまりマークがあったらそれ以降の処理はされず、ここで処理が終わるのでマークは切り替わりません
//先攻のマーク
const FIRST_MARK = "○";
//後攻のマーク
const SECOND_MARK = "✖";
//ターン数
let count = 1;
//ID取得する関数
function $(id){
return document.getElementById(id);
}
//先攻のターンか判定する
function isFirstMove(){
let isFirst = count % 2;
return isFirst == 1;
}
//ターン表示を切り替える
function changeDisplayCount(){
if(isFirstMove()){
//先攻のターンの場合
$("display").innerHTML = FIRST_MARK + 'の番です！';
}else{
//後攻のターンの場合
$("display").innerHTML = SECOND_MARK + 'の番です！';
}
}
//クリックされたときの処理
function clickAction(event){
//イベントからクリックされたマス目の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;
}
//ターンを+1する
count +=1;
//ターン表示を切り替える
changeDisplayCount();
}
//画面を読み込んだときの処理
function onloadAction(){
//マス目にイベントを設定する
$("b1").onclick = clickAction;
$("b2").onclick = clickAction;
$("b3").onclick = clickAction;
$("b4").onclick = clickAction;
$("b5").onclick = clickAction;
$("b6").onclick = clickAction;
$("b7").onclick = clickAction;
$("b8").onclick = clickAction;
$("b9").onclick = clickAction;
}
//画面読み込み時のイベントを設定
window.onload = onloadAction;
○✖ゲーム
○の番です！
まとめ
ここまで読んでいただいてありがとうございます
これで〇✖ゲームのクリックしたときの処理は終わりです
かなりゲームっぽくなってきましたね
次は〇や✖が３個並んだら勝敗を判定する関数をプログラミングしていきます
次の記事その⑥
 |
JavaScript 第7版 [ David Flanagan ] 価格:5,060円 |
コメント