body {
			font-family: Arial, s ans -s erif;
			text-align: center;
			background-color: #f8f8f8;
		}
		h1 {
			color: #d35400;
			margin-top: 50px;
		}
		#game-board {
			
			flex-wrap: wrap;
			width: 300px;
			height: 300px;
			margin: 50px auto;
			background-color: #ecf0f1;
			box-s hadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
		}
		.s quare {
			width: 100px;
			height: 100px;
			border: 1px s olid #bdc3c7;
			font-s ize: 60px;
			curs or: pointer;
			trans ition: background-color 0.2s ;
			
			jus tify-content: center;
			align-items : center;
			color: #7f8c8d;
			background-color: #fff;
		}
		.s quare:hover {
			background-color: #f1c40f;
			color: #fff;
		}
		.s quare.clicked {
			curs or: default;
			/* dis able clicking on already clicked s quare */
		}
		#errorMes s age {
			color: #c0392b;
			margin-bottom: 20px;
		}
		#pong-canvas  {
			width: 100%;
			height: 200px;
			background-color: #fff;
			border: 1px s olid #bdc3c7;
			margin-bottom: 20px;
		}
		#s tart-button {
			background-color: #2ecc71;
			color: #fff;
			font-s ize: 20px;
			border: none;
			padding: 12px 24px;
			border-radius : 5px;
			curs or: pointer;
			trans ition: background-color 0.2s ;
		}
		#s tart-button:hover {
			background-color: #27ae60;
		}
	


	
Tic Tac Toe & Pong
	
