こんにちは、パキラです
前回に引き続き、〇✖ゲームのプログラミングをしたいと思います
さて、前回はマスにイベントを設定して、クリックするとマスに〇が表示されるようになりました
今回は〇と✖が交互に表示されるようにプログラミングします
 |
JavaScript 第7版 [ David Flanagan ] 価格:5,060円 |
先攻後攻のマークとターン数
//先攻のマーク
const FIRST_MARK = "○";
//後攻のマーク
const SECOND_MARK = "✖";
//ターン数
let count = 1;
//IDからオブジェクトを取得するまずは前回のコードの最初に先攻のマークと後攻のマークを const で変数に〇と✖を入れます
今後この変数の中に代入することはないので const です
次にターン数によってマークを交互に入れ替わるようにするため、let count の中に１を代入しておきます
このターン数はクリック毎に増えるので再代入が可能な let を使用します
先攻のターンを判定する関数
次はクリックしたときに先攻か後攻か判定する関数を作ります
//先攻のターンか判定する
function isFirstMove(){
let isFirst = count % 2;
return isFirst == 1;
}まずターン数はクリックのたびに１ずつ増えていきます
そして先攻か後攻か判定するためにターン数を利用します
ここで判定するときは剰余演算子(%)を使います
ターン数は『1,2,3,4,5,6』と増えていきます
その ターン数を２で割ると余りがでるときと、割り切れるときがあります
偶数で割り切れて、奇数は余りがでます
これを利用して先攻か後攻が判定できますね
これでターン数を2で割ったときに余りが出た場合は『True』が返ってきます
もし割り切れた場合は『False』が返ります
これでターン数によって先攻か後攻か判定する関数ができました
■□━━ 急げ、ドメインは早い者勝ち！ ━━□■
■お名前.com
 |
図解！ JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編 [ 中田 亨 ] 価格:2,640円 |
〇と✖を交互に表示させる
では次に先ほど作った関数を使用して、マス目にマークを設定する中に先攻と後攻を判定してマークをするようにします
//クリックされたときの処理
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 = count + 1;
}マス目にマークをする設定するを条件分岐 if文を使用します
『True』のときは『FIRST_MARK(〇)』を表示させ
『False』のときは『SECOND_MARK(✖)』を表示するようにしました
つまりターン数が奇数なら〇、偶数なら✖がマークされます
そしてマークを設定した後にターン数を増やすようにしますので加算演算子を使います
『count = count + 1』
クリックされる毎に、ターン数に現時点のターン数に＋1した数を代入するとなります
これでクリックしてマークが表示される毎にターン数が増えます
このイコールの記号は代入演算子と呼ばれますが、数学でいう左と右が同じという意味ではありませんのでご注意ください
ほかには加算代入演算子もあります
『count += 1』
これで先ほどと同じ処理がされますが、どちらでも問題ありません
【初心者向け】ブログの始め方完全ガイド！立ち上げから収入を得る方法まで
○✖ゲーム
○の番です！
まとめ
ここまで読んでいただきありがとうございました
今回は〇✖のマークを交互に付けるプログラミングでした
実際に〇✖が切り替わると嬉しいですね
最後にここまでのコードを表示しておきます
//先攻のマーク
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 第7版 [ David Flanagan ] 価格:5,060円 |
コメント