○×ゲームの勝敗判定

Question

以下のプログラムで奇数回目(○)か偶数回目(×)が縦、横、斜めのいずれかで三個一列で並んだ時点でアラート文「n(並んだ方の記号)の勝ち!」と表示し、ＯＫボタンを押すと初期状態に戻るようにしたいです。

どのように並んだことを判定させればよいのでしょう？

またどちらも一列に並ばなかった場合も別のアラート文を表示しＯＫボタンを押すと初期状態になるようにしたいです。

  <script>
  try{
  document.addEventListener ('click',function(e){myfunc(e)},true);
  }catch(e){
  document.attachEvent('onclick',function(e){myfunc(e)});
  }
  var cnt=0;
  function myfunc(e){
  var t = (e.srcElement || e.target);
  if(t.nodeName=="INPUT" && t.type=="button"){
    if(t.value==""){
      cnt++;
      t.value=cnt%2==1?"○":"×";
      if(cnt>=9){
        alert("GAMEOVER!(OKでリセットします)");
        resetFunc(t);
        cnt=0;
      }
    }else if( cnt > 2 ){
      alert("そのマスはすでに選ばれています。");
      }
  }
  if(t.nodeName=="INPUT" && t.type=="reset"){
      cnt=0;
      resetFunc(t);
    }
  }
  function resetFunc(t){
    var f=t.form;
    for(var i=0;i<f.length;i++){
      if(f[i].type=="button") f[i].value="";
    }
  }
  </script>
  </head>
  <form name="tick">
  <table>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
  </table>

  <input type="reset" value="リセット">
  </p>
  </form>
  </body>

よろしくお願いします。

Comments

[退会済みユーザー]

As I expected, you asked. You should copy my code.
https://teratail.com/questions/37829

[Alpha]

??

Answer 1

アルゴリズム的には3パターンあれば実装可能ですね。

1. 横一行の判定を行数分繰り返す(3回)
2. 縦一列の判定を列数文繰り返す(3列)
3. (1) 左上から数えて「x座標」「y座標」をそれぞれ1ずつ減算して照合していく

(2) 左下から数えて「x座標」「y座標」をそれぞれ1ずつ加算して照合していく

この方法には4x4のマスを作っても対応できる汎用性があります。

Answer 2

判定のロジックはいろいろ考えられますが、この程度のチェックなら
全通り列記すればよいでしょう

<script>
  try{
  document.addEventListener ('click',function(e){myfunc(e)},true);
  }catch(e){
  document.attachEvent('onclick',function(e){myfunc(e)});
  }
  var cnt=0;
  function myfunc(e){
  var t = (e.srcElement || e.target);
  if(t.nodeName=="INPUT" && t.type=="button"){
    if(t.value==""){
      cnt++;
      t.value=cnt%2==1?"○":"×";
      checkFunc(t);
      if(cnt>=9){
        alert("GAMEOVER!(OKでリセットします)");
        resetFunc(t);
        cnt=0;
      }
    }else if( cnt > 2 ){
      alert("そのマスはすでに選ばれています。");
      }
  }
  if(t.nodeName=="INPUT" && t.type=="reset"){
      cnt=0;
      resetFunc(t);
    }
  }
function checkFunc(t){
  var f=t.form;
  var a=new Array();
  var j=0;
  for(var i=0;i<f.length;i++){
    if(f[i].type=="button"){
      a[j]=f[i].value;
      j++;
    }
  }
  if(
    (a[0]!=="" && a[0]==a[1] && a[0]==a[2])||
    (a[0]!=="" && a[0]==a[3] && a[0]==a[6])||
    (a[0]!=="" && a[0]==a[4] && a[0]==a[8])||
    (a[1]!=="" && a[1]==a[4] && a[1]==a[7])||
    (a[2]!=="" && a[2]==a[5] && a[2]==a[8])||
    (a[2]!=="" && a[2]==a[4] && a[2]==a[6])||
    (a[3]!=="" && a[3]==a[4] && a[3]==a[5])||
    (a[6]!=="" && a[6]==a[7] && a[6]==a[8])){
    var val=cnt%2==1?"○":"×";
    alert(val+"の勝ち");
  }
}
function resetFunc(t){
    var f=t.form;
    for(var i=0;i<f.length;i++){
      if(f[i].type=="button") f[i].value="";
    }
  }
  </script>
  </head>
  <form name="tick">
  <table>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
    <tr>
        <td><input type="button"></td>
        <td><input type="button"></td>
        <td><input type="button"></td>
    </tr>
  </table>

  <input type="reset" value="リセット">
  </p>
  </form>
  </body>

