Javascript ○×ゲーム

Question

<script language="Javascript">
function init(){
switch=0;
con=0;
   document.tick.elements[0].value=" ";
   document.tick.elements[1].value=" ";
   document.tick.elements[2].value=" ";
   document.tick.elements[3].value=" ";
   document.tick.elements[4].value=" ";
   document.tick.elements[5].value=" ";
   document.tick.elements[6].value=" ";
   document.tick.elements[7].value=" ";
   document.tick.elements[8].value=" ";
   document.tick.elements[9].value=" ";
}

function ticktack(i){
      if(document.tick.elements[i].value=="○" || document.tick.elements[i].value=="×"){
        alert("そのマスはすでに選ばれています.");
        return false;
        }
        
      if(switch==0){
        document.tick.elements[i].value ="○";
        switch=1;
       }
      else if(switch==1){
        document.tick.elements[i].value ="×";
        switch=0;
      }
      
      if(con==8){
        alert("GAME OVER!(OKでリセットします)");
         document.tick.elements[0].value=" ";
         document.tick.elements[1].value=" ";
         document.tick.elements[2].value=" ";
         document.tick.elements[3].value=" ";
         document.tick.elements[4].value=" ";
         document.tick.elements[5].value=" ";
         document.tick.elements[6].value=" ";
         document.tick.elements[7].value=" ";
         document.tick.elements[8].value=" ";
         document.tick.elements[9].value=" ";
       }
      con++;
      
      }
</script>

これは、Javascriptでの○×ゲームで、ここから判定処理をしたくて、判定処理の戻り値が1なら「○が勝ち」2なら「×が勝ち」0かつconの値が9以上なら引き分け 0かつconが9未満だったらメッセージを表示せず関数を抜けたいです
一応

      if(document.tick.elements[0].value=="○" && document.tick.elements[1].value=="○" && document.tick.elements[2].value=="○"){
          alert("○が勝ち");
      }
      
      if(document.tick.elements[3].value=="○" && document.tick.elements[4].value=="○" && document.tick.elements[5].value=="○"){
         alert("○が勝ち!");
      }
      
      if(document.tick.elements[6].value=="○" && document.tick.elements[7].value=="○" && document.tick.elements[8].value=="○"){
         alert("○が勝ち");
      }
      
      if(document.tick.elements[0].value=="○" && document.tick.elements[3].value=="○" && document.tick.elements[6].value=="○"){
         alert("○が勝ち");
      }
      
      if(document.tick.elements[1].value=="○" && document.tick.elements[4].value=="○" && document.tick.elements[7].value=="○"){
         alert("○が勝ち");
      }
      
      if(document.tick.elements[2].value=="○" && document.tick.elements[5].value=="○" && document.tick.elements[8].value=="○"){
         alert("○が勝ち");
      }
      
      if(document.tick.elements[0].value=="○" && document.tick.elements[4].value=="○" && document.tick.elements[8].value=="○"){
         alert("○が勝ち");
      }
      
      if(document.tick.elements[2].value=="○" && document.tick.elements[4].value=="○" && document.tick.elements[6].value=="○"){
         alert("○が勝ち");
      }

こういう風にはしてみたんですけど戻り値のことが含まれておらず、また戻り値が整数っていうのがよくわからずじまいで… どうしたらいいのでしょうか…？
HTMLです

<form name="tick">
<input type="button" name="c1" onclick="ticktack(0)">
<input type="button" name="c2" onclick="ticktack(1)">
<input type="button" name="c3" onclick="ticktack(2)">
<br>
<input type="button" name="c4" onclick="ticktack(3)">
<input type="button" name="c5" onclick="ticktack(4)">
<input type="button" name="c6" onclick="ticktack(5)">
<br>
<input type="button" name="c7" onclick="ticktack(6)">
<input type="button" name="c8" onclick="ticktack(7)">
<input type="button" name="c9" onclick="ticktack(8)">
<br>
<input type="reset" value="リセット" onClick="init()">
</p>
</form>

Comments

[m.ts10806]

HTMLも含めて提示は可能ですか？あと２つめのソースがどう呼び出されているかも追記していただけると助かります。

[yambejp]

tickの仕様がわかりません0~9まで10要素を持っているように見えますが、3x3マスだと1マス余りますが大丈夫でしょうか？

[退会済みユーザー]

8までに直しました…　一個多く追加してました。。。

Answer 1

一応ざっとした流れだけsample挙げておきます

<script>
var v="x";
document.addEventListener('click',function(e){
  var t=e.target;
  if(t.nodeName=="TD"){
    if(t.innerHTML!=="x" && t.innerHTML!=="o"){
      v=v=="x"?"o":"x";
      t.innerHTML=v;
      if(check(v)) console.log(v+" win");
    }
  }
});
function check(v){
  var tbl=document.getElementById("tbl");
  for(var i=0;i<3;i++){
    for(var j=0;j<3;j++){
      if(tbl.rows[i].cells[j].innerHTML!=v) break;/*横check*/
      if(j==2) return true;
    }
    for(var k=0;k<3;k++){
      if(tbl.rows[k].cells[i].innerHTML!=v) break;/*縦check*/
      if(k==2) return true;
    }
  }
  for(var i=0;i<3;i++){
    if(tbl.rows[i].cells[i].innerHTML!=v) break;/*斜1check*/
    if(i==2) return true;
  }
  for(var i=0;i<3;i++){
    if(tbl.rows[2-i].cells[i].innerHTML!=v) break;/*斜2check*/
    if(i==2) return true;
  }
  return false;
}
</script>
<table border id="tbl">
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>