index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
<title>Tic Tac Toe</title>
    
</head>
<body>
    <div class="box">
        <div class="container">
            <div class="cell top left" id="0" ></div>
            <div class="cell top" id="1"></div>
            <div class="cell top right" id="2"></div>
            <div class="cell left" id="3"></div>
            <div class="cell" id="4"></div>
            <div class="cell right" id="5"></div>
            <div class="cell bottom left" id="6"></div>
            <div class="cell bottom" id="7"></div>
            <div class="cell bottom right" id="8"></div>
        </div>
    </div>
    <div class="endgame">
        <button class="replay" onclick="startGame()" >Replay</button>
        <div class="text"></div>
    </div>
    <button class="replay replayother" onclick="startGame()" >Restart Game</button>

    <script>
        // const human= 'O';
        // const computer= 'X';
        // var origboard;
        // const wincombos = [
        //     [0,1,2],
        //     [3,4,5],
        //     [6,7,8],
        //     [0,3,6],
        //     [1,4,7],
        //     [2,5,8],
        //     [0,4,8],
        //     [2,4,6]
        // ]
        // const cells = document.querySelectorAll('.cell');

        // startgame();
        // function startgame(){
        //     document.querySelector('.endgame').style.display="none";
        //     origboard=[0,1,2,3,4,5,6,7,8];
        //     // console.log(origboard[5]);
        //     for(var i=0;i<cells.length;i++){
        //         cells[i].innerHTML='';
        //         cells[i].style.removeProperty('background-color');
        //     }
        // }
        // function clicked(num,player){
        //     origboard[num]=player;
        //     console.log('click');
        //     cells[num].innerText=player;
        //     let gamewon = checkwin(origboard,player);
        //     if(gamewon)
        //     gameover(gamewon);

            // console.log(num);
            // var rn=(Math.floor((Math.random()*8)+0));
            // cells[rn].innerText=computer;
            // console.log(rn)
        // }

        var x=1,y=1;
        var origBoard;
        const huPlayer = 'O';
        const aiPlayer = 'X';
        const winCombos = [
        	[0, 1, 2],
        	[3, 4, 5],
        	[6, 7, 8],
        	[0, 3, 6],
        	[1, 4, 7],
        	[2, 5, 8],
        	[0, 4, 8],
        	[6, 4, 2]
        ]

        const cells = document.querySelectorAll('.cell');
        startGame();

        function startGame() {
            x=1;
            y=1;
            document.querySelector(".replayother").style.display = "block";
        	document.querySelector(".endgame").style.display = "none";
        	// origBoard = Array.from(Array(9).keys());
            origBoard=[0,1,2,3,4,5,6,7,8];
        	for (var i = 0; i < cells.length; i++) {
        		cells[i].innerText = '';
        		cells[i].style.removeProperty('background-color');
        		cells[i].addEventListener('click', turnClick, false);
        	}
        }

        function turnClick(square) {
            if(typeof origBoard[square.target.id]=='number'){
                turn(square.target.id, huPlayer)
                if(!checkTie() && x==1){
                    // console.log("Ai player")
                    turn(bestSpot(),aiPlayer);
                }
            }
        }
        function turn(squareId, player) {
        	origBoard[squareId] = player;
        	document.getElementById(squareId).innerText = player;
            // console.log("clicked")
            var gameWon = checkWin(origBoard,player);
            if(gameWon){
                // console.log("won")
                gameOver(gameWon);
            }
        }
        function checkWin(board,player){
            let plays =board.reduce((a,e,i)=>(e===player) ? a.concat(i) : a , []);
            let gameWon=null;
            for(let [index,win] of winCombos.entries()){
                if(win.every(elem => plays.indexOf(elem) > -1)){
                    gameWon={index : index ,player : player};
                    // console.log("hello");
                    break;
                }
                // console.log("hii");
            }
            return gameWon;
        }
        function gameOver(gameWon){
            for(let index of winCombos[gameWon.index]){
                document.getElementById(index).style.backgroundColor=
                gameWon.player==huPlayer ? "green" : "red"
                x=0;
                y=0;
                // console.log("its win")
            }
            for(let i=0; i <cells.length;i++){
                cells[i].removeEventListener('click',turnClick,false);
            }
            declareWinner(gameWon.player==huPlayer?"You Win!":"You Lose!")
        }
        function emptySquares(){
            return origBoard.filter(s => typeof s== 'number');
        }
        function bestSpot(){
            // return emptySquares()[0];
            return minimax(origBoard,aiPlayer).index;
        }
        function checkTie(){
            if(emptySquares().length==0  && y==1){
                for(var i=0;i<cells.length;i++){
                    cells[i].style.backgroundColor='blue';
                    cells[i].removeEventListener('click',turnClick,false)
                }
                // console.log("tie match")
                declareWinner("Tie Game!")
                return true;
            }
            return false;
        }
        function declareWinner(who){
            document.querySelector(".endgame").style.display = "flex";
            document.querySelector(".replayother").style.display = "none";
            document.querySelector(".endgame .text").innerText=who;
        }

        function minimax(newBoard, player) {
    	    var availSpots = emptySquares();

	        if (checkWin(newBoard, huPlayer)) {
	        	return {score: -10};
    	    } else if (checkWin(newBoard, aiPlayer)) {
	    	    return {score: 10};
    	    } else if (availSpots.length === 0) {
	    	    return {score: 0};
        	}
	        var moves = [];
	        for (var i = 0; i < availSpots.length; i++) {
	        	var move = {};
		        move.index = newBoard[availSpots[i]];
		        newBoard[availSpots[i]] = player;

		        if (player == aiPlayer) {
    			    var result = minimax(newBoard, huPlayer);
	    		    move.score = result.score;
		        } 
                else {
			        var result = minimax(newBoard, aiPlayer);
			        move.score = result.score;
		        }

    		    newBoard[availSpots[i]] = move.index;

		        moves.push(move);
	        }

	        var bestMove;
        	if(player === aiPlayer) {
		        var bestScore = -10000;
        		for(var i = 0; i < moves.length; i++) {
		        	if (moves[i].score > bestScore) {
		        		bestScore = moves[i].score;
				        bestMove = i;
			        }
		        }
	        }
            else {
        		var bestScore = 10000;
		        for(var i = 0; i < moves.length; i++) {
        			if (moves[i].score < bestScore) {
		        		bestScore = moves[i].score;
				        bestMove = i;
			        }
		        }
	        }

	        return moves[bestMove];
        }

    </script>
</body>
</html>