Vue.jsでゲームを作ろ! - ○×ゲーム-2(勝ち負け判定)
ゲーム盤に「まる」「ばつ」が打てるようになったので、次はゲームとして成立させたいので必要なコードを書いていきます。
ゲームが完了したかどうかをチェックする
var winnerId = this.getWinnerId();
if(winnerId != -1) {
this.init();
playerIds = {
1: '○',
2: '×'
};
this.winnerText = playerIds[winnerId] +' さんの勝ちです。おめでとうございます!';
}
else if(this.isDraw()) {
this.states = [
[-1, -1, -1],
[-1, -1, -1],
[-1, -1, -1]
];
alert('引き分けです!');
}
どちらかが勝ったかを、
getWinnerId();
で判定します。判定できない場合は
if(this.isDraw()) {}
で引き分けとします。
getWinnerId();の中身は
getWinnerId: function() {
for(var i = 0; i < 3 ; i++){
// 横の列
var row = this.states[i];
if(this.isStatesFilled(row)) { return row[0];}
// 縦の列
var col = [
this.states[0][i],
this.states[1][i],
this.states[2][i]
];
if(this.isStatesFilled(col)) { return this.states[0][i]; }
}
// ななめ
var skew1 = [
this.states[0][0],
this.states[1][1],
this.states[2][2]
];
if(this.isStatesFilled(skew1)) { return this.states[0][0]; }
var skew2 = [
this.states[0][2],
this.states[1][1],
this.states[2][0]
];
if(this.isStatesFilled(skew2)) { return this.states[0][2]; }
return -1;
}
for(var i = 0; i < 3 ; i++){}
3つの数字をまず選んで確認していきます。
横の列、縦の列、斜めの列と調べていきます。
調べる関数が以下
isStatesFilled: function(states) {
return(
states[0] != -1 &&
states[0] == states[1] &&
states[1] == states[2]
);
}
で
-1を含まず(まだ選択されていないため)
全ての数字が同じ値である
をチェックします。
そして、
引き分けの場合をチェックする。
if(this.isDraw()) {}
isDraw()の中ではstatesの中身をすべてチェックして-1が存在していたら(つまりまだゲームは終わっていない)falseを返し、そうでなければゲームは終了しているのに勝敗が決まっていない(=引き分け)ということでtrueを返します。
そして、もし引き分けの場合はアラートを起動して完了です。
コードは以下です。
isDraw: function() {
for(var i in this.states) {
var row = this.states[i];
for(var j in row) {
var state = row[j];
if(state == -1) {
return false;
}
}
}
return true;
}
この記事が気に入ったらサポートをしてみませんか?