From c854bc684af03ae7fbb58e2c246bb705da97dbd4 Mon Sep 17 00:00:00 2001 From: clairetay96 Date: Thu, 13 Aug 2020 22:01:17 +0800 Subject: [PATCH 1/3] Ok up to here --- index.html | 41 +++++++++++ script.js | 211 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 35 +++++++++ 3 files changed, 287 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..0de722e --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + Tic Tac Toe + + + + +
+ + + + +
+ + + + +
+ + +
+ +
+ +
+
+ +
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..caf1350 --- /dev/null +++ b/script.js @@ -0,0 +1,211 @@ + +//defining global variables +var state = "X" +var boardSize = 3 +var finalInd = boardSize-1 +var player1Name = null +var player1Symbol = "X" +var player2Name = null +var player2Symbol = "O" +var emptyBoard = [] +var board = [] +var player1Wins = 0 +var player2Wins = 0 + + + +//function to initialise empty matrix and DOM tile elements called when user inputs boardSize +var initEmptyGrid = function(){ + document.querySelector(".ttt-board").innerHTML = "" + board = [] + emptyBoard =[] + for(i=0;ivalue&&value==arr[0])){ + rows = true + } + } + //check columns + for(i=0;i=0){ + if(board[0][finalInd]!=board[xInd][yInd]){ + break + } + xInd += 1 + yInd -= 1 + } + if(xInd==boardSize){ + diagonals = true + } + } + return diagonals || rows || columns +} + +var updateBoard = function(element){ + var firstIndex = parseInt(element.id[0]) + var secondIndex = parseInt(element.id[1]) + board[firstIndex][secondIndex] = state +} + +function winOutput(){ + //say who wins + if(state=="X"){ + player1Wins++ + var winner = player1Name + var loser = player2Name + state = "O" + } else if (state=="O"){ + player2Wins++ + var winner = player2Name + var loser = player1Name + state = "X" + } + document.querySelector(".result").innerText = `Congratulations, ${winner}! You win.\n${loser}, better luck next time.` + + + //update winCount DOM + document.querySelector(".player1-wins").innerHTML = `${player1Name} wins: ${player1Wins}` + document.querySelector(".player2-wins").innerHTML = `${player2Name} wins: ${player2Wins}` + + //Reset Game + document.querySelector(".user-input").classList.remove("hide") + document.querySelector("#start").innerText = "Play again!" +} + +function checkDraw(){ + for(i=0;i Date: Thu, 13 Aug 2020 23:16:10 +0800 Subject: [PATCH 2/3] added timer functionality --- index.html | 22 +++++++++++--------- script.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++---- style.css | 59 ++++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 117 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 0de722e..d3904f6 100644 --- a/index.html +++ b/index.html @@ -3,19 +3,23 @@ Tic Tac Toe +
- - - - -
- - - - +
+ +
+ + +
+
+ +
+ + +

diff --git a/script.js b/script.js index caf1350..fc2c50c 100644 --- a/script.js +++ b/script.js @@ -12,7 +12,7 @@ var board = [] var player1Wins = 0 var player2Wins = 0 - +document.querySelector(".ttt-board").classList.add("hide") //function to initialise empty matrix and DOM tile elements called when user inputs boardSize var initEmptyGrid = function(){ @@ -39,6 +39,7 @@ var initEmptyGrid = function(){ var tiles = document.querySelectorAll(".tile") tiles.forEach(function(item, index){ item.addEventListener("click", claimTile) + }) } @@ -57,15 +58,17 @@ var startGame = function(){ initEmptyGrid() + //displays whose turn it is in turn tracker if(state=="X"){ document.querySelector(".turn-tracker").innerText = `${player1Name}'s turn` }else if(state=="O"){ document.querySelector(".turn-tracker").innerText = `${player2Name}'s turn` } - - - + //hides input field, shows the tictactoe board + document.querySelector(".ttt-board").classList.remove("hide") document.querySelector(".user-input").classList.add("hide") + //timer starts once start button is clicked + startTimer() } document.querySelector("#start").addEventListener("click", startGame) @@ -85,6 +88,8 @@ var claimTile = function(){ drawOutput() } else { document.querySelector(".turn-tracker").innerText = `${player2Name}'s turn` + endTimer() + startTimer() state="O" } @@ -98,6 +103,8 @@ var claimTile = function(){ drawOutput() } else { document.querySelector(".turn-tracker").innerText = `${player1Name}'s turn` + endTimer() + startTimer() state="X" } @@ -164,13 +171,16 @@ var checkWinner = function(){ return diagonals || rows || columns } +//updates the js matrix board var updateBoard = function(element){ var firstIndex = parseInt(element.id[0]) var secondIndex = parseInt(element.id[1]) board[firstIndex][secondIndex] = state } +//if there is a win, this is the output function winOutput(){ + endTimer() //say who wins if(state=="X"){ player1Wins++ @@ -195,6 +205,8 @@ function winOutput(){ document.querySelector("#start").innerText = "Play again!" } + +//checks if all the squares are filled ie a draw function checkDraw(){ for(i=0;i Date: Thu, 13 Aug 2020 23:33:19 +0800 Subject: [PATCH 3/3] assignment complete --- script.js | 41 ++++++++++++++++++++++++++++++++++------- 1 file changed, 34 insertions(+), 7 deletions(-) diff --git a/script.js b/script.js index fc2c50c..8deefc4 100644 --- a/script.js +++ b/script.js @@ -231,18 +231,27 @@ function drawOutput(){ var totalCountdown; var countdownInterval; -//starts timer +//starts timer, executes random choice when time runs out var startTimer = function(){ - counter = 8 + counter = 3 countdown() countdownInterval = setInterval(countdown, 1000) totalCountdown = setTimeout(function(){ - if(state=="X"){ - state="O" - } else if (state=="O"){ - state="O" + randomChoice() + if(checkWinner()){ + winOutput() + } else if(checkDraw()){ + drawOutput() + } else { + document.querySelector(".turn-tracker").innerText = `${player2Name}'s turn` + endTimer() + startTimer() + if(state=="X"){ + state="O" + } else if(state=="O"){ + state="X" + } } - winOutput() }, counter*1000) function countdown(){ @@ -255,4 +264,22 @@ var startTimer = function(){ var endTimer = function(){ clearTimeout(totalCountdown) clearInterval(countdownInterval) +} + +var randomChoice = function(){ + var randi = Math.floor(Math.random()*boardSize) + var randj = Math.floor(Math.random()*boardSize) + if(board[randi][randj]!==null){ + randomChoice() + } else { + board[randi][randj]=state + var tileId = randi.toString() + randj.toString() + if(state=="X"){ + document.getElementById(tileId).innerText = player1Symbol + document.getElementById(tileId).style.backgroundColor = "lightblue" + } else if (state=="O"){ + document.getElementById(tileId).innerText = player2Symbol + document.getElementById(tileId).style.backgroundColor = "lightgreen" + } + } } \ No newline at end of file