Крестики-нолики

По клику на ячейку в ней будет проставляться символ того игрока, который в данный момент ходит. Т.е. игра идёт по схеме “Hot seat”. Самым интересным будет определение победителя. Оно должно происходить после каждого хода. Т.е. оно зависит от события.

by Артур Бакаев

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>
</html>

SCSS

table{
  border-collapse:collapse;
  td{
    width: 90px;
    height: 90px;
    border:4px solid blue;
    position:relative;
    cursor:pointer;
    &:first-child{
      border-left:none;
    }
    &:last-child{
      border-right:none;
    }
  }
  tr{
    &:first-child td{
      border-top:none;
    }
    &:last-child td{
      border-bottom:none;
    }
  }
}
.crestik{
  position:relative;
  width: 100%;
  height: 100%;
  &:after{
    content:'';
    position:absolute;
    width: 4px;
    height: 100%;
    background: blue;
    left:50%;
    transform: rotate(45deg);
  }
  &:before{
    content:'';
    position:absolute;
    width: 4px;
    height: 100%;
    background: blue;
    left:50%;
    transform: rotate(-45deg);
  }
}
.nolik{
  width: 70%;
  height: 70%;
  border:4px solid blue;
  border-radius:50%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

JavaScript

table = document.getElementsByTagName('table')[0];
stepCrestiki = Math.round(Math.random());
message = stepCrestiki ? "Ходят крестики" : "Ходят нолики";
alert (message);
cols = document.getElementsByTagName('td');
function step() {
     if (!this.hasAttribute('class')){
        crestik = document.createElement('div');
        crestik.className = 'crestik';
        nolik = document.createElement('div');
        nolik.className = 'nolik';
        elem = stepCrestiki ? crestik : nolik;
        this.appendChild(elem);
        this.className = stepCrestiki ? 'crs' : 'nol';
        stepCrestiki = stepCrestiki ? 0 : 1;
        finish.call(this);
    }
    
}
function finish(){
	if(document.querySelectorAll('.crs').length>=3 || document.querySelectorAll('.nol').length>=3) {
  	
  }
}
for (i=0;i<cols.length;i++){
	cols[i].onclick = step;
}