Как изменять количество ячеек через js (крестики нолики)

var t = new Array(29);

function ai() {
  var id = Math.floor(Math.random() * 29);
  t[id] ? ai() : move(id, 'ai');
}

function checkEnd() {
  if (t[0]=='ai' && t[1]=='ai' && t[2]=='ai' || t[0]=='player' && t[1]=='player' && t[2]=='player')  return true;
  if (t[3]=='ai' && t[4]=='ai' && t[5]=='ai' || t[3]=='player' && t[4]=='player' && t[5]=='player')  return true;
  if (t[6]=='ai' && t[7]=='ai' && t[8]=='ai' || t[6]=='player' && t[7]=='player' && t[8]=='player')  return true;
  if (t[0]=='ai' && t[3]=='ai' && t[6]=='ai' || t[0]=='player' && t[3]=='player' && t[6]=='player')  return true;
  if (t[1]=='ai' && t[4]=='ai' && t[7]=='ai' || t[1]=='player' && t[4]=='player' && t[7]=='player')  return true;
  if (t[2]=='ai' && t[5]=='ai' && t[8]=='ai' || t[2]=='player' && t[5]=='player' && t[8]=='player')  return true;
  if (t[0]=='ai' && t[4]=='ai' && t[8]=='ai' || t[0]=='player' && t[4]=='player' && t[8]=='player')  return true;
  if (t[2]=='ai' && t[4]=='ai' && t[6]=='ai' || t[2]=='player' && t[4]=='player' && t[6]=='player')  return true;
  if(t[0] && t[1] && t[2] && t[3] && t[4] && t[5] && t[6] && t[7] && t[8]) return true;
}

function move(id, role) {
  if(t[id]) return false;
  t[id] = role;
  document.getElementById(id).className = 'cell ' + role;
  !checkEnd() ? (role == 'player') ? ai() : null : reset()
}

function not_log() {
  alert('Вы не вошли в акаунт')
}

function reset_log() {
  location.reload();
}

function reset() {
  alert("Игра окончена!"); 
  location.reload();
}

function alredy(){
  alert('Вы уже здесь!')
}

function max(){
  alert('Вы уже играете 5х5!')
}

/* MAIN */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body {
    background-color: white;
}
/*ID*/
#chose{
    font-family: Montserrat,sans-serif;
    position: absolute;
    margin-top: 12%;
    margin-left: 5%;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

#chose2{
    font-family: Montserrat,sans-serif;
    position: absolute;
    margin-top: 7%;
    margin-left: 5%;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

/* Buttons*/

.info_bc{
    position: absolute;
    background-color:#2a2a44;
    width: 400px;
    height: 500px;
}

.btn{
    position: relative;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 20px;
    color: #000;
    background-color: #ffffff;
    height: 50px;
    width: 120px;
    font-size: 14px;
    margin-top: 20%;
    margin-left: 34%;
    text-align: center;
    transition: 1.2s;
    border: 1.6px solid #fff;
}

.btn1{
    position: absolute;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 20px;
    color: #000;
    background-color: #ffffff;
    height: 50px;
    width: 120px;
    font-size: 14px;
    margin-top: -13%;
    margin-left: 1%;
    text-align: center;
    transition: 1.2s;
    border: 1.6px solid #fff;
}

.btn2{
    position: relative;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 20px;
    color: #000;
    background-color: #d8dee9;
    height: 50px;
    width: 120px;
    font-size: 14px;
    margin-top: -13%;
    margin-left: 67%;
    text-align: center;
    transition: 1.2s;
    border: 1.6px solid #fff;
}

.go_game{
    position: relative;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 20px;
    color: white;
    background-color: #15769e;
    height: 50px;
    width: 250px;
    font-size: 14px;
    margin-top: 65%;
    margin-left: 20%;
    text-align: center;
    text-transform: uppercase;
    transition: 2s;
    border: 1.6px solid #15769e;
}

.game_bc{
    position: absolute;
    background-color:#2a2a44;
    width: 600px;
    height: 500px;
}


/*Tic Tac Toe*/
.tic_tac{
    position: absolute;
    margin-top: 200px;
    margin-left: 800px;
}

