diff --git a/src/html/scripts/gamez/TTT/TTT.js b/src/html/scripts/gamez/TTT/TTT.js index ff5dbe9..e9343fa 100644 --- a/src/html/scripts/gamez/TTT/TTT.js +++ b/src/html/scripts/gamez/TTT/TTT.js @@ -10,6 +10,8 @@ vars.hoverColor2 = 'powderblue'; vars.pieceColor = vars.color1; vars.pieceHoverColor = vars.hoverColor1; vars.count = 0; +vars.gameStart = 1; +vars.isWin = false; //Sets array for Tic-Tac-Toe vars.board = [ @@ -20,15 +22,9 @@ vars.board = [ //Sets array for Tic-Tac-Toe² vars.board2 = [ - ['b','b','b','b','b','b','b','b','b'], - ['b','b','b','b','b','b','b','b','b'], - ['b','b','b','b','b','b','b','b','b'], - ['b','b','b','b','b','b','b','b','b'], - ['b','b','b','b','b','b','b','b','b'], - ['b','b','b','b','b','b','b','b','b'], - ['b','b','b','b','b','b','b','b','b'], - ['b','b','b','b','b','b','b','b','b'], - ['b','b','b','b','b','b','b','b','b'] + ['','',''], + ['','',''], + ['','',''] ]; //Button functionality for selecting Tic-Tac-Toe @@ -48,16 +44,28 @@ function selectTTT2() { startScreen.style.display = 'none'; vars.gameType = 2; + initBoard2(); drawBoard(); } +//Sets vars.board2 as an array of vars.board objects +function initBoard2() { + for (let i = 0;i < 3;i++) { + for (let j = 0;j < 3;j++) { + window['vars.board' + i + j] = JSON.parse(JSON.stringify(vars.board)); + vars.board2[i][j] = [...window['vars.board' + i + j]]; + } + } +} + //Draws the game board function drawBoard() { let boardCode = '' + '' + '' + '' - + ''; + + '' + + ' '; if (vars.gameType == 2) { boardCode += '' + '' @@ -101,29 +109,32 @@ function coordinate(event) { vars.pieceX = (vars.arrayX * 60) + 5; vars.pieceY = (vars.arrayY * 60) + 55; + let arrayX2 = vars.arrayX / 3; + let arrayY2 = vars.arrayY / 3; + vars.arrayX2 = Math.floor(arrayX2); + vars.arrayY2 = Math.floor(arrayY2); + + vars.pieceX2 = (vars.arrayX2 * 180) + 25; + vars.pieceY2 = (vars.arrayY2 * 180) + 160; + + vars.arrayX = vars.arrayX - (3 * vars.arrayX2); + vars.arrayY = vars.arrayY - (3 * vars.arrayY2); + document.getElementById("board").setAttribute('font-size', '70'); } + win(); hoverPiece(); } //Draws the piece when hovering over space function hoverPiece() { if (isLegal()) { - if (vars.gameType == 1) { - document.getElementById("pieceHover").setAttribute('x', vars.pieceX); - document.getElementById("pieceHover").setAttribute('y', vars.pieceY); - document.getElementById("pieceHover").setAttribute('fill', vars.pieceHoverColor); - document.getElementById("pieceHover").innerHTML = vars.pieceSVG; - } else { - document.getElementById("pieceHover").setAttribute('x', vars.pieceX); - document.getElementById("pieceHover").setAttribute('y', vars.pieceY); - document.getElementById("pieceHover").setAttribute('fill', vars.pieceHoverColor); - document.getElementById("pieceHover").innerHTML = vars.pieceSVG; - } + document.getElementById("pieceHover").setAttribute('x', vars.pieceX); + document.getElementById("pieceHover").setAttribute('y', vars.pieceY); + document.getElementById("pieceHover").setAttribute('fill', vars.pieceHoverColor); + document.getElementById("pieceHover").innerHTML = vars.pieceSVG; } - - } //Draws the piece @@ -134,16 +145,21 @@ function drawPiece() { //Performs functions when clicking function onClick() { + win(); if (isLegal()) { drawPiece(); setArray(); - if (!isWin()) { - pieceType(); - if (vars.gameType == 1) { - isFull(); - } + win(); + vars.tempArrX = vars.arrayX; + vars.tempArrY = vars.arrayY; + pieceType(); + if (vars.gameType == 1) { + isFull(); } + vars.gameStart = 0; } + + win(); } //Determines if board if full @@ -158,15 +174,19 @@ function isFull() { //Swaps the piece type after turns function pieceType() { - if (vars.pieceSVG == 'X') { - vars.pieceSVG = 'O'; - vars.pieceColor = vars.color2; - vars.pieceHoverColor = vars.hoverColor2; - } else { - vars.pieceSVG = 'X'; - vars.pieceColor = vars.color1; - vars.pieceHoverColor = vars.hoverColor1; + win(); + if (!vars.isWin) { + if (vars.pieceSVG == 'X') { + vars.pieceSVG = 'O'; + vars.pieceColor = vars.color2; + vars.pieceHoverColor = vars.hoverColor2; + } else { + vars.pieceSVG = 'X'; + vars.pieceColor = vars.color1; + vars.pieceHoverColor = vars.hoverColor1; + } } + } //Changes array value @@ -174,18 +194,25 @@ function setArray() { if (vars.gameType == 1) { vars.board[vars.arrayX][vars.arrayY] = vars.pieceSVG; } else { - vars.board2[vars.arrayX][vars.arrayY] = vars.pieceSVG; + vars.board2[vars.arrayY2][vars.arrayX2][vars.arrayY][vars.arrayX] = vars.pieceSVG; } } //Determines if move is legal function isLegal() { + win(); if (vars.gameType == 1) { - return Boolean(vars.board[vars.arrayX][vars.arrayY] == 'b' && !isWin()); + return Boolean(vars.board[vars.arrayX][vars.arrayY] == 'b' && vars.isWin != true); } else { - return Boolean(vars.board2[vars.arrayX][vars.arrayY] == 'b' && !isWin()); + isOpenSpace = Boolean(vars.board2[vars.arrayY2][vars.arrayX2][vars.arrayY][vars.arrayX] == 'b'); + if (vars.gameStart != 0 || (vars.board2[vars.tempArrY][vars.tempArrX] != 'X' && vars.board2[vars.tempArrY][vars.tempArrX] != 'O')) { + isMatchingGame = Boolean(vars.arrayX2 == vars.tempArrX && vars.arrayY2 == vars.tempArrY); + legalMove = Boolean((isOpenSpace && isMatchingGame) || vars.gameStart != 0); + } else { + legalMove = Boolean(isOpenSpace); + } + return Boolean(legalMove && vars.isWin != true); } - } //Erases board and says winner @@ -195,41 +222,118 @@ function drawWin() { document.getElementById("board").innerHTML = winCode; } +//Draws win of +function drawWin2() { + isFull(); + + overlayX = vars.pieceX2 - 23; + overlayY = vars.pieceY2 - 158; + + let win2 = '' + vars.pieceSVG + ''; + + document.getElementById("board2").insertAdjacentHTML("beforeend",win2); +} + //Determines if win -function isWin() { - if (vars.board[0][0] == vars.board[0][1] && vars.board[0][1] == vars.board[0][2] && vars.board[0][2] != 'b') { - vars.winPiece = vars.pieceSVG; - drawWin(); - return true; - } else if (vars.board[1][0] == vars.board[1][1] && vars.board[1][1] == vars.board[1][2] && vars.board[1][2] != 'b') { - vars.winPiece = vars.pieceSVG; - drawWin(); - return true; - } else if (vars.board[2][0] == vars.board[2][1] && vars.board[2][1] == vars.board[2][2] && vars.board[2][2] != 'b') { - vars.winPiece = vars.pieceSVG; - drawWin(); - return true; - } else if (vars.board[0][0] == vars.board[1][0] && vars.board[1][0] == vars.board[2][0] && vars.board[2][0] != 'b') { - vars.winPiece = vars.pieceSVG; - drawWin(); - return true; - } else if (vars.board[0][1] == vars.board[1][1] && vars.board[1][1] == vars.board[2][1] && vars.board[2][1] != 'b') { - vars.winPiece = vars.pieceSVG; - drawWin(); - return true; - } else if (vars.board[0][2] == vars.board[1][2] && vars.board[1][2] == vars.board[2][2] && vars.board[2][2] != 'b') { - vars.winPiece = vars.pieceSVG; - drawWin(); - return true; - } else if (vars.board[0][0] == vars.board[1][1] && vars.board[1][1] == vars.board[2][2] && vars.board[2][2] != 'b') { - vars.winPiece = vars.pieceSVG; - drawWin(); - return true; - } else if (vars.board[2][0] == vars.board[1][1] && vars.board[1][1] == vars.board[0][2] && vars.board[0][2] != 'b') { - vars.winPiece = vars.pieceSVG; - drawWin(); - return true; +function win() { + if (vars.gameType == 1) { + if (vars.board[0][0] == vars.board[0][1] && vars.board[0][1] == vars.board[0][2] && vars.board[0][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + } else if (vars.board[1][0] == vars.board[1][1] && vars.board[1][1] == vars.board[1][2] && vars.board[1][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + } else if (vars.board[2][0] == vars.board[2][1] && vars.board[2][1] == vars.board[2][2] && vars.board[2][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + } else if (vars.board[0][0] == vars.board[1][0] && vars.board[1][0] == vars.board[2][0] && vars.board[2][0] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + } else if (vars.board[0][1] == vars.board[1][1] && vars.board[1][1] == vars.board[2][1] && vars.board[2][1] ==vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + } else if (vars.board[0][2] == vars.board[1][2] && vars.board[1][2] == vars.board[2][2] && vars.board[2][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + } else if (vars.board[0][0] == vars.board[1][1] && vars.board[1][1] == vars.board[2][2] && vars.board[2][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + } else if (vars.board[2][0] == vars.board[1][1] && vars.board[1][1] == vars.board[0][2] && vars.board[0][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + } } else { - return false; + if (vars.board2[0][0] == vars.board2[0][1] && vars.board2[0][1] == vars.board2[0][2] && vars.board2[0][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + return; + } else if (vars.board2[1][0] == vars.board2[1][1] && vars.board2[1][1] == vars.board2[1][2] && vars.board2[1][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + return; + } else if (vars.board2[2][0] == vars.board2[2][1] && vars.board2[2][1] == vars.board2[2][2] && vars.board2[2][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + vars.isWin = true; + return; + } else if (vars.board2[0][0] == vars.board2[1][0] && vars.board2[1][0] == vars.board2[2][0] && vars.board2[2][0] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + return; + } else if (vars.board2[0][1] == vars.board2[1][1] && vars.board2[1][1] == vars.board2[2][1] && vars.board2[2][1] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + return; + } else if (vars.board2[0][2] == vars.board2[1][2] && vars.board2[1][2] == vars.board2[2][2] && vars.board2[2][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + return; + } else if (vars.board2[0][0] == vars.board2[1][1] && vars.board2[1][1] == vars.board2[2][2] && vars.board2[2][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + return; + } else if (vars.board2[2][0] == vars.board2[1][1] && vars.board2[1][1] == vars.board2[0][2] && vars.board2[0][2] == vars.pieceSVG) { + vars.winPiece = vars.pieceSVG; + drawWin(); + vars.isWin = true; + return; + } else if (vars.board2[vars.arrayY2][vars.arrayX2][0][0] == vars.board2[vars.arrayY2][vars.arrayX2][0][1] && vars.board2[vars.arrayY2][vars.arrayX2][0][1] == vars.board2[vars.arrayY2][vars.arrayX2][0][2] && vars.board2[vars.arrayY2][vars.arrayX2][0][2] != 'b' && vars.isWin != true) { + vars.board2[vars.arrayY2][vars.arrayX2] = vars.pieceSVG; + drawWin2(); + } else if (vars.board2[vars.arrayY2][vars.arrayX2][1][0] == vars.board2[vars.arrayY2][vars.arrayX2][1][1] && vars.board2[vars.arrayY2][vars.arrayX2][1][1] == vars.board2[vars.arrayY2][vars.arrayX2][1][2] && vars.board2[vars.arrayY2][vars.arrayX2][1][2] != 'b' && vars.isWin != true) { + vars.board2[vars.arrayY2][vars.arrayX2] = vars.pieceSVG; + drawWin2(); + } else if (vars.board2[vars.arrayY2][vars.arrayX2][2][0] == vars.board2[vars.arrayY2][vars.arrayX2][2][1] && vars.board2[vars.arrayY2][vars.arrayX2][2][1] == vars.board2[vars.arrayY2][vars.arrayX2][2][2] && vars.board2[vars.arrayY2][vars.arrayX2][2][2] != 'b' && vars.isWin != true) { + vars.board2[vars.arrayY2][vars.arrayX2] = vars.pieceSVG; + drawWin2(); + } else if (vars.board2[vars.arrayY2][vars.arrayX2][0][0] == vars.board2[vars.arrayY2][vars.arrayX2][1][0] && vars.board2[vars.arrayY2][vars.arrayX2][1][0] == vars.board2[vars.arrayY2][vars.arrayX2][2][0] && vars.board2[vars.arrayY2][vars.arrayX2][2][0] != 'b' && vars.isWin != true) { + vars.board2[vars.arrayY2][vars.arrayX2] = vars.pieceSVG; + drawWin2(); + } else if (vars.board2[vars.arrayY2][vars.arrayX2][0][1] == vars.board2[vars.arrayY2][vars.arrayX2][1][1] && vars.board2[vars.arrayY2][vars.arrayX2][1][1] == vars.board2[vars.arrayY2][vars.arrayX2][2][1] && vars.board2[vars.arrayY2][vars.arrayX2][2][1] != 'b' && vars.isWin != true) { + vars.board2[vars.arrayY2][vars.arrayX2] = vars.pieceSVG; + drawWin2(); + } else if (vars.board2[vars.arrayY2][vars.arrayX2][0][2] == vars.board2[vars.arrayY2][vars.arrayX2][1][2] && vars.board2[vars.arrayY2][vars.arrayX2][1][2] == vars.board2[vars.arrayY2][vars.arrayX2][2][2] && vars.board2[vars.arrayY2][vars.arrayX2][2][2] != 'b' && vars.isWin != true) { + vars.board2[vars.arrayY2][vars.arrayX2] = vars.pieceSVG; + drawWin2(); + } else if (vars.board2[vars.arrayY2][vars.arrayX2][0][0] == vars.board2[vars.arrayY2][vars.arrayX2][1][1] && vars.board2[vars.arrayY2][vars.arrayX2][1][1] == vars.board2[vars.arrayY2][vars.arrayX2][2][2] && vars.board2[vars.arrayY2][vars.arrayX2][2][2] != 'b' && vars.isWin != true) { + vars.board2[vars.arrayY2][vars.arrayX2] = vars.pieceSVG; + drawWin2(); + } else if (vars.board2[vars.arrayY2][vars.arrayX2][2][0] == vars.board2[vars.arrayY2][vars.arrayX2][1][1] && vars.board2[vars.arrayY2][vars.arrayX2][1][1] == vars.board2[vars.arrayY2][vars.arrayX2][0][2] && vars.board2[vars.arrayY2][vars.arrayX2][0][2] != 'b' && vars.isWin != true) { + vars.board2[vars.arrayY2][vars.arrayX2] = vars.pieceSVG; + drawWin2(); + } } } \ No newline at end of file