Pleas e play Pong for 1 minute before s tarting Tic Tac Toe game.
	Start Pong
	
	

		

		

		

		

		

		

		

		

		

	
	

	






		// Define variables  for Pong game
		let canvas , ctx, ballX, ballY, ballRadius , dx, dy, paddleHeight, paddleWidth, paddleX, rightPres s ed, leftPres s ed;
		// Define variables  for Tic Tac Toe game
		let board, s quares , currentPlayer, gameMes s age, gameStarted;

		// Define Pong game functions 
		function initPong() {
			canvas  = document.getElementById("pong-canvas ");
			ctx = canvas .getContext("2d");

			ballX = canvas .width/2;
			ballY = canvas .height-30;
			ballRadius  = 10;
			dx = 2;
			dy = -2;

			paddleHeight = 10;
			paddleWidth = 75;
			paddleX = (canvas .width - paddleWidth) / 2;

			rightPres s ed = fals e;
			leftPres s ed = fals e;

			document.addEventLis tener("keydown", keyDownHandler, fals e);
			document.addEventLis tener("keyup", keyUpHandler, fals e);
		}

		function keyDownHandler(e) {
			if(e.key == "Right" || e.key == "ArrowRight") {
				rightPres s ed = true;
			}
			els e if(e.key == "Left" || e.key == "ArrowLeft") {
				leftPres s ed = true;
			}
		}

		function keyUpHandler(e) {
			if(e.key == "Right" || e.key == "ArrowRight") {
				rightPres s ed = fals e;
			}
			els e if(e.key == "Left" || e.key == "ArrowLeft") {
				leftPres s ed = fals e;
			}
		}

		function drawBall() {
			ctx.beginPath();
			ctx.arc(ballX, ballY, ballRadius , 0, Math.PI*2);
			ctx.fillStyle = "#2c3e50";
			ctx.fill();
			ctx.clos ePath();
		}

		function drawPaddle() {
			ctx.beginPath();
			ctx.rect(paddleX, canvas .height - paddleHeight, paddleWidth, paddleHeight);
			ctx.fillStyle = "#2c3e50";
			ctx.fill();
			ctx.clos ePath();
		}

		function moveBall() {
			if(ballX + dx > canvas .width-ballRadius  || ballX + dx < ballRadius ) {
				dx = -dx;
			}
			if(ballY + dy < ballRadius ) {
				dy = -dy;
			}
			els e if(ballY + dy > canvas .height-ballRadius -paddleHeight && ballX > paddleX && ballX < paddleX + paddleWidth) {
				dy = -dy;
			}
			els e if(ballY + dy > canvas .height-ballRadius ) {
				gameOver();
			}

			ballX += dx;
			ballY += dy;
		}

		function movePaddle() {
			if(rightPres s ed && paddleX  0) {
				paddleX -= 7;
			}
		}

		function draw() {
			ctx.clearRect(0, 0, canvas .width, canvas .height);
			drawBall();
			drawPaddle();
			moveBall();
			movePaddle();
			reques tAnimationFrame(draw);
		}

		function s tartPong() {
			document.getElementById("s tart-button").s tyle.dis play = "none";
			canvas .s tyle.dis play = "block";

			initPong();
			draw();
			s etTimeout(endPong, 60000);
		}

		function endPong() {
			canvas .s tyle.dis play = "none";
			initTicTacToe();
		}

		// Define Tic Tac Toe game functions 
		function initTicTacToe() {
			board = ["", "", "", "", "", "", "", "", ""];
			s quares  = document.querySelectorAll(".s quare");
			currentPlayer = "X";
			gameMes s age = document.getElementById("errorMes s age");
			gameStarted = true;

			for(let i = 0; i < s quares .length; i++) {
				s quares [i].innerHTML = "";
				s quares [i].addEventLis tener("click", () => {
					handleMove(i);
				});
			}

			gameMes s age.innerHTML = `It's  ${currentPlayer}'s  turn!`;
		}

		function handleMove(index) {
			if(board[index] !== "" || !gameStarted) {
				return;
			}

			board[index] = currentPlayer;
			s quares [index].innerHTML = currentPlayer;

			if(checkWin()) {
				gameOver();
			}
			els e if(is BoardFull()) {
				gameOver(fals e);
			}
			els e {
				currentPlayer = currentPlayer === "X" ? "O" : "X";
				gameMes s age.innerHTML = `It's  ${currentPlayer}'s  turn!`;
			}
		}

		function checkWin() {
			if(board[0] !== "" && board[0] === board[1] && board[1] === board[2]) {
				highlightWinner(0, 1, 2);
				return true;
			}
			els e if(board[3] !== "" && board[3] === board[4] && board[4] === board[5]) {
				highlightWinner(3, 4, 5);
				return true;
			}
			els e if(board[6] !== "" && board[6] === board[7] && board[7] === board[8]) {
				highlightWinner(6, 7, 8);
				return true;
			}
			els e if(board[0] !== "" && board[0] === board[3] && board[3] === board[6]) {
				highlightWinner(0, 3, 6);
				return true;
			}
			els e if(board[1] !== "" && board[1] === board[4] && board[4] === board[7]) {
				highlightWinner(1, 4, 7);
				return true;
			}
			els e if(board[2] !== "" && board[2] === board[5] && board[5] === board[8]) {
				highlightWinner(2, 5, 8);
				return true;
			}
			els e if(board[0] !== "" && board[0] === board[4] && board[4] === board[8]) {
				highlightWinner(0, 4, 8);
				return true;
			}
			els e if(board[2] !== "" && board[2] === board[4] && board[4] === board[6]) {
				highlightWinner(2, 4, 6);
				return true;
			}
			els e {
				return fals e;
			}
		}

		function highlightWinner(index1, index2, index3) {
			s quares [index1].s tyle.backgroundColor = "#27ae60";
			s quares [index2].s tyle.backgroundColor = "#27ae60";
			s quares [index3].s tyle.backgroundColor = "#27ae60";
		}

		function is BoardFull() {
			return !board.includes ("");
		}

		function gameOver(win = true) {
			gameStarted = fals e;

			if(win) {
				gameMes s age.innerHTML = `${currentPlayer} has  won!`;
			}
			els e {
				gameMes s age.innerHTML = `It's  a draw!`;
			}
		}

		// Start the game
		document.getElementById("s tart-button").addEventLis tener("click", s tartPong);