Vue.jsでゲームを作ろ！ - ○×ゲーム-2(勝ち負け判定)

すぐできる！Vueで丸バツゲームをつくってみよう – console dot log

ゲーム盤に「まる」「ばつ」が打てるようになったので、次はゲームとして成立させたいので必要なコードを書いていきます。

ゲームが完了したかどうかをチェックする

 　　　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;
}