.actions {
    text-align: center;
}
.ai {
    background-image: url('./img/ai.jpg');
}
.container {
    position: relative;
    margin-top: 20%;
    margin-left: 27%; 
    width: 400px;
}
.cell {
    background-color: #444563;
    border: 1.6px solid #2a2a44;
    float: left;
    height: 60px;
    width: 60px;
    transition: 0.6s;
}

.player {
    background-image: url('./img/player.jpg');
}

/*Other class*/

.first_box{
    position: absolute;
    width: 100%;
    height: 15%;
    background-color: #2a2a44;
}

.bc{
    position: absolute;
    background-color: #212529;
    height: 155%;
    width: 100%;
}

.left_box{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 4%;
    margin-top: 0%;
    height: 100%;
    background-color: #2a2a44;
}

.info{
    position: absolute;
    margin-top: 200px;
    margin-left: 200px;
}



.menu_object{
    position: absolute;

}

.five{
    position: absolute;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 10px;
    color: #000;
    background-color: #ffffff;
    height: 40px;
    width: 70px;
    font-size: 14px;
    margin-top: 20%;
    margin-left: 10%;
    text-align: center;
    transition: 1s;
    border: 1.6px solid #fff;
}

.ten{
    position: absolute;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 10px;
    color: #000;
    background-color: #ffffff;
    height: 40px;
    width: 70px;
    font-size: 14px;
    margin-top: 20%;
    margin-left: 40%;
    text-align: center;
    transition: 1s;
    border: 1.6px solid #fff;
}

.twen{
    position: absolute;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 10px;
    color: #000;
    background-color: #ffffff;
    height: 40px;
    width: 70px;
    font-size: 14px;
    margin-top: 20%;
    margin-left: 70%;
    text-align: center;
    transition: 1s;
    border: 1.6px solid #fff;
}

.fivetyn{
    position: absolute;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 10px;
    color: #000;
    background-color: #ffffff;
    height: 40px;
    width: 70px;
    font-size: 14px;
    margin-top: 40%;
    margin-left: 10%;
    text-align: center;
    transition: 1s;
    border: 1.6px solid #fff;
}

.huongry{
    position: absolute;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 10px;
    color: #000;
    background-color: #ffffff;
    height: 40px;
    width: 70px;
    font-size: 14px;
    margin-top: 40%;
    margin-left: 40%;
    text-align: center;
    transition: 1s;
    border: 1.6px solid #fff;
}

.twohoungry{
    position: absolute;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 10px;
    color: #000;
    background-color: #ffffff;
    height: 40px;
    width: 70px;
    font-size: 14px;
    margin-top: 40%;
    margin-left: 70%;
    text-align: center;
    transition: 1s;
    border: 1.6px solid #fff;
}

.instagram{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 2%;
    margin-left: 60%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #373553;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    border-radius: 40px;
    color: #fff;
    font-size: 220px;
    line-height: 250px;
    vertical-align: middle;
    background-color: #373553;
    transition: 1s;
}

.vk{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 2%;
    margin-left: 65%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #373553;
    cursor: pointer;
    transition: .2s;
}


.telegram{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-top: 2%;
    margin-left: 70%;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #373553;
    cursor: pointer;
    transition: background .2s ease-in-out;
}

.to_day_play{
    color: #7c77ad;
    position: absolute;
    margin-top: 60%;
    font-size: 10px;
    text-transform: uppercase;
    font-family: Montserrat,sans-serif;
    margin-left: 20%;
}

.now_play{
    color: #7c77ad;
    position: absolute;
    margin-top: 60%;
    font-size: 10px;
    text-transform: uppercase;
    font-family: Montserrat,sans-serif;
    margin-left: 35%;
}

.to_win{
    color: #7c77ad;
    position: absolute;
    margin-top: 60%;
    font-size: 10px;
    text-transform: uppercase;
    font-family: Montserrat,sans-serif;
    margin-left: 50%;
}

.full{
    color: #7c77ad;
    position: absolute;
    margin-top: 60%;
    font-size: 10px;
    text-transform: uppercase;
    font-family: Montserrat,sans-serif;
    margin-left: 65%;
}

.guest2{
    position: absolute;
    margin-top: 0.9%;
    margin-left: 80%;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #00bfff;
    cursor: pointer;
    transition: background .2s ease-in-out;
}

