Tic Tac Toe Game Source Code In Javascript

Tic Tac Toe Game Source Code In Javascript

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.


  • 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.


  • The CSS styles the game board and buttons to make it visually appealing.


  • 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() and displayTieGame() functions update the #result element with the result of the game.
  • The switchTurn() function updates the turn variable to switch between "X" and "O" players.
  • The $("#reset").click() function resets the game by clearing the text of all cells, resetting the winner variable, and setting the turn variable to the current player selected in the #player-select element.
  • 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:


<!DOCTYPE html>
	<meta charset="utf-8">
	<title>Tic Tac Toe</title>
	<link rel="stylesheet" href="style.css">
	<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 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>

	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="script.js"></script>


.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;


$(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) {

	// 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];
			// check columns
			if (board[0][i] === board[1][i] && board[1][i] === board[2][i] && board[0][i] !== "") {
				winner = board[0][i];
		// check diagonals
		if (board[0][0] === board[1][1] && board[1][1] === board[2][2] && board[0][0] !== "") {
			winner = board[0][0];
		if (board[0][2] === board[1][1] && board[1][1] === board[2][0] && board[0][2] !== "") {
			winner = board[0][2];
		// check for tie game
		if (!boardHasEmptyCell() && winner === null) {

	// 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() {
		winner = null;
		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;

Related posts

Write a comment