https://github.com/emilracz21/tictactoe-javascript

Tic Tac Toe game
https://github.com/emilracz21/tictactoe-javascript

css frontend game game-development html html-css-javascript javascipt javascript js ui-design ux-ui web

Last synced: 3 days ago
JSON representation

Tic Tac Toe game

• Host: GitHub
• URL: https://github.com/emilracz21/tictactoe-javascript
• Owner: emilRacz21
• Created: 2023-11-18T12:03:31.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-23T20:09:28.000Z (3 months ago)
• Last Synced: 2024-11-11T04:22:09.966Z (2 months ago)
• Topics: css, frontend, game, game-development, html, html-css-javascript, javascipt, javascript, js, ui-design, ux-ui, web
• Language: JavaScript
• Homepage: https://tic-tac-toe-er.netlify.app/
• Size: 17.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tic Tac Toe Game

This repository contains a simple Tic Tac Toe game implemented in JavaScript, HTML, and CSS. The game allows two players, "X" and "O," to take turns playing on a 3x3 grid, with the objective of placing three of their marks in a horizontal, vertical, or diagonal row.

* [Tic Tac Toe Game](https://tic-tac-toe-er.netlify.app/)

## Features

- Two-player gameplay.

- Win detection for both "X" and "O".

- Score tracking for both players.

- Animated UI interactions for an enhanced user experience.

## Code Overview

### Initial Setup

- **Current Player**: The game starts with player "X".

- **Winning Combinations**: An array defines all possible winning combinations on the board.

- **Score Tracking**: Points are stored for both players.

### HTML Elements

- The game board is represented by a series of `` elements.

- Player scores are displayed in designated elements with the classes `.player` and `.player-points`.

### Game Logic

1. **Game Start**:

   - The game begins when a player clicks on an empty cell.

   - The clicked cell updates to reflect the current player's symbol ("X" or "O").

2. **Player Switch**:

   - The function `setColorAndSwitchPlayer` changes the text color of the current player's symbol and switches to the next player.

3. **Win Checking**:

   - The `checkWinner` function checks if the current player's symbols form any of the winning combinations. If a player wins, the score is updated, and the game board resets.

4. **Board Reset**:

   - The `restartGame` function resets the game board and allows players to continue playing.

5. **Animations**:

   - The game features animations for cell clicks and player turns to enhance user experience. The `animBoard` function handles these animations.

### Game Colors

- The `getBoardColor` function applies specific background colors to the board cells for a better visual appearance.

## How to Run

1. Clone the repository:

   ```bash

   git clone https://github.com/emilRacz21/ticTacToe-javascript.git

   cd ticTacToe-javascript

2. Open index.html in a web browser.

3. Enjoy the game!

## Contributions

Contributions are welcome! Feel free to open an issue or submit a pull request.

## Design

![TicTacToe](https://github.com/user-attachments/assets/496c3fab-97d7-442c-998a-35917f56d4a5)

## License

This project is licensed under the MIT License.