Comments

[Alpha]

判定はやはり全通り列記することになるんですね。

どちらも一列に並ばなかった場合も別のアラート文を表示しＯＫボタンを押すと初期状態にするのに
alert(val+"の勝ち");
}
の後に
else{
alert(" ");
resetFunc(t);
cnt=0;
}
を入れたのですがどうにも動かないのですがなぜでしょう？

[yambejp]

> どちらも一列に並ばなかった場合も別のアラート文を表示しＯＫボタンを押すと初期状態にするのに

それって
if(cnt>=9){
alert("GAMEOVER!(OKでリセットします)");
resetFunc(t);
cnt=0;
}
のことじゃないの？

あとは仕様次第ですが、
勝ち負けが決まった後になにもできないようにするために
９個目で勝負が決まった時はゲームオーバーを出さないため
終了フラグをたてたりしてもよいかも
classについては超手抜きなので実装はきをつけて

<style>
.maru{color:white;background-Color:yellow;}
.batu{color:yellow;background-Color:blue;}
</style>
<script>
try{
document.addEventListener ('click',function(e){myfunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){myfunc(e)});
}
var cnt=0;
var endflg=false;
function myfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.type=="button" && !endflg){
if(t.value==""){
cnt++;
if(cnt%2==1){
t.value="○";
t.className="maru";
}else{
t.value="×";
t.className="batu";
}
checkFunc(t);
if(cnt>=9 && !endflg){
alert("GAMEOVER!(OKでリセットします)");
resetFunc(t);
cnt=0;
}
}else if( cnt > 2 ){
alert("そのマスはすでに選ばれています。");
}
}
if(t.nodeName=="INPUT" && t.type=="reset"){
cnt=0;
resetFunc(t);
}
}
function checkFunc(t){
var f=t.form;
var a=new Array();
var j=0;
for(var i=0;i<f.length;i++){
if(f[i].type=="button"){
a[j]=f[i].value;
j++;
}
}
if(
(a[0]!=="" && a[0]==a[1] && a[0]==a[2])||
(a[0]!=="" && a[0]==a[3] && a[0]==a[6])||
(a[0]!=="" && a[0]==a[4] && a[0]==a[8])||
(a[1]!=="" && a[1]==a[4] && a[1]==a[7])||
(a[2]!=="" && a[2]==a[5] && a[2]==a[8])||
(a[2]!=="" && a[2]==a[4] && a[2]==a[6])||
(a[3]!=="" && a[3]==a[4] && a[3]==a[5])||
(a[6]!=="" && a[6]==a[7] && a[6]==a[8])){
var val=cnt%2==1?"○":"×";
alert(val+"の勝ち");
endflg=true;
}
}
function resetFunc(t){
var f=t.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="button"){
f[i].value="";
f[i].className="";
}
}
endflg=false;
}
</script>
</head>
<form name="tick">
<table>
<tr>
<td><input type="button"></td>
<td><input type="button"></td>
<td><input type="button"></td>
</tr>
<tr>
<td><input type="button"></td>
<td><input type="button"></td>
<td><input type="button"></td>
</tr>
<tr>
<td><input type="button"></td>
<td><input type="button"></td>
<td><input type="button"></td>
</tr>
</table>

<input type="reset" value="リセット">
</p>
</form>
</body>

[Alpha]

GAMEOVERは「全てのマスが埋まった時」
nの勝ちは「どちらかが一列に三個揃った時」
もう一つ表示したいメッセージは「どちらも揃わなかった時」

としたかったのですがGAMEOVERと最後のは同じ意味でしたね。すいません。

[Alpha]

何度もすみません。

