chandradeoarya · May 22, 2023 07:46
diff --git a/tictactoe-inline.html b/tictactoe-inline.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Kids Tic Tac Toe</title>
    <style>
        body {
            background-color: #FFD700;
            font-family: Arial, sans-serif;
            text-align: center;
        }

        .board {
            width: 300px;
            height: 300px;
            margin: 20px auto;
            display: grid;
            grid-template: repeat(3, 1fr) / repeat(3, 1fr);
        }

        .cell {
            width: 100px;
            height: 100px;
            border: 3px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            font-size: 2em;
            background-color: #F5F5DC;
            transition: background-color 0.5s ease;
        }

        .cell:hover {
            background-color: #ADD8E6;
        }

        #message {
            font-size: 2em;
            color: #6A5ACD;
        }

        #reset {
            margin-top: 20px;
            padding: 10px;
            font-size: 1.2em;
            background-color: #6A5ACD;
            color: #F5F5DC;
            border: none;
            border-radius: 10px;
            cursor: pointer;
        }
    </style>
 </head>
 <body>
    <h1>Welcome to Tic Tac Toe!</h1>
    <p id="message"></p>
    <div id="board" class="board"></div>
    <button id="reset">Start Over</button>

    <script>
        let board = Array(9).fill(null);
        let currentPlayer = 'X';
        let isGameOver = false;

        function checkWin() {
            const winConditions = [
                [0, 1, 2],
                [3, 4, 5],
                [6, 7, 8],
                [0, 3, 6],
                [1, 4, 7],
                [2, 5, 8],
                [0, 4, 8],
                [2, 4, 6]
            ];

            for(let i = 0; i < winConditions.length; i++) {
                const [a, b, c] = winConditions[i];
                if(board[a] && board[a] === board[b] && board[a] === board[c]) {
                    return board[a];
                }
            }

            if(!board.includes(null)) {
                return 'draw';
            }

            return null;
        }

        function handleClick(i) {
            if(isGameOver || board[i]) {
                return;
            }

            board[i] = currentPlayer;
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';

            const result = checkWin();
            if(result) {
                isGameOver = true;
                document.getElementById('message').innerText = result === 'draw' ? "It's a draw!" : `${result} wins!`;
            } else {
                document.getElementById('message').innerText = `It's ${currentPlayer}'s turn!`;
            }

            drawBoard();
        }

        function drawBoard() {
            const boardDiv = document.getElementById('board');
            boardDiv.innerHTML = '';
            board.forEach((cell, i) => {
                const cellDiv = document.createElement('div');
                cellDiv.classList.add('cell');
                cellDiv.innerText = cell ? cell : '';
                cellDiv.addEventListener('click', () => handleClick(i));
                boardDiv.appendChild(cellDiv);
            });
        }

        function resetGame() {
            board = Array(9).fill(null);
            currentPlayer = 'X';
            isGameOver = false;
            document.getElementById('message').innerText = `It's ${currentPlayer}'s turn!`;
            drawBoard();
        }

        document.getElementById('reset').addEventListener('click', resetGame);
        resetGame();
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Kids Tic Tac Toe</title>
	<style>
	body {
	background-color: #FFD700;
	font-family: Arial, sans-serif;
	text-align: center;
	}

	.board {
	width: 300px;
	height: 300px;
	margin: 20px auto;
	display: grid;
	grid-template: repeat(3, 1fr) / repeat(3, 1fr);
	}

	.cell {
	width: 100px;
	height: 100px;
	border: 3px solid #000;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-size: 2em;
	background-color: #F5F5DC;
	transition: background-color 0.5s ease;
	}

	.cell:hover {
	background-color: #ADD8E6;
	}

	#message {
	font-size: 2em;
	color: #6A5ACD;
	}

	#reset {
	margin-top: 20px;
	padding: 10px;
	font-size: 1.2em;
	background-color: #6A5ACD;
	color: #F5F5DC;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	}
	</style>
	</head>
	<body>
	<h1>Welcome to Tic Tac Toe!</h1>
	<p id="message"></p>
	<div id="board" class="board"></div>
	<button id="reset">Start Over</button>

	<script>
	let board = Array(9).fill(null);
	let currentPlayer = 'X';
	let isGameOver = false;

	function checkWin() {
	const winConditions = [
	[0, 1, 2],
	[3, 4, 5],
	[6, 7, 8],
	[0, 3, 6],
	[1, 4, 7],
	[2, 5, 8],
	[0, 4, 8],
	[2, 4, 6]
	];

	for(let i = 0; i < winConditions.length; i++) {
	const [a, b, c] = winConditions[i];
	if(board[a] && board[a] === board[b] && board[a] === board[c]) {
	return board[a];
	}
	}

	if(!board.includes(null)) {
	return 'draw';
	}

	return null;
	}

	function handleClick(i) {
	if(isGameOver \|\| board[i]) {
	return;
	}

	board[i] = currentPlayer;
	currentPlayer = currentPlayer === 'X' ? 'O' : 'X';

	const result = checkWin();
	if(result) {
	isGameOver = true;
	document.getElementById('message').innerText = result === 'draw' ? "It's a draw!" : `${result} wins!`;
	} else {
	document.getElementById('message').innerText = `It's ${currentPlayer}'s turn!`;
	}

	drawBoard();
	}

	function drawBoard() {
	const boardDiv = document.getElementById('board');
	boardDiv.innerHTML = '';
	board.forEach((cell, i) => {
	const cellDiv = document.createElement('div');
	cellDiv.classList.add('cell');
	cellDiv.innerText = cell ? cell : '';
	cellDiv.addEventListener('click', () => handleClick(i));
	boardDiv.appendChild(cellDiv);
	});
	}

	function resetGame() {
	board = Array(9).fill(null);
	currentPlayer = 'X';
	isGameOver = false;
	document.getElementById('message').innerText = `It's ${currentPlayer}'s turn!`;
	drawBoard();
	}

	document.getElementById('reset').addEventListener('click', resetGame);
	resetGame();
	</script>
	</body>
	</html>