wdi-sg · clairetay96 · Aug 13, 2020 · Aug 13, 2020 · Aug 13, 2020
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Tic Tac Toe</title>
+    <link href="style.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Pangolin&display=swap" rel="stylesheet">
+</head>
+<body>
+
+    <div class="user-input">
+        <div class="player-input">
+            <label for="player1-name">Player 1 name:</label>
+            <input type="text" id="player1-name" placeholder="Player 1 name" value="Player 1"><br>
+            <label for="player2-symbol">Player 1 symbol:</label>
+            <input type="text" id="player1-symbol" placeholder="Player 1 symbol" value="X">
+        </div>
+        <div class="player-input">
+            <label for="player2-name">Player 2 name:</label>
+            <input type="text" id="player2-name" placeholder="Player 2 name" value="Player 2"><br>
+            <label for="player2-symbol">Player 2 symbol:</label>
+            <input type="text" id="player2-symbol" placeholder="Player 2 symbol" value="O">
+        </div>
+        <br>
+        <label for="board-size">Board Size:</label>
+        <input type="number" id="board-size" placeholder="Board Size" max="6" min="2" value="3">
+        <br>
+        <button id="start">Click here to start playing!</button>
+    </div>
+
+    <div class="turn-tracker"></div>
+    <div class="timer"></div>
+
+    <div class="ttt-board">
+    </div>
+
+    <div class="result"></div>
+    <div class="win-tracker">
+        <div class="player1-wins"></div>
+        <div class="player2-wins"></div>
+    </div>
+
+    <script src="script.js"></script>
+
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,285 @@
+
+//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
+
+document.querySelector(".ttt-board").classList.add("hide")
+
+//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;i<boardSize;i++){
+        emptyBoard.push(new Array(boardSize).fill(null))
+    }
+    board = emptyBoard
+
+    for(i=0;i<boardSize;i++){
+        var newRow = document.createElement("div")
+        newRow.className = "ttt-row"
+        for(j=0;j<boardSize;j++){
+            var newTile = document.createElement("div")
+            newTile.className = "tile"
+            newTile.id = i.toString() + j.toString()
+            newRow.appendChild(newTile)
+        }
+        document.querySelector(".ttt-board").appendChild(newRow)
+    }
+
+    var tiles = document.querySelectorAll(".tile")
+    tiles.forEach(function(item, index){
+        item.addEventListener("click", claimTile)
+
+    })
+}
+
+
+//when start button is clicked, all input values are assigned to global variables, board initialised.
+var startGame = function(){
+
+    document.querySelector(".result").innerText = ''
+
+    player1Name = document.querySelector("#player1-name").value
+    player1Symbol = document.querySelector("#player1-symbol").value
+    player2Name = document.querySelector("#player2-name").value
+    player2Symbol = document.querySelector("#player2-symbol").value
+    boardSize = parseInt(document.querySelector("#board-size").value)
+    finalInd = boardSize - 1
+
+    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)
+
+
+//fills tile, updates board and checks if there's been a winner - delivers some output based on winner.
+var claimTile = function(){
+    if (this.innerText){
+        return
+    } else if (state=="X"){
+        this.innerText = player1Symbol
+        this.style.backgroundColor = "lightblue"
+        updateBoard(this)
+        if(checkWinner()){
+            winOutput()
+        } else if(checkDraw()){
+            drawOutput()
+        } else {
+            document.querySelector(".turn-tracker").innerText = `${player2Name}'s turn`
+            endTimer()
+            startTimer()
+            state="O"
+        }
+
+    } else if (state=="O"){
+        this.innerText = player2Symbol
+        this.style.backgroundColor = "lightgreen"
+        updateBoard(this)
+        if(checkWinner()){
+            winOutput()
+        } else if(checkDraw()){
+            drawOutput()
+        } else {
+            document.querySelector(".turn-tracker").innerText = `${player1Name}'s turn`
+            endTimer()
+            startTimer()
+            state="X"
+
+        }
+
+    }
+}
+
+//checks if any of the winning conditions are satisfied - returns true if there is a winner.
+var checkWinner = function(){
+    var rows = false;
+    var columns = false;
+    var diagonals = false;
+
+    //check rows - check if all values in the row array are the same
+    for(i=0;i<boardSize;i++){
+        if(board[i].every((value, index, arr)=>value&&value==arr[0])){
+            rows = true
+        }
+    }
+    //check columns
+    for(i=0;i<boardSize;i++){
+        var head = board[0][i]
+        j = 1
+        while(j<boardSize){
+            curr = board[j][i]
+            if(curr==null||curr!==head){
+               break
+            }
+            j++
+        }
+        if(j==boardSize){
+            columns = true
+        }
+    }
+    //check diagonals - executes if either top corners are filled
+    if(board[0][0]){
+        var xInd = 0
+        var yInd = 0
+        while(xInd < boardSize && yInd < boardSize){
+            if (board[0][0]!==board[xInd][yInd]){
+                break
+            }
+            xInd += 1
+            yInd += 1
+        }
+        if(xInd==boardSize){
+            diagonals = true
+        }
+    }
+    if(board[0][finalInd]){
+        var xInd = 0
+        var yInd = finalInd
+        while(xInd<boardSize&&yInd>=0){
+            if(board[0][finalInd]!=board[xInd][yInd]){
+                break
+            }
+            xInd += 1
+            yInd -= 1
+        }
+        if(xInd==boardSize){
+            diagonals = true
+        }
+    }
+    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++
+        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!"
+}
+
+
+//checks if all the squares are filled ie a draw
+function checkDraw(){
+    for(i=0;i<board.length;i++){
+        if(board[i].includes(null)){
+            return false
+        }
+    }
+    return true
+}
+
+
+//output when it's a draw
+function drawOutput(){
+    endTimer()
+    document.querySelector(".result").innerText = `It's a draw!`
+    document.querySelector(".user-input").classList.remove("hide")
+    document.querySelector("#start").innerText = "Play again!"
+}
+
+//Timer functions
+
+//global variables for countdown and countdown interval
+var totalCountdown;
+var countdownInterval;
+
+//starts timer, executes random choice when time runs out
+var startTimer = function(){
+    counter = 3
+    countdown()
+    countdownInterval = setInterval(countdown, 1000)
+    totalCountdown = setTimeout(function(){
+        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"
+            }
+        }
+    }, counter*1000)
+
+    function countdown(){
+        document.querySelector(".timer").innerText = `Time left: ${counter}`
+        counter--
+    }
+}
+
+//ends timer
+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"
+        }
+    }
+}