Steven24K · December 26, 2024 12:43
diff --git a/game.js b/game.js
 const game_grid = document.getElementById('game-grid');
 const grid_size = 3;

 const player_x = document.getElementById('player-x')
 const player_o = document.getElementById('player-o')

 const header = document.getElementById('header');
 const reset_button = document.getElementById('reset');

 let current_player = player_x;

 const rounds = grid_size ** 2;
 let current_round = 0;

 function draw_grid() {
    for (let y = 0; y < grid_size; y++) {
        const game_row = document.createElement('div');
        game_row.className = "game-row";
        game_row.id = `y-${y}`;
        for (let x = 0; x < grid_size; x++) {
            const game_field = document.createElement('div');
            game_field.className = "game-field";
            game_field.id = `y-${y}-x-${x}`;
            game_field.addEventListener('click', game_play);

            game_row.append(game_field);
        }
        game_grid.append(game_row);
    }
 }

 function game_play() {
    if (current_round >= rounds) return;
    current_round++;

    const newSymbol = document.createElement('div')
    newSymbol.innerHTML = current_player.innerHTML;
    newSymbol.className = "player";
    this.append(newSymbol);

    if (check_winner()) {
        current_round = rounds;
        const winnerText = document.createElement('h2');
        winnerText.innerText = `${current_player.innerText} is the winner!`;
        header.append(winnerText);
    } else {
        if (current_player.id === "player-x") {
            current_player = player_o;
            player_x.classList.remove('turn');
            player_o.classList.add('turn');
        } else {
            current_player = player_x;
            player_x.classList.add('turn');
            player_o.classList.remove('turn');
        }
        if (current_round >= rounds) {
            const tieText = document.createElement('h2');
            tieText.innerText = "It's a tie!";
            header.append(tieText);
        }
    }

    this.removeEventListener('click', game_play);
 }

 function grid(x, y) {
    return document.getElementById(`y-${y}-x-${x}`).innerText;
 }

 function check_winner() {
    // Check horizontal and vertical lines
    for (let i = 0; i < grid_size; i++) {
        // Horizontal check (row i)
        if (grid(0, i) !== '' && grid(0, i) === grid(1, i) && grid(0, i) === grid(2, i)) {
            return true;
        }
        // Vertical check (column i)
        if (grid(i, 0) !== '' && grid(i, 0) === grid(i, 1) && grid(i, 0) === grid(i, 2)) {
            return true;
        }
    }

    // Top-left to bottom-right diagonal
    if (grid(0, 0) !== '' && grid(0, 0) === grid(1, 1) && grid(0, 0) === grid(2, 2)) {
        return true;
    }

    // Top-right to bottom-left diagonal
    if (grid(2, 0) !== '' && grid(2, 0) === grid(1, 1) && grid(2, 0) === grid(0, 2)) {
        return true;
    }

    return false;
 }

 draw_grid();
diff --git a/index.html b/index.html
 <html lang="en">

 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac Toe</title>

    <link rel="stylesheet" href="./style.css">
 </head>

 <body>
    <header class="header" id="header">
        <h1>Welcome to the world famous Tic Tac Toe game!</h1>
        <p>
            Tic-tac-toe, noughts and crosses, or Xs and Os is a paper-and-pencil game for two players 
            who take turns marking the spaces in a three-by-three grid with X or O. 
            The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row is the winner. 
        </p>
        <a target="_blank" aria-label="Wikipedia" href="https://en.wikipedia.org/wiki/Tic-tac-toe">Wikipedia</a>
        <a aria-label="Reset" href="index.html">Reset game</a>
    </header>
    
    <main class="container">
        <div id="game-grid" class="game-grid"></div>
        <div class="players">
            <div id="player-x" class="player turn">&#9932;</div>
            <div id="player-o" class="player">&#9898;</div>
        </div>
    </main>

    <script src="./game.js"></script>
 </body>

 </html>
