Build Your First Tic Tac Toe Game Using JavaScript, HTML, and CSS – Perfect for Beginners!

Published on Feb 21, 2024

Today, we will create a Tic Tac Toe game! Let’s take a look at the code that powers this game for you.

First, we have the structure of a basic HTML document. We set the language to English and include the necessary meta tags for character encoding and responsive design.

Inside the body tag, there’s a container div which holds the game board. This is where the Tic Tac Toe grid will be displayed when the game is played.

Next, we have a message div, which will be used to display in-game messages, such as the winner or a draw.

Then, there’s a box div containing a restart button. This button allows players to restart the game at any time.

And that’s the HTML code for our Tic Tac Toe game!

Let’s dive into the CSS code that styles our Tic Tac Toe game. We’ll go through each section to understand how the game’s appearance is being defined.

First, we have styles defined for the body of the game. The chosen font is Arial or sans-serif, with a light grey background, and the margins and padding are set to zero, ensuring a clean and spacious layout.

Moving on to the .container class, it’s used to centre the game board on the page. It ensures the game is presented at the centre of the screen, maintaining a neat layout.

The .board class styles the game board, utilising a grid layout with 3 columns and 3 rows, each cell being 100 pixels in size. There are defined gaps between cells, and the overall board has a dark background with rounded corners and padding for visual appeal.

Next, the .cell class styles the individual cells within the game board. Each cell has a set width and height, a light grey background, and no border. The content is centred, and the font size is set to a large 3em for clear visibility. The cursor also changes on hover, and there’s a smooth transition when the background colour changes.

The .message class governs the appearance of in-game messages, centring the text, and setting the font size and colour to ensure a clear and prominent display above the game board.

Finally, the .restart-btn and associated styles are used for the game’s restart button. It features a green background colour, white text, padding, and rounded corners. On hover, the background colour smoothly transitions to a darker shade, providing visual feedback to the player.

And there you have it! These CSS styles come together to create a visually appealing and user-friendly experience for playing Tic Tac Toe. Enjoy the game with these stylish designs!

I hope this script effectively explains the provided CSS code for the Tic Tac Toe game!

Let’s explore the JavaScript code that brings our Tic Tac Toe game to life. We’ll go through each section to understand how the game’s functionality is being defined.

The code starts by using jQuery to ensure that the document is fully loaded before any code is executed. This is denoted by the $(document).ready function.

Next, the script initialises several variables such as ‘board’, ‘message’, ‘currentPlayer’, ‘moves’, and ‘gameOver’ to manage the game state and player turns.

The ‘checkWinner’ function is then defined to determine if there’s a winner or if the game results in a draw by examining the filled cells and comparing them with the winning combinations.

The ‘handleClick’ function is responsible for handling the player’s move when a cell is clicked. It checks if the game is still ongoing and if the selected cell is empty before filling it with the current player’s mark.

Additionally, there’s an ‘initializeBoard’ function that sets up the game board by adding 9 empty cells to the board to create the Tic Tac Toe grid.

The code then attaches the ‘handleClick’ function to each cell to respond to player interactions, and also attaches a function to the restart button to reset the game when clicked.

And that’s the JavaScript code for our Tic Tac Toe game! These functions work together to enable player moves, check for a winner or a draw, and allow for game restarts. Enjoy playing this interactive and engaging game!

I hope this script effectively explains the provided JavaScript code for the Tic Tac Toe game! If you have any further questions or need additional information, feel free to ask.