Web - Othello Game

CLICK TO ENLARGE 😇

📄 Description
🎓 Objectives
🔨 Tech stack
📂 Files description
💻 Installation and how to use
🔧 What's next ?
♥️ Thanks
👷 Authors

📄 Description

This project, inspired by the end-of-year work of Rodrigue Hassany Mohamed and Théo Jennat at Holberton School, is a browser-based implementation of the classic Othello (also known as Reversi) board game. The game is designed using HTML5, CSS3, and JavaScript. Players take turns placing black or white discs on the board, flipping the opponent's discs by surrounding them in a straight line. The game continues until neither player can make a valid move, and the player with the most discs on the board wins.

🎓 Objectives

The primary goal of this project is to create a playable version of Othello with a functional UI and game logic. The focus is on:

• Rendering a dynamic game board with valid moves highlighted.
• Implementing the core game mechanics (player turns, disc placement, and flipping).
• Allowing users to restart the game, track scores, and determine the winner.
• Developing a simple algorithm to enable solo gameplay against the computer.
• Enhancing skills in HTML, CSS, and JavaScript while building a complete interactive game.

🔨 Tech stack

📂 File description

FILE	DESCRIPTION
resources	Contains the resources required for the repository.
README.md	The readme file you are currently reading 😉.
about.html	Provides information about the Othello Game.
behavior.js	JavaScript code for dynamic page interactions and animations.
index.html	Main HTML file for the Othello Game.
othello_ai.js	Contains the logic for the Othello Game AI.
othello_game.js	Contains the core game logic for the Othello Game.
rules.html	Contains the rules for playing the Othello Game.
styles.css	CSS stylesheet for the Othello Game layout.

💻 Installation and how to use

Installation:

1. Clone this repository:
   • Open your preferred Terminal.
   • Navigate to the directory where you want to clone the repository.
   • Run the following command:

git clone https://github.com/fchavonet/web-othello_game.git

2. Open the repository you've just cloned.

3. Open the index.html file in a web browser to play the game.

How to use:

1. Once the page is open, the game board will be displayed with an initial setup of discs.

2. Players take turns clicking on empty cells to place their discs. Valid moves will be highlighted.

3. The score is automatically updated as discs are placed. "

4. Press the button at the top-right to reset the game at any time.

You can also test the game online by clicking here.

🔧 What's next ?

• Implement disc-flipping animations.
• Complete the about page.
• Complete the game rules page.
• Improve the overall user interface (UI).
• Add a login system.
• Create an online multiplayer mode.
• Implement a score tracking system with player login.
• Add the ability to save games.
• Enable replays of previous games.
• Introduce a reel AI opponent (with the help of Eonvorax specializing in machine learning).

♥️ Thanks

• Thank all those who have participated in or helped to carry out the project.

👷 Authors

Fabien CHAVONET

• Github: @fchavonet