.guest1{
    font-family: Montserrat,sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;

    position: absolute;
    text-decoration: none;
    display: block;
    z-index:1;
    border-radius: 10px;
    color: #000;
    background-color: #ffffff;
    height: 21px;
    width: 80px;
    font-size: 14px;
    margin-top: 3%;
    margin-left: 79%;
    text-align: center;
    transition: 1s;
    border: 1.6px solid #fff;
}

.num1{
    margin-top: 62%;
    margin-left: 22.5%;
    position: absolute;
    font-family: Montserrat,sans-serif;
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

.num2{
    margin-top: 62%;
    margin-left: 36%;
    position: absolute;
    font-family: Montserrat,sans-serif;
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

.num3{
    margin-top: 62%;
    margin-left: 53%;
    position: absolute;
    font-family: Montserrat,sans-serif;
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}

.num4{
    margin-top: 62%;
    margin-left: 69%;
    position: absolute;
    font-family: Montserrat,sans-serif;
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
}


.login_after{
    color: black;
    position: absolute;
    background: #66ddf6;
    border-color: #b4f2ff #2fb7ce #2fb7ce;
    font-family: Montserrat,sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 140px;
    padding: 10px 12px;
    background: white;
    border: 1.6px solid #fff;
    border-radius: 5px;
    outline: none;
    transition:  1s;
    text-decoration: none;
    margin-top: 1%;
    margin-left: 85%;
}

/*Left bar*/
.left_box_ico{
    margin-left: .3%;
    margin-top: 9%;
    width: 50px;
    height: 50px;
    background-color: red;
    background-image: url(images/bg.jpg);
    background-repeat: no-repeat;
    z-index: 1;
    position: absolute;
    border: 1.6px solid #2C2E47;
    border-radius: 1px;
    transition: 1.5s;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

.notif{
    background-color: blue ;
    margin-left: .3%;
    margin-top: 43%;
    width: 50px;
    height: 50px;
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: 1.5s;
}


/*HOVER*/
.left_box_ico:hover{
    border-color: #b4f2ff;
}

.login_after:hover{
    border-color:blue;
    color: blue;
}

.instagram:hover{
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    box-shadow: 0px 3px 10px rgba(0,0,0,.25);
}

.vk:hover, .telegram:hover{
    background-color: #81a1c1;
}

.go_game:hover{
    border-color: white;
}
.btn:hover,.btn1:hover{
    border-color: blue;
}
.btn2:hover{
    border-color:red;
}

.cell:hover {
    border-color: white;
}

.twohoungry:hover, .huongry:hover, .fivetyn:hover, .five:hover, .ten:hover, .twen:hover{
    border-color: blue;
}

/*Up*/
.back-to-top-wrapper {
  position: absolute;
  top: 100vh;
  right: 1rem;
  bottom: -5em;
  width: 3em;
  pointer-events: none;
}

.back-to-top-link {
  position: fixed;
  pointer-events: all;
  top: calc(100vh - 5rem);
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  padding: 0.25rem;
  border: 1px solid #254568;
  background-color: #d6e3f0;
  -webkit-transition: -webkit-transform 80ms ease-in;
  transition: -webkit-transform 80ms ease-in;
  transition: transform 80ms ease-in;
  transition: transform 80ms ease-in, -webkit-transform 80ms ease-in;
}
.back-to-top-link:hover, .back-to-top-link:focus {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.back-to-top-link:focus {
  outline: none;
  box-shadow: 0 0 0 3px #4e85c0;
}

/*MEDIA*/

@media screen and (prefers-reduced-motion: no-preference) {
  html,
  body {
    scroll-behavior: smooth;
  }
}

<!DOCTYPE html>
<html lang="ru">

<head>
  <title>X-Game</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="engine.js"></script>
  <!-->
  <script type="text/javascript" src="online.js"></script>
  </!-->
  <script type="text/javascript" src="notif.js"></script>
</head>

<body>
  <div class="head">
    <div class="bc"></div>
    <div class="first_box"></div>
    <div class="top_box_nav">
      <a href="#" class="guest1">ГОСТЬ</a>
      <a href="#" class="guest2"></a>
      <a href="formreg.php" class="login_after">ВОЙТИ</a>
      <a class="instagram" href="#"></a>
      <a class="telegram" href="https://t.me/TicTacToe_online">
        <im</a>
          <a class="vk" href="https://vk.com/club87993959"></a>

    </div>
    <div class="block_left_nav">
      <div class="left_box"></div>
      <div class="left_box_ico" onclick="alredy()"></div>
      <div class="notif" onclick="requestPermission()"></div>
    </div>
  </div>
  <div class="game">
    <div class="info">
      <div class="info_bc">
        <h1 id="chose">Выберите тип игры</h1>
        <a href="#" class="btn" onclick="not_log()"><br>15x15</a>
        <a href="#" class="btn1" onclick="not_log()"><br>10x10</a>
        <a href="#" class="btn2" onclick="max()"><br>5x5</a>
        <h1 id="chose2">Выберите ставку</h1>
        <div class="btns">
          <a href="#" class="five" onclick="not_log()"><br>5</a>
          <a href="#" class="ten" onclick="not_log()"><br>10</a>
          <a href="#" class="twen" onclick="not_log()"><br>20</a>
          <a href="#" class="fivetyn" onclick="not_log()"><br>50</a>
          <a href="#" class="huongry" onclick="not_log()"><br>100</a>
          <a href="#" class="twohoungry" onclick="not_log()"><br>200</a>
        </div>
        <a href="#" class="go_game" onclick="reset_log()"><br>Начать новую игру</a>
      </div>
    </div>
    <div class="tic_tac">
      <div class="game_bc"></div>
      <div class="container">
        <div class="table">
          <div class="cell" id="0" onclick="move(0, 'player')"></div>
          <div class="cell" id="1" onclick="move(1, 'player')"></div>
          <div class="cell" id="2" onclick="move(2, 'player')"></div>
          <div class="cell" id="3" onclick="move(3, 'player')"></div>
          <div class="cell" id="4" onclick="move(4, 'player')"></div>
          <div class="cell" id="5" onclick="move(5, 'player')"></div>
          <div class="cell" id="6" onclick="move(6, 'player')"></div>
          <div class="cell" id="7" onclick="move(7, 'player')"></div>
          <div class="cell" id="8" onclick="move(8, 'player')"></div>
          <div class="cell" id="9" onclick="move(9, 'player')"></div>
          <div class="cell" id="10" onclick="move(10, 'player')"></div>
          <div class="cell" id="11" onclick="move(11, 'player')"></div>
          <div class="cell" id="12" onclick="move(12, 'player')"></div>
          <div class="cell" id="13" onclick="move(13, 'player')"></div>
          <div class="cell" id="14" onclick="move(14, 'player')"></div>
          <div class="cell" id="15" onclick="move(15, 'player')"></div>
          <div class="cell" id="16" onclick="move(16, 'player')"></div>
          <div class="cell" id="17" onclick="move(17, 'player')"></div>
          <div class="cell" id="18" onclick="move(18, 'player')"></div>
          <div class="cell" id="19" onclick="move(19, 'player')"></div>
          <div class="cell" id="20" onclick="move(20, 'player')"></div>
          <div class="cell" id="21" onclick="move(21, 'player')"></div>
          <div class="cell" id="22" onclick="move(22, 'player')"></div>
          <div class="cell" id="23" onclick="move(23, 'player')"></div>
          <div class="cell" id="24" onclick="move(24, 'player')"></div>
          <div class="cell" id="25" onclick="move(25, 'player')"></div>
          <div class="cell" id="26" onclick="move(26, 'player')"></div>
          <div class="cell" id="27" onclick="move(27, 'player')"></div>
          <div class="cell" id="28" onclick="move(28, 'player')"></div>
          <div class="cell" id="29" onclick="move(29, 'player')"></div>
        </div>
      </div>
    </div>
    <div class="down_box">
      <div class="history"></div>
      <div class="info_down_box">
        <h1 class="now_play">Онлайн</h1>
        <h1 class="num1">1</h1>
        <h1 class="to_day_play">Всего игроков</h1>
        <h1 class="num2">1</h1>
        <h1 class="full">всего игр за сегодня</h1>
        <h1 class="num3">0</h1>
        <h1 class="to_win">Выиграно сегодня</h1>
        <h1 class="num4">0</h1>
      </div>
      <div class="back-to-top-wrapper">
        <a href="#top" class="back-to-top-link" aria-label="Scroll to Top">?</a>
      </div>
    </div>
  </div>
</body>

</html>