Skip to content

Instantly share code, notes, and snippets.

@fionnachan
Created February 24, 2019 10:01
Show Gist options
  • Save fionnachan/6b36c6338c9867a84512aad4af614ef1 to your computer and use it in GitHub Desktop.
Save fionnachan/6b36c6338c9867a84512aad4af614ef1 to your computer and use it in GitHub Desktop.
Tic Tac Toe before refactoring
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');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment