The code implements a simple version of the Tic Tac Toe game using HTML, CSS, and jQuery. Here's a high-level overview of how the code works, Tic Tac Toe Javascript Source Code. This is also known as noughts and crosses game.
Let's Play Tic Tac Toe
This is a tic tac toe 2 players game. Let's Play Tic Tac Toe right now:
Feel the experience.
Explain the code
Let's explain the code first. In each section of code and what logic is being used. And check strategic tic tac toe game.
HTML:
- The HTML defines the game board as a table with 3 rows and 3 columns, where each cell is a clickable button with a unique id.
- It also includes a "Select Player" dropdown menu and a "Reset" button.
CSS:
- The CSS styles the game board and buttons to make it visually appealing.
JavaScript/jQuery:
- The jQuery code initializes the game by adding event listeners to the cells, the "Select Player" dropdown menu, and the "Reset" button.
- It also defines functions for checking for a winner, switching turns, resetting the game, and checking if the board has any empty cells.
- When a player clicks on a cell, the code checks if the cell is empty and if there is no winner yet. If both conditions are met, the code sets the text of the cell to the current player's symbol (either "X" or "O"), checks for a winner, and switches turns.
- The
checkForWinner()function checks for a winner by iterating over the rows, columns, and diagonals of the board and comparing the values of each cell. If a row, column, or diagonal contains three matching symbols that are not empty, the code declares a winner and displays the result. If all cells are filled and there is no winner, the code declares a tie game. - The
displayWinner()anddisplayTieGame()functions update the#resultelement with the result of the game. - The
switchTurn()function updates theturnvariable to switch between "X" and "O" players. - The
$("#reset").click()function resets the game by clearing the text of all cells, resetting thewinnervariable, and setting theturnvariable to the current player selected in the#player-selectelement. - Finally, the
boardHasEmptyCell()function checks if there are any empty cells remaining on the board.
Overall, the code uses a combination of HTML, CSS, and jQuery to create an interactive Tic Tac Toe game that can be played in the browser.
Tic Tac Toe Game In Javascript
Here's an example code for a simple tic-tac-toe game using HTML, CSS, and jQuery:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="board">
<div class="cell" id="0"></div>
<div class="cell" id="1"></div>
<div class="cell" id="2"></div>
<div class="cell" id="3"></div>
<div class="cell" id="4"></div>
<div class="cell" id="5"></div>
<div class="cell" id="6"></div>
<div class="cell" id="7"></div>
<div class="cell" id="8"></div>
</div>
<div id="result"></div>
<div id="controls">
<button id="reset">Reset</button>
<label for="player-select">Select Player:</label>
<select id="player-select">
<option value="X">X</option>
<option value="O">O</option>
</select>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS
.board {
display: flex;
flex-wrap: wrap;
width: 300px;
margin: 0 auto;
}
.cell {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
font-size: 50px;
cursor: pointer;
}
.cell:hover {
background-color: #ccc;
}
#result {
margin-top: 20px;
text-align: center;
font-size: 30px;
font-weight: bold;
}
#controls {
margin-top: 20px;
display: flex;
justify-content: center;
align-items: center;
}
#controls label {
margin-right: 10px;
font-size: 20px;
}
#controls select {
font-size: 20px;
padding: 5px 10px;
border-radius: 5px;
border: none;
outline: none;
box-shadow: 0 0 5px #ccc;
}
JavaScript/jQuery:
$(document).ready(function() {
// initialize game
var turn = "X";
var cells = $(".cell");
var winner = null;
// event listeners for cell clicks
cells.click(function() {
if ($(this).text() === "" && winner === null) {
$(this).text(turn);
checkForWinner();
switchTurn();
}
});
// check for a winner
function checkForWinner() {
var board = [
[cells.eq(0).text(), cells.eq(1).text(), cells.eq(2).text()],
[cells.eq(3).text(), cells.eq(4).text(), cells.eq(5).text()],
[cells.eq(6).text(), cells.eq(7).text(), cells.eq(8).text()]
];
for (var i = 0; i < 3; i++) {
// check rows
if (board[i][0] === board[i][1] && board[i][1] === board[i][2] && board[i][0] !== "") {
winner = board[i][0];
displayWinner();
return;
}
// check columns
if (board[0][i] === board[1][i] && board[1][i] === board[2][i] && board[0][i] !== "") {
winner = board[0][i];
displayWinner();
return;
}
}
// check diagonals
if (board[0][0] === board[1][1] && board[1][1] === board[2][2] && board[0][0] !== "") {
winner = board[0][0];
displayWinner();
return;
}
if (board[0][2] === board[1][1] && board[1][1] === board[2][0] && board[0][2] !== "") {
winner = board[0][2];
displayWinner();
return;
}
// check for tie game
if (!boardHasEmptyCell() && winner === null) {
displayTieGame();
}
}
// display the winner
function displayWinner() {
$("#result").text(winner + " wins!");
}
// display tie game
function displayTieGame() {
$("#result").text("Tie game!");
}
// switch turns
function switchTurn() {
if (turn === "X") {
turn = "O";
} else {
turn = "X";
}
}
// reset game
$("#reset").click(function() {
cells.text("");
winner = null;
$("#result").text("");
turn = $("#player-select").val();
});
// check if the board has any empty cells
function boardHasEmptyCell() {
for (var i = 0; i < cells.length; i++) {
if (cells.eq(i).text() === "") {
return true;
}
}
return false;
}
});
Write a comment