Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amulyamachhan/tic-tac-toe

This is a simple Tic Tac Toe game implemented using HTML, CSS, and JavaScript. The game allows players to choose whether to play as "X" or "O" and to select the difficulty level between easy and hard. In the game, players take turns marking spaces on a 3x3 grid, aiming to be the first to form a horizontal, vertical, or diagonal line of their symbol
https://github.com/amulyamachhan/tic-tac-toe

css game gamedev html js tic-tac-toe tic-tac-toe-javascript tictactoe-game

Last synced: about 2 months ago
JSON representation

This is a simple Tic Tac Toe game implemented using HTML, CSS, and JavaScript. The game allows players to choose whether to play as "X" or "O" and to select the difficulty level between easy and hard. In the game, players take turns marking spaces on a 3x3 grid, aiming to be the first to form a horizontal, vertical, or diagonal line of their symbol

Awesome Lists containing this project

README

        

# Tic Tac Toe Game

## Overview
This is a simple Tic Tac Toe game implemented using HTML, CSS, and JavaScript. The game allows players to choose whether to play as "X" or "O" and to select the difficulty level between easy and hard. In the game, players take turns marking spaces on a 3x3 grid, aiming to be the first to form a horizontal, vertical, or diagonal line of their symbol. The game provides visual feedback for the current player's turn and announces the winner or a draw when the game ends.

You can play this game [here](https://amulyamachhan.github.io/Tic-Tac-Toe/).
## Screenshots
![amulyamachhan github io_Tic-Tac-Toe_](https://github.com/AmulyaMachhan/Tic-Tac-Toe/assets/111338400/3f131b4b-2ce6-4057-a77e-857b81e42f44)

## Features
- Choose your symbol: Players can select whether to play as "X" or "O" before starting the game.
- Difficulty levels: Players can choose between easy and hard difficulty levels. In easy mode, the AI opponent makes random moves, while in hard mode, the AI opponent uses an advanced algorithm to make strategic moves.
- Responsive design: The game is designed to work on both desktop and mobile devices, adapting its layout to different screen sizes.
- Simple user interface: The user interface is intuitive and easy to use, allowing players to click on the grid to place their symbols.
- Real-time feedback: The game provides real-time feedback on the current player's turn and announces the winner or a draw immediately after the game ends.

## Technologies Used
- HTML: Used for structuring the game layout and elements.
- CSS: Used for styling the game interface and layout.
- JavaScript: Used for implementing the game logic, handling user interactions, and creating the AI opponent.

## How to Play
1. Open the `index.html` file in a web browser.
2. Choose your symbol ("X" or "O") by clicking on the respective button.
3. Select the difficulty level (easy or hard) by clicking on the respective button.
4. The game will start with the chosen symbol going first.
5. Click on an empty space on the grid to place your symbol.
6. Players take turns clicking on empty spaces until one player wins or the game ends in a draw.
7. As soon as the game ends, the game automatically resets, allowing players to start a new round.

## Future Improvements
- Implementing more advanced AI algorithms for harder difficulty levels.
- Adding animations and effects to enhance the user experience.
- Implementing a scoreboard to track the number of wins for each player.