top of page
  • Facebook
  • Twitter
  • Instagram

Online Othello

June 2022

OthelloByCraig.com

Github

Summary

This is an online version of the 1v1 game Othello that I developed in Javascript with a backend in Python. Users can play in a guest mode against an AI opponent that employs a minimax algorithm with alpha-beta pruning to chose its moves.

​

Users can also create an account and play against online opponents. The results of all their games are saved to a database (MongoDB) and displayed in a table on the home page.

Motivation

After completing the Sudoku project, which is a single-player game, I wanted to make an online game where you could play against an opponent online, which would give me an opportunity to learn the basics of using websockets to send and receive information on the web. After all, while I was very happy with the way that my Sudoku game turned out, it didn't really feel like an "online" game. It was more a standalone game that happened to exist on a website.

​

I also wanted to get some experience with storing and retrieving information from a database, and I wanted more practice with using CSS, particularly with designing responsive pages.

Takeaways

Similar to my experience with the Sudoku game, I found that developing the mechanics of the game, especially the computer's AI, was the most interesting and rewarding part of this project. It was also a thrill to get online play working with websockets. I did the initial testing and debugging of online play by logging into two separate accounts in separate browsers from my computer, and it was very cool when I first saw a move made by one player show up simultaneously on both game boards.

 

I did enjoy the front-end development more in this project because I felt more familiar with the workflow and had a better sense of how to design the layout from the start using CSS grid layout. Overall, I am happy with how the game looks and plays. However, this project helped solidify my suspicion that front-end development was not the best fit for my skill set and interests.

Guest Mode

Game in guest mode.png

  • Users can play against an AI opponent in guest mode. The user can adjust the AI's difficult setting, which determines how many moves ahead the AI looks to calculate its best move.

In-Game Controls

hint offered.png
show moves mode.png

  • Hints are available to the user. On clicking the hint button, a light green circle will flash in the space for the recommended move (left image).

  • Hints are unlimited against the AI. When playing against a human opponent, each player has three hints.

  • The "Show Moves" slider at the bottom right of board will display the legal moves available for whoever's turn it is (right image).

Home Page After Logging In

  • After logging in, the home page will display the user's record and game log, which shows the date and time of each game, the opponent, outcome and final score.

  • The user can also send invitations to other users and view any invitations they received.

  • Note: the game log table contains a vertical scroll bar that Chrome's screenshot function does not capture.

Sending Invitations

dave after jennifer accepted invitation.png

  • The user can send invitations to anyone with an account, whether they are online at the moment or not.

  • Sent invitations will appear under the "Sent" heading, with an option to cancel the invitation.

  • If the recipient is offline, their name will appear greyed out and in italics (left image).

  • Once the recipient logs in, their name will change to the normal font to indicate they are online (middle).

  • When the opponent has accepted the invitation, their name will appear under the "Accepted" heading, with buttons for the user to either join or cancel the game.

    • This last confirmation was included so that a user will not have an ongoing game interrupted and be forced to join a game when the recipient of the invitation accepts.​

Receiving Invitations

waiting animation 1 cropped.jpg
waiting animation 2 cropped.jpg
waiting animation 3 cropped.jpg

  • Received invitations will appear under the "Received" heading with options to accept or decline the invitation (left image).

  • If the user accepts, the invitation will be removed from the Online Play ribbon, and the game board will be initialized, including assigning colors to each player (right image).

  • An animated message is displayed while waiting for the sender to join the game (bottom image).

Winning Screen

  • At the end of the game, players can agree to a rematch or leave.

bottom of page