Tic Tac Toe before refactoring

tictactoe_before_refactor.js

var boxes = document.querySelectorAll('.box');
var gamestatus = { 1: '', 2: '', 3: '', 4: '', 5: '', 6: '', 7: '', 8: '', 9: '' };
var seq = [];
var seq_x = [];
var seq_o = [];
var gameEnd = false;

var $ = el => document.querySelector(el);

function changed(el) {
  if (el.checked) {
    el.disabled = true;
    let n = parseInt(el.getAttribute('data-num'));
    gamestatus[n] = 'X';
    seq.push(n);
    seq_x.push(n);
    checkWin();
    if (seq.length < 9 && !gameEnd) {
      addCircle();
    }
  }
}

function checkWin() {
  if ( (seq_x.includes(1) && seq_x.includes(2) && seq_x.includes(3)) ||
       (seq_x.includes(4) && seq_x.includes(5) && seq_x.includes(6)) ||
       (seq_x.includes(7) && seq_x.includes(8) && seq_x.includes(9)) ||
       (seq_x.includes(1) && seq_x.includes(4) && seq_x.includes(7)) ||
       (seq_x.includes(2) && seq_x.includes(5) && seq_x.includes(8)) ||
       (seq_x.includes(3) && seq_x.includes(6) && seq_x.includes(9)) ||
       (seq_x.includes(1) && seq_x.includes(5) && seq_x.includes(9)) ||
       (seq_x.includes(3) && seq_x.includes(5) && seq_x.includes(7)) ) {
    // win
    for (let i = 0; i < boxes.length; i++) {
      boxes[i].querySelector('input').disabled = true;
    }
    $('.msg').style.display = 'block';
    $('.win').classList.add('show');
    gameEnd = true;
  } else if ( (seq_o.includes(1) && seq_o.includes(2) && seq_o.includes(3)) ||
       (seq_o.includes(4) && seq_o.includes(5) && seq_o.includes(6)) ||
       (seq_o.includes(7) && seq_o.includes(8) && seq_o.includes(9)) ||
       (seq_o.includes(1) && seq_o.includes(4) && seq_o.includes(7)) ||
       (seq_o.includes(2) && seq_o.includes(5) && seq_o.includes(8)) ||
       (seq_o.includes(3) && seq_o.includes(6) && seq_o.includes(9)) ||
       (seq_o.includes(1) && seq_o.includes(5) && seq_o.includes(9)) ||
       (seq_o.includes(3) && seq_o.includes(5) && seq_o.includes(7)) ) {
    // win
    for (let i = 0; i < boxes.length; i++) {
      boxes[i].querySelector('input').disabled = true;
    }
    $('.msg').style.display = 'block';
    $('.lost').classList.add('show');
    gameEnd = true;
  } else if (seq.length == 9) {
    $('.msg').style.display = 'block';
    $('.draw').classList.add('show');
  }
}

function addCircle() {  
  var tar = Math.ceil(Math.random()*9);
  while (seq.includes(tar)) {
    tar = Math.ceil(Math.random()*9);
  }
  if (!$('.tic-tac-toe').classList.contains('easy')) {
    for (let x = 1; x < 10; x++) {
      if (seq_x.includes(x) && seq_x.includes(x+1)) {
        // x x _ / _ x x
        if (x == 1 || x == 4 || x == 7) {
          if (xo_includes(x+2)) {
            tar = x+2;
          }
        } else if (x == 2 || x == 5 || x == 8) {
          if (xo_includes(x-1)) {
            tar = x-1;
          }
        }
      }
      if (seq_x.includes(x) && seq_x.includes(x+2) && (x == 1 || x == 4 || x == 7)) {
        // x _ x
        if (xo_includes(x+1)) {
          tar = x+1;
        }
      }
      if (seq_x.includes(x) && seq_x.includes(x+3) && x <= 6) {
        // x _ _ / _ x _ / _ _ x
        // x _ _ / _ x _ / _ _ x
        let _tar = x+6;
        if (x+6 > 9) {
          _tar = x-3;
        }
        if (xo_includes(_tar)) {
          tar = _tar;
        }
      }
      if ( (x == 1 && seq_x.includes(x) && seq_x.includes(5)) ||
           (x == 3 && seq_x.includes(x) && seq_x.includes(5)) ) {
        // x _ _ / _ _ x
        // _ x _ / _ x _
        // _ _ _ / _ _ _
        let _tar = (x == 1) ? 9 : 7;
        if (xo_includes(_tar)) {
          tar = _tar;
        }
      }
      if ( (x == 7 && seq_x.includes(x) && seq_x.includes(5)) ||
           (x == 9 && seq_x.includes(x) && seq_x.includes(5)) ) {
        // _ _ _ / _ _ _
        // _ x _ / _ x _
        // _ _ x / x _ _
        let _tar = (x == 7) ? 3 : 1;
        if (xo_includes(_tar)) {
          tar = _tar;
        }
      }
      if ($('.tic-tac-toe').classList.contains('impossible')) {   
        if (seq_x.includes(x) && seq_x.includes(x+6) && x <= 3) {
          // x _ _ / _ x _ / _ _ x
          // _ _ _ / _ _ _ / _ _ _
          // x _ _ / _ x _ / _ _ x
          let _tar = x+3;
          if (xo_includes(_tar)) {
            tar = _tar;
          }
        }   
        if ( (x == 1 && seq_x.includes(x) && seq_x.includes(x+8)) ||
             (x == 3 && seq_x.includes(x) && seq_x.includes(x+4)) ) {
          // x _ _ / _ _ x
          // _ _ _ / _ _ _
          // _ _ x / x _ _
          if (xo_includes(5)) {
            tar = 5;
          }
        }
      }
    }
  }
  xo_includes = _tar => !seq_o.includes(_tar) && !seq_x.includes(_tar);
  $('.overlay').classList.add('show');
  gamestatus[tar] = "O";
  seq.push(tar);
  seq_o.push(tar);
  setTimeout(()=> {    
    $('.box-'+tar).classList.add('show-circle');
    $('.box-'+tar).querySelector('input').disabled = true;
    $('.overlay').classList.remove('show');
    checkWin();
  }, 400);
}

function replay() {
  gamestatus = { 1: '', 2: '', 3: '', 4: '', 5: '', 6: '', 7: '', 8: '', 9: '' };
  seq = [];
  seq_x = [];
  seq_o = [];
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].querySelector('input').disabled = false;
    boxes[i].querySelector('input').checked = false;
    boxes[i].classList.remove('show-circle');
  }
  $('.msg').style.display = "none";
  $('.win').classList.remove('show');
  $('.lost').classList.remove('show');
  $('.draw').classList.remove('show');
  gameEnd = false;
}

lvl = idx => {
  let lvls = ['easy', 'normal', 'impossible'];
  lvls.forEach(level => {
    $('.tic-tac-toe').classList.remove(level);
    $('.controls .'+level).classList.remove('active');
  })
  $('.tic-tac-toe').classList.add(lvls[idx]);
  $('.controls .'+lvls[idx]).classList.add('active');
}