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