diff --git a/style.css b/style.css
 * {
    margin: 0;
    padding: 0;
 }

 body {
    background-color: #e8e8e8;
 }

 .container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1rem;
 }

 .header {
    margin: 25px;
    padding: 25px;
    text-align: center;
    background-color: white;
    border-radius: 25px;
 }

 .header h1 {
    color: #000000;
 }

 .header h2 {
    margin-top: 15px;
 }

 .header p {
    margin-top: 10px;
    margin-bottom: 15px;
    color: #575555;
 }

 .header a {
    margin: 5px;
    padding: 10px;
    text-decoration: none;
    color: white;
    background-color: #c63f2a;
 }

 .header a:hover {
    background-color: #cb7c70;
 }

 .game-grid {
    display: flex;
    margin: 2rem;
    height: 300px;
    width: 300px;
 }

 .game-row:not(:last-child) {
    border-right: 4px solid black;
 }

 .game-field:not(:first-child, :last-child) {
    border-top: 4px solid black;
    border-bottom: 4px solid black;
 }

 .game-field {
    height: 100px;
    width: 100px;
 }

 .players {
    display: flex;
    gap: 5px;
    margin: 10px;
 }

 .player {
    margin: auto;
    padding-top: 15px;
    text-align: center;
    font-size: 3em;
    width: 80px;
    height: 80px;
 }

 .turn {
    border-bottom: 4px solid red;
 }
	const game_grid = document.getElementById('game-grid');
	const grid_size = 3;

	const player_x = document.getElementById('player-x')
	const player_o = document.getElementById('player-o')

	const header = document.getElementById('header');
	const reset_button = document.getElementById('reset');

	let current_player = player_x;

	const rounds = grid_size ** 2;
	let current_round = 0;

	function draw_grid() {
	for (let y = 0; y < grid_size; y++) {
	const game_row = document.createElement('div');
	game_row.className = "game-row";
	game_row.id = `y-${y}`;
	for (let x = 0; x < grid_size; x++) {
	const game_field = document.createElement('div');
	game_field.className = "game-field";
	game_field.id = `y-${y}-x-${x}`;
	game_field.addEventListener('click', game_play);

	game_row.append(game_field);
	}
	game_grid.append(game_row);
	}
	}

	function game_play() {
	if (current_round >= rounds) return;
	current_round++;

	const newSymbol = document.createElement('div')
	newSymbol.innerHTML = current_player.innerHTML;
	newSymbol.className = "player";
	this.append(newSymbol);

	if (check_winner()) {
	current_round = rounds;
	const winnerText = document.createElement('h2');
	winnerText.innerText = `${current_player.innerText} is the winner!`;
	header.append(winnerText);
	} else {
	if (current_player.id === "player-x") {
	current_player = player_o;
	player_x.classList.remove('turn');
	player_o.classList.add('turn');
	} else {
	current_player = player_x;
	player_x.classList.add('turn');
	player_o.classList.remove('turn');
	}
	if (current_round >= rounds) {
	const tieText = document.createElement('h2');
	tieText.innerText = "It's a tie!";
	header.append(tieText);
	}
	}

	this.removeEventListener('click', game_play);
	}

	function grid(x, y) {
	return document.getElementById(`y-${y}-x-${x}`).innerText;
	}

	function check_winner() {
	// Check horizontal and vertical lines
	for (let i = 0; i < grid_size; i++) {
	// Horizontal check (row i)
	if (grid(0, i) !== '' && grid(0, i) === grid(1, i) && grid(0, i) === grid(2, i)) {
	return true;
	}
	// Vertical check (column i)
	if (grid(i, 0) !== '' && grid(i, 0) === grid(i, 1) && grid(i, 0) === grid(i, 2)) {
	return true;
	}
	}

	// Top-left to bottom-right diagonal
	if (grid(0, 0) !== '' && grid(0, 0) === grid(1, 1) && grid(0, 0) === grid(2, 2)) {
	return true;
	}

	// Top-right to bottom-left diagonal
	if (grid(2, 0) !== '' && grid(2, 0) === grid(1, 1) && grid(2, 0) === grid(0, 2)) {
	return true;
	}

	return false;
	}

	draw_grid();
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Tic Tac Toe</title>

	<link rel="stylesheet" href="./style.css">
	</head>

	<body>
	<header class="header" id="header">
	<h1>Welcome to the world famous Tic Tac Toe game!</h1>
	<p>
	Tic-tac-toe, noughts and crosses, or Xs and Os is a paper-and-pencil game for two players
	who take turns marking the spaces in a three-by-three grid with X or O.
	The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row is the winner.
	</p>
	<a target="_blank" aria-label="Wikipedia" href="https://en.wikipedia.org/wiki/Tic-tac-toe">Wikipedia</a>
	<a aria-label="Reset" href="index.html">Reset game</a>
	</header>

	<main class="container">
	<div id="game-grid" class="game-grid"></div>
	<div class="players">
	<div id="player-x" class="player turn">⛌</div>
	<div id="player-o" class="player">⚪</div>
	</div>
	</main>

	<script src="./game.js"></script>
	</body>

	</html>
	* {
	margin: 0;
	padding: 0;
	}

	body {
	background-color: #e8e8e8;
	}

	.container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 1rem;
	}

	.header {
	margin: 25px;
	padding: 25px;
	text-align: center;
	background-color: white;
	border-radius: 25px;
	}

	.header h1 {
	color: #000000;
	}

	.header h2 {
	margin-top: 15px;
	}

	.header p {
	margin-top: 10px;
	margin-bottom: 15px;
	color: #575555;
	}

	.header a {
	margin: 5px;
	padding: 10px;
	text-decoration: none;
	color: white;
	background-color: #c63f2a;
	}

	.header a:hover {
	background-color: #cb7c70;
	}

	.game-grid {
	display: flex;
	margin: 2rem;
	height: 300px;
	width: 300px;
	}

	.game-row:not(:last-child) {
	border-right: 4px solid black;
	}

	.game-field:not(:first-child, :last-child) {
	border-top: 4px solid black;
	border-bottom: 4px solid black;
	}

	.game-field {
	height: 100px;
	width: 100px;
	}

	.players {
	display: flex;
	gap: 5px;
	margin: 10px;
	}

	.player {
	margin: auto;
	padding-top: 15px;
	text-align: center;
	font-size: 3em;
	width: 80px;
	height: 80px;
	}

	.turn {
	border-bottom: 4px solid red;
	}