
<!DOCTYPE HTML>
<html lang = "jp">
 <head>
   <meta chaset = "utf-8">
   <script type = "text/javascript"></script> 
   <script src = "maru.jp"></script>
   <style type = "text/css"></style>
   <link rel = "stylesheet" href = "maru.css">
   <title>○×ゲーム</title>
 </head>
 <body>
   <table id = "ban">
     <tr><td id = "a"></td><td id = "b"></td><td id = "c"></td></tr>
	 <tr><td id = "d"></td><td id = "e"></td><td id = "f"></td></tr>
	 <tr><td id = "g"></td><td id = "h"></td><td id = "i"></td></tr>
   </table>
   <div id = "kekka"></div>
   <button id = "reset">Reset</button>
 </body>
</html>

onload =function(){
    let turn = 1;//１なら○２なら×
    let a = document.getElementById("a");
	let b = document.getElementById("b");
	let c = document.getElementById("c");
	let d = document.getElementById("d");
	let e = document.getElementById("e");
	let f = document.getElementById("f");
	let g = document.getElementById("g");
	let h = document.getElementById("h");
	let i = document.getElementById("i");
	let re = document.getElementById("reset");
	let kekka = document.getElementById("kekka");
	let element_array =[a,b,c,d,e,f,g,h,i];
	let win_form
	for(let i = 0;i<9;i++){
	    add_e(element_array[i]);
	}
	//イベントを付与
    function add_e(event){
	     if(event.innerHTML==""){
              event.onclick = function(){	
                   if(event.innerHTML=="○"||event.innerHTML=="×"){
				       return;
				   }
			       if(turn == 1){
                       event.innerHTML= "○";
					   if(!bing(element_array,"○","red")){
					       kekka.innerHTML = win_form+"で○の勝ち";
						   turn = 3;
						   return;
					   }
				       turn= turn_change(turn);
					   if(end(element_array)){ 
					      kekka.innerHTML = "引き分け";
					   }
		               return;
	                }
	                if(turn === 2){
	                   event.innerHTML= "×";
					   if(!bing(element_array,"×","#ABE3F1")){
					       kekka.innerHTML = win_form+"で×の勝ち";
						   turn = 3;
						   return;
					   }
				       turn = turn_change(turn);
					   if(end(element_array)){
					      kekka.innerHTML = "引き分け";
						
					   }
				       return;
		            }
	            }
		 }
	}
	//ターンの入れ替え
	function turn_change(turn){
	     return 3-turn;
	}
	//終わりを判定
	function end(event){	
	   let a = 0;
	   for(let i = 0;i<9;i++){
	       if(event[i].innerHTML=="○"||event[i].innerHTML=="×"){
		        a++;
		   }
	   }
	   if(a==9){
	        return true;
	   }else{
	        return false;
	   }
	}   
		   
     //そろってるか判定
     function bing(event,str,color){
          let a = [];
	      let j = 0;
          for(let i = 0;i<9;i++){	
	         if(event[i].innerHTML == str){
	             a[j]=i;
		         j++;
		     }	
	      }
          if(array_search(0,1,2,a,color)){
	         win_form ="上横";
	         return false;
      	  }
		  if(array_search(3,4,5,a,color)){
	         win_form ="中央横";
	         return false;
	      }
	      if(array_search(6,7,8,a,color)){
	         win_form ="下横";
	         return false;
	      }
	      if(array_search(0,3,6,a,color)){
	         win_form ="左縦";
	         return false;
	      }
	      if(array_search(1,4,7,a,color)){
	         win_form = "中央縦";
	         return false;
	      }
	      if(array_search(2,5,8,a,color)){
	         win_form = "右縦";
	         return false;
	      }
       	  if(array_search(0,4,8,a,color)){
	         win_form = "斜め右";
	         return false;
	      }
	      if(array_search(2,4,6,a,color)){
             win_form ="斜め左";
	         return false;
	      }
	         return true;
     }

     function array_search(a,b,c,array,color){
              let decision = 0;
              for(let i = 0;i<array.length;i++){
                 if(array[i]==a)
	                decision++;
	             if(array[i]==c)
	                decision++;
	             if(array[i]==b)
	                decision++;
	             if(decision==3){
				  element_array [a].style.backgroundColor = color;
				  element_array [b].style.backgroundColor = color;
				  element_array [c].style.backgroundColor = color;
				  element_array [a].style.fontSize = "50px";
				  element_array [b].style.fontSize = "50px";
				  element_array [c].style.fontSize = "50px";
				  return true;
				 }
              }
              return false;
     }
	 //リセットボタン作成
     re.addEventListener("click",function(){
                                      turn = 1;
    	                              for(let i = 0;i<9;i++){
                                          element_array[i].innerHTML="";
										  element_array[i].removeAttribute("style");

                                      }
						              kekka.innerHTML = "";
		                         });
}

table{
    border-collapse: collapse;
    width: 150px;
    height: 150px;
}
# a {
   border-style:none solid solid none;
   text-align:center;
   width:50px;
   height:50px;
   padding:0px;
}
# b {
   border-style:none solid solid solid;
   text-align:center;
   width:50px;
   height:50px;
   padding:0px;
}
# c {
   border-style:none none solid solid;
   text-align:center;
   width:50px;
   height:50px;
   padding:0px;
}
# d {
   border-style:solid solid solid none;
   text-align:center;
   width:50px;
   height:50px;
   padding:0px;
}
# e {
   border-style:solid;
   text-align:center;
   width:50px;
   height:50px;
   padding:0px;
}

# f {
   border-style:solid none solid solid;
   text-align:center;
   width:50px;
   height:50px;
   padding:0px;
}
# g {
   border-style:solid solid none none;
   text-align:center;
   width:50px;
   height:50px;
   padding:0px;
}
# h {
   border-style:solid solid none solid;
   text-align:center;
   width:50px;
   height:50px;
   padding:0px;
}
# i {
   border-style:solid none none solid;
   text-align:center;
   width:50px;
   height:50px;
   padding:0px;
}