如何在javascript中将条件语句添加到-tic-tac-toe game tie函数？

Question

问题是，如果所有单元格都被拿走了，但有人在最后一步赢了，井字棋这个问题不应该返回一个赢家。但如果最后一个方格是获胜标记，它将返回平局。

我尝试添加一个条件语句，但它不起作用。

if (emptySquares().length==0 && gameWon.player != hplayer || gameWon.player != ailayer)

任何人都可以向我展示任何条件语句。

Answer 1

试试这个，我引入了一个新的布尔变量this.winner作为 false 并在checkTie()函数中检查它。在gameOver()函数中，我将该变量设为 trueclass Stopwatch {&nbsp; &nbsp; constructor(display, results) {&nbsp; &nbsp; &nbsp; &nbsp; this.running = false;&nbsp; &nbsp; &nbsp; &nbsp; this.display = display;&nbsp; &nbsp; &nbsp; &nbsp; this.results = results;&nbsp; &nbsp; &nbsp; &nbsp; this.laps = [];&nbsp; &nbsp; &nbsp; &nbsp; this.winner = false;&nbsp; &nbsp; &nbsp; &nbsp; this.reset();&nbsp; &nbsp; &nbsp; &nbsp; this.print(this.times);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; reset() {&nbsp; &nbsp; &nbsp; &nbsp; this.times = [ 0, 0, 0 ];&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; start() {&nbsp; &nbsp; &nbsp; &nbsp; if (!this.time) this.time = performance.now();&nbsp; &nbsp; &nbsp; &nbsp; if (!this.running) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.running = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; requestAnimationFrame(this.step.bind(this));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; restart() {&nbsp; &nbsp; &nbsp; &nbsp; if (!this.time) this.time = performance.now();&nbsp; &nbsp; &nbsp; &nbsp; if (!this.running) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.running = true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; requestAnimationFrame(this.step.bind(this));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; this.reset();&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; step(timestamp) {&nbsp; &nbsp; &nbsp; &nbsp; if (!this.running) return;&nbsp; &nbsp; &nbsp; &nbsp; this.calculate(timestamp);&nbsp; &nbsp; &nbsp; &nbsp; this.time = timestamp;&nbsp; &nbsp; &nbsp; &nbsp; this.print();&nbsp; &nbsp; &nbsp; &nbsp; requestAnimationFrame(this.step.bind(this));&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; calculate(timestamp) {&nbsp; &nbsp; &nbsp; &nbsp; var diff = timestamp - this.time;&nbsp; &nbsp; &nbsp; &nbsp; // Hundredths of a second are 100 ms&nbsp; &nbsp; &nbsp; &nbsp; this.times[2] += diff / 10;&nbsp; &nbsp; &nbsp; &nbsp; // Seconds are 100 hundredths of a second&nbsp; &nbsp; &nbsp; &nbsp; if (this.times[2] >= 100) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.times[1] += 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.times[2] -= 100;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // Minutes are 60 seconds&nbsp; &nbsp; &nbsp; &nbsp; if (this.times[1] >= 60) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.times[0] += 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.times[1] -= 60;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; print() {&nbsp; &nbsp; &nbsp; &nbsp; this.display.innerText = this.format(this.times);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; format(times) {&nbsp; &nbsp; &nbsp; &nbsp; return `\${pad0(times[0], 2)}:\${pad0(times[1], 2)}:\${pad0(Math.floor(times[2]), 2)}`;&nbsp; &nbsp; }}function pad0(value, count) {&nbsp; &nbsp; var result = value.toString();&nbsp; &nbsp; for (; result.length < count; --count)&nbsp; &nbsp; &nbsp; &nbsp; result = '0' + result;&nbsp; &nbsp; return result;}function clearChildren(node) {&nbsp; &nbsp; while (node.lastChild)&nbsp; &nbsp; &nbsp; &nbsp; node.removeChild(node.lastChild);}let stopwatch = new Stopwatch(&nbsp; &nbsp; document.querySelector('.stopwatch'),&nbsp; &nbsp; document.querySelector('.results'));// @@@ TIC_TAC_TOE @@@@var board;const hplayer ="0"; //human playerconst aiplayer ="x"; //machine playerconst wincom = // DEACLARE WINING COMBINATIONS[&nbsp; &nbsp; [0,1,2],&nbsp; &nbsp; [3,4,5],&nbsp; &nbsp; [6,7,8],&nbsp; &nbsp; [0,3,6],&nbsp; &nbsp; [1,4,7],&nbsp; &nbsp; [2,5,8],&nbsp; &nbsp; [0,4,8],&nbsp; &nbsp; [6,4,2],]//GET ALL INSIDE THE CELL CLASSconst cells = document.querySelectorAll('.cell');startGame();stopwatch.start();var mySound; //VARIABLE FOR SOUNDS&nbsp;function startGame(){&nbsp; &nbsp; // AT THE GAME END DISPLAY NONE&nbsp; &nbsp; document.querySelector(".endgame").style.display = "none";&nbsp; &nbsp; // CREATE ARRAYS FOR 9 BORD ELEMENTS&nbsp; &nbsp; board = Array.from(Array(9).keys());&nbsp; &nbsp; //CLEAR BOARD AFTER WINNING&nbsp;&nbsp; &nbsp; for (var i = 0; i <cells.length; i++)&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; cells[i].innerText =''; // CLEAR CELLS&nbsp; &nbsp; &nbsp; &nbsp; cells[i].style.removeProperty('background-color'); //REMOVE WINING HIGHLIGHT COLOR FROM BOARD AND ASSIGN TO BACKGROUND COLOR&nbsp; &nbsp; &nbsp; &nbsp; cells[i].addEventListener('click', turnClick, false); // CALL CLICK&nbsp; &nbsp; &nbsp; &nbsp; mySound = new sound("bounce.mp3");&nbsp; &nbsp; }&nbsp;&nbsp;}function turnClick(square){&nbsp; &nbsp; // GENARATE&nbsp; TARGET CELL NUMBER USING HUMAN PLAYER CLICK EVENT&nbsp; &nbsp; //console.log(square.target.id, hplayer)&nbsp; &nbsp; if (typeof board[square.target.id] == 'number') {// DISABLE OTHER CELLS&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; turn(square.target.id, hplayer)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!checkTie()) turn(bestSpot(), aiplayer);&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;}function turn(squareId, player){&nbsp; &nbsp; board[squareId] =&nbsp; player; // SHOW PLAYER AND SQUARE ID WHICH IS PLAYER CLICKED&nbsp; &nbsp; if(squareId)&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(squareId).innerText = player;&nbsp; &nbsp; let gameWon = checkWin(board, player) //GAME WON PLAYER AND BOARD CELLS&nbsp; &nbsp; if (gameWon) {&nbsp; &nbsp; &nbsp; &nbsp; this.winner = true;&nbsp; &nbsp; &nbsp; &nbsp; gameOver (gameWon) // IF GAME WON CALL GAMEOVER FUNCTION WITH GAMEWON VARIABLE&nbsp; &nbsp; }}function checkWin(board, player)&nbsp;{&nbsp; &nbsp;&nbsp; &nbsp; // TAKE ARRAY AND ADD THE INDEX TOO THE ARRAY, IDENTIFY EVERY INDEX OF PLAYER CLICKED&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; //check all the spots on the board played (e = elements , i = array, a = qemulator)&nbsp; &nbsp; let plays = board.reduce((a, e, i) =>&nbsp; &nbsp; &nbsp; &nbsp; (e===player) ? a.concat(i) : a, []);&nbsp; &nbsp; // SET GAME WON NULL DROW NO WINS&nbsp;&nbsp; &nbsp; let gameWon = null;&nbsp; &nbsp; //CHECK IF GAME HAS BEEN WON&nbsp; &nbsp; &nbsp; &nbsp; for(let[index, win] of wincom.entries()) //GET INDEX AND WIN&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // CHECK IF THE PLAYER CLICK TO THE ANY WINING ELEMENTS IN WINING COMBINATION&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (win.every(elem=>plays.indexOf(elem) >-1))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // WIHICH PLAYER WON ? AND WINING INDEX ?&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gameWon = {index: index, player:player};&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break; // BREAK FUNCTION&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }return gameWon; //IF WON GAME WON RETURN OR NOT RETURN GAME WON NULL}function gameOver(gameWon){&nbsp; &nbsp; for (let index of wincom[gameWon.index]) // INDEX OF WINNING COMBINATION WHICH PLAYER HAS CLICKED&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById(index).style.backgroundColor =&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gameWon.player == hplayer ? "red": "blue"; // IF THE PLAYER WHO WON HUMAN PLAYER INDEX OF WINING COMBINATIONS BECOME BLUE OR AI PLAYER INDEX BECOME RED&nbsp; &nbsp; }&nbsp; &nbsp; for (var i = 0; i < cells.length; i++) // check if available spots length is more than to 0&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; cells[i].removeEventListener('click', turnClick, false); // DISABLE CELLS CLICKING AFTER WINING REMOVE CLICK&nbsp; &nbsp; }&nbsp; &nbsp; declareWinner(gameWon.player == hplayer ? "YOU WON!!" : "YOU LOSS!!");&nbsp; &nbsp; stopwatch.running = false;&nbsp; &nbsp; stopwatch.time = null;}function declareWinner(who){&nbsp; &nbsp; document.querySelector(".endgame").style.display = "block";&nbsp; &nbsp; document.querySelector(".endgame .text").innerText = who;}function emptySquares(){&nbsp; &nbsp; // fillter every element in the board to see if the type of the elemnts eqales to number&nbsp; &nbsp; return board.filter(s => typeof s == 'number');&nbsp;&nbsp; &nbsp; //if type of is a number return the number}function bestSpot(){&nbsp; &nbsp; return minimax(board, aiplayer).index;&nbsp; &nbsp; //RETURNS THE CALLING OF MINIMAX FUNCTION PASSING BOARD AND AI PLAYER AND GET INDEX OF COMPUTER PLAYING&nbsp;}function checkTie(){&nbsp; &nbsp; if(emptySquares().length == 0 && !this.winner) // EVERY SQUARE FILLED UP *NO WINNER*&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < cells.length;i++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cells[i].style.backgroundColor = "#1a0033"; // ALL CELLS GREEN&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cells[i].removeEventListener('click', turnClick,false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stopwatch.running = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stopwatch.time = null;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; declareWinner("Game Tie !! ")&nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return false;}// minimax find a optimal move for player&nbsp;function minimax(newboard, player) // CREATE MINIMAX FUNCTION USING NEWBORD AND PLAYER ARGUMENT&nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; var avaSpots = emptySquares(); // check available spots of the board (Empty squares)&nbsp; &nbsp; if (checkWin(newboard, player)) //if checking someone winning states&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; return{score: -10}; // if human player wins return -10&nbsp; &nbsp; }&nbsp; &nbsp; else if (checkWin(newboard, aiplayer)) // if AI player wins return +10&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; return{score: 10};&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;else if (avaSpots.length === 0) // if no available spots(0), game tie, then return 0&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; return {score: 0};&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;var moves =[];//ARRAY MOVES to collect scores&nbsp; &nbsp; &nbsp;for(var i = 0; i < avaSpots.length; i++) // check array available spots length morethan to 0&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; var move&nbsp; = {}; // create moves object to catch available spots&nbsp; &nbsp; &nbsp; &nbsp; move.index = newboard[avaSpots[i]]; //set the index number of the available spots to the move object property&nbsp; &nbsp; &nbsp; &nbsp; newboard[avaSpots[i]] = player; // set the available spots for the current player&nbsp; &nbsp; &nbsp; &nbsp; if (player == aiplayer)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var result = minimax(newboard, hplayer); //call minimax for human player&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; move.score = result.score;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var result = minimax (newboard, aiplayer);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; move.score = result.score;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; //minimax reset newboard and push the move object to moves array&nbsp; &nbsp; &nbsp; &nbsp; newboard[avaSpots[i]] = move.index;&nbsp; &nbsp; &nbsp; &nbsp; moves.push(move);&nbsp; &nbsp; &nbsp; &nbsp; mySound.play();&nbsp; &nbsp; &nbsp;}&nbsp;&nbsp; &nbsp; // check the best move in the move arrray&nbsp; &nbsp; var bestMove;&nbsp; &nbsp; if(player === aiplayer)//should chose with the highst score when AI play&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; var bestScore = -10000;&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i < moves.length; i++)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (moves[i].score > bestScore) //store highst score&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bestScore = moves[i].score;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bestMove = i;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; else&nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; var bestScore = 10000;&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i < moves.length; i++)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(moves[i].score < bestScore)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bestScore = moves[i].score; // store lowest score&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bestMove = i;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;return moves[bestMove]; //return object store inside the bestmove}&nbsp;function sound(src) {&nbsp; &nbsp; this.sound = document.createElement("audio");&nbsp; &nbsp; this.sound.src = src;&nbsp; &nbsp; this.sound.setAttribute("preload", "auto");&nbsp; &nbsp; this.sound.setAttribute("controls", "none");&nbsp; &nbsp; this.sound.style.display = "none";&nbsp; &nbsp; document.body.appendChild(this.sound);&nbsp; &nbsp; this.play = function(){&nbsp; &nbsp; &nbsp; &nbsp; this.sound.play();&nbsp; &nbsp; }&nbsp; &nbsp; this.stop = function(){&nbsp; &nbsp; &nbsp; &nbsp; this.sound.pause();&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;}body{&nbsp; &nbsp; background-image: url(background.jpg);}table{&nbsp; margin-top: 80px;&nbsp; background: transparent;&nbsp;&nbsp; box-shadow: 0px 0px 0px 0px #393d44;}td{&nbsp; &nbsp; height: 130px;&nbsp; &nbsp; width: 120px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; vertical-align: middle;&nbsp; &nbsp; font-family: "Bradley Hand ITC";&nbsp; &nbsp; color: red;&nbsp; &nbsp; padding: 10px;&nbsp; &nbsp; font-size: 70px;&nbsp; &nbsp; cursor: pointer;}table tr:first-child{&nbsp; box-shadow:0px 8px 5px -5px blue;}table tr:nth-child(2){&nbsp; box-shadow:0px -8px 5px -5px blue&nbsp; &nbsp; &nbsp; &nbsp; , 0px 8px 5px -5px blue;}table tr:last-child{&nbsp; box-shadow:0px -8px 5px -5px blue;&nbsp;&nbsp;}table tr td:first-child{&nbsp; box-shadow:8px 0px 5px -5px blue;&nbsp;&nbsp;}table tr td:nth-child(2){&nbsp; box-shadow:-8px 0px 5px -5px blue&nbsp; &nbsp; &nbsp; &nbsp; , 8px 0px 5px -5px blue;}table tr td:last-child{&nbsp; box-shadow:-8px 0px 5px -5px blue;&nbsp;&nbsp;}.endgame{&nbsp; &nbsp; display: none;&nbsp; &nbsp; width: 300px;&nbsp; &nbsp; top: 100px;&nbsp; &nbsp; background-color: rgba(70, 80, 120, 0.66);&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 645px;&nbsp; &nbsp; margin-left: -112px;&nbsp; &nbsp; margin-top: 10%;&nbsp; &nbsp; padding-bottom: 0px;&nbsp; &nbsp; padding-top: 20px;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; border-radius: 5px;&nbsp; &nbsp; color: #f9f1f1;&nbsp; &nbsp; font-background: #0C3F6F !important;&nbsp;&nbsp; &nbsp; font-size:45px;&nbsp; &nbsp; font-family: monospace;}.button&nbsp;&nbsp;{&nbsp; &nbsp; height:35px;&nbsp; &nbsp; background-color: #e0f1ed2e;&nbsp; &nbsp; color: white;&nbsp; &nbsp; border:none;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; margin-bottom:20px;&nbsp; &nbsp; margin-top: 20px;&nbsp; &nbsp; font-size: 25px;&nbsp; &nbsp; transition: 0.3s;&nbsp; &nbsp; font-family: monospace;&nbsp; &nbsp;&nbsp;}.button:hover&nbsp;{&nbsp; &nbsp; opacity: 1;&nbsp; &nbsp; background-color: coral;}a&nbsp;{&nbsp; &nbsp; text-decoration-line: none;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: white;}.button_f{&nbsp; &nbsp; height:35px;&nbsp; &nbsp; background-color: #e0f1ed2e;&nbsp; &nbsp; border:none;&nbsp; &nbsp; border-radius: 10px;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; margin-bottom:20px;&nbsp; &nbsp; margin-top: 0px;&nbsp; &nbsp; font-size: 20px;&nbsp; &nbsp; background: #0C3F6F !important;&nbsp;&nbsp; &nbsp; font-family: monospace;&nbsp; &nbsp; color:white !important;}html {&nbsp; color: #bbb;&nbsp; font-family: Menlo;}.stopwatch {&nbsp; font-size: 80px;&nbsp;&nbsp; text-align: center;}.results {&nbsp; border-color: lime;&nbsp; list-style: none;&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; left: 50%;&nbsp; transform: translateX(-50%);}<html>&nbsp; &nbsp; <title>Tic Tac Toe</title>&nbsp; &nbsp; <!--LINK&nbsp; CSS STYLESHEET-->&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp;<link rel="stylesheet" href="tic_tac_toe.css">&nbsp; &nbsp; &nbsp;<!-- Tell the browser to be responsive to screen width -->&nbsp; &nbsp; <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">&nbsp; &nbsp; </head>&nbsp; &nbsp; <body><embed src="dChanyeol (EXO) & Punch - Stay With Me FMV (Goblin OST Part 1) (Eng Sub + Rom + Han).mp3" autostart="true" hidden="true" loop ="true"><!--BACKGROUND MUSI<audio id="myaudio">&nbsp; <source src="music.mp3"></audio>&nbsp;JS FOR MUSIC VOLUME<script>&nbsp; var audio = document.getElementById("myaudio").loop=true;&nbsp;&nbsp; audio.volume = 0.2;&nbsp; </script>C--><div class="stopwatch"></div>&nbsp; &nbsp; &nbsp; &nbsp; <ul class="results"></ul>&nbsp; &nbsp; <!--CREATE BORD FOR TIC TAC TOE GAME-->&nbsp; &nbsp; &nbsp; &nbsp; <table align="center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="cell" id="0"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="cell" id="1"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="cell" id="2"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="cell" id="3"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="cell" id="4"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="cell" id="5"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="cell" id="6"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="cell" id="7"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="cell" id="8"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--MESSAGE CLASS FOR END GAME-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="endgame">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--BUTTON FOR REPLAY-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onclick="startGame(), stopwatch.restart();" class="button">Restart</button> <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--<button onclick="location.reload();" class="button">Restart New Game</button>-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button class="button_f"><a href="https://en-gb.facebook.com/">Share This on Facebook</a></button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div> <!--END MESSAGE-->&nbsp; &nbsp; &nbsp; &nbsp; </table> <!--END GAME TABLE BOARD-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<!--LINK JAVASCRIPT-->&nbsp; &nbsp; &nbsp; &nbsp; <script src="tic_tac_toe.js"></script>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </body></html>