if(
(a[0]!=="" && a[0]==a[1] && a[0]==a[2])||
(a[0]!=="" && a[0]==a[3] && a[0]==a[6])||
(a[0]!=="" && a[0]==a[4] && a[0]==a[8])||
(a[1]!=="" && a[1]==a[4] && a[1]==a[7])||
(a[2]!=="" && a[2]==a[5] && a[2]==a[8])||
(a[2]!=="" && a[2]==a[4] && a[2]==a[6])||
(a[3]!=="" && a[3]==a[4] && a[3]==a[5])||
(a[6]!=="" && a[6]==a[7] && a[6]==a[8])){
var val=cnt%2==1?"○":"×";
alert(val+"の勝ち");
}

プログラムを見返していたのですが理解できないところがありまして、この処理はどういうしくみになっているのでしょうか？

[yambejp]

条件が8つorでつながれているのはわかりますね？
それぞれ、9マスの左上から右にa[0]、a[1]、a[2]ときて
中段a[3],a[4],a[5],下段a[6],a[7],a[8]と定義してあります

まずa[0]は空以外 かつ a[0]とa[1]が同値 かつ a[0]とa[2]が同値
つまり上段が○○○か×××のときをチェックしています
0→3→6は縦方向に、0→4→8は右下方向にチェックしています
あとは図に書いてみればご自身でも簡単に確認できるでしょう

[Alpha]

ありがとうございます！
たしかに図に描くとわかりやすかったですね。

これを応用して4×4のを作ってみたのですが

if(cnt>=16){
alert("GAMEOVER!(OKでリセットします)");
resetFunc(t);
cnt=0;
}

と
<td><input type="button"></td>

あと先ほど質問した部分を修正したのですがうまく動きませんでした。
他に変えなければならない箇所がある感じでしょうか？

[yambejp]

○×ゲームで4×4はあまり現実的ではないですが
一応こんな感じ

<style>
.maru{color:white;background-Color:yellow;}
.batu{color:yellow;background-Color:blue;}
</style>
<script>
try{
document.addEventListener ('click',function(e){myfunc(e)},true);
}catch(e){
document.attachEvent('onclick',function(e){myfunc(e)});
}
var cnt=0;
var endflg=false;
function myfunc(e){
var t = (e.srcElement || e.target);
if(t.nodeName=="INPUT" && t.type=="button" && !endflg){
if(t.value==""){
cnt++;
if(cnt%2==1){
t.value="○";
t.className="maru";
}else{
t.value="×";
t.className="batu";
}
checkFunc(t);
if(cnt>=16 && !endflg){
alert("GAMEOVER!(OKでリセットします)");
resetFunc(t);
cnt=0;
}
}else {
alert("そのマスはすでに選ばれています。");
}
}
if(t.nodeName=="INPUT" && t.type=="reset"){
cnt=0;
resetFunc(t);
}
}
function checkFunc(t){
var f=t.form;
var a=new Array();
var j=0;
for(var i=0;i<f.length;i++){
if(f[i].type=="button"){
a[j]=f[i].value;
j++;
}
}
var winflg=false;
for(var i=0;i<4;i++){
if(
(a[i]!=="" && a[i]==a[i+4] && a[i]==a[i+8] && a[i]==a[i+12]) ||
(a[i*4]!=="" && a[i*4]==a[i*4+1] && a[i*4]==a[i*4+2] && a[i*4]==a[i*4+3])
){
winflg=true;
break;
}
}
if(
(a[0]!=="" && a[0]==a[5] && a[0]==a[10] && a[0]==a[15])||
(a[3]!=="" && a[3]==a[6] && a[3]==a[9] && a[3]==a[12])
){
winflg=true;
}
if(winflg){
var val=cnt%2==1?"○":"×";
alert(val+"の勝ち");
endflg=true;
}
}
function resetFunc(t){
var f=t.form;
for(var i=0;i<f.length;i++){
if(f[i].type=="button"){
f[i].value="";
f[i].className="";
}
}
endflg=false;
}
</script>

[Alpha]

最初の参考にさせていただいたプログラムとだいぶ変わってしまっていてよくわからないのですが。

最初に参考にさせていただいたプログラムからは修正できないのでしょうか？
それと色を変える処理はここではいりません。