Infinity Tic Tac Toe - CS50x Final Project 2024

Table Of Content

1. TL;DR
2. Compile
3. Introduction
4. Differences from Traditional Tic Tac Toe
5. File Descriptions
   1. ai.ts
   2. click.ts
   3. environment.ts
   4. index.ts
   5. settings.ts
   6. util.ts
   7. won.ts
6. Challenges and Issues
7. Technology Choices
   1. Why TypeScript
   2. Why JS Canvas
   3. Why JSDocs
8. Code Structure
   1. Naming Conventions
      1. Functions and classes
      2. Variables
   2. Commenting and Documentation
      1. Comments
      2. Documentation
   3. Code styling
   4. File and Directory Structure
   5. Avoiding Magic Numbers and Strings
   6. Code Reusability
9. Tools
   1. Necessary Tools
   2. Recommended Tools

TL;DR

Infinity Tic Tac Toe is an modified version of Tic Tac Toe that can be played by 2 or more players, where the board size determines the number of pieces each player has. For example, on a 3x3 board, each player has 3 pieces.

Compile

To compile your ts code into js code you will need to run the npm run watch command in your terminal

Introduction

Infinity Tic Tac Toe is a new take on the classic game, adding strategic depth and complexity. Players need to think ahead not just about placing their pieces but also about managing those already on the board. This version offers a more challenging and engaging experience compared to the traditional game.

Differences from Traditional Tic Tac Toe

Unlike traditional Tic Tac Toe, Infinity Tic Tac Toe offers:

• A variable number of pieces based on board size. For example, a 3x3 board allows for 3 pieces per player, while a 4x4 board allows for 4 pieces per player.
• Enhanced strategic planning and resource management. When all pieces are placed, players must move the piece that has been on the board the longest.

File Descriptions

ai.ts

Handles the ai logic for the game, including move generation and strategy.

click.ts

Handles click events, cursor changes and mouse movements within the game.

environment.ts

Contains environment variables that is used throughout the project.

index.ts

Serves as the entry point of the application, initializing the game and rendering the main components.

settings.ts

Stores game settings and configurations, allowing customization of game parameters.

util.ts

Provides utility functions that are used by multiple parts of the application to avoid code duplication.

won.ts

Determines the winning conditions and checks if a player has won the game.

Challenges and Issues

When I tried to develop the AI for my game, I initially attempted to utilize the minimax algorithm. However, it didn't work well with the unique rules of my version of Tic Tac Toe. After extensive research, I discovered heuristic algorithms, which proved to be highly effective in this scenario. This approach allowed the AI to handle the game's complexity and provide a challenging opponent.

Technology Choices

Why TypeScript

TypeScript was chosen for its strong typing capabilities, which enhance code reliability and maintainability. By catching potential errors at compile-time rather than at runtime.

Why JS Canvas

The JS Canvas API was chosen for rendering the game due to its performance and flexibility. The familiarity and ease of use from previous projects also contributed to its selection.

Why JSDocs

JSDocs provides comprehensive documentation, making the codebase easier to understand and contribute to.

Code Structure

Naming Conventions

Functions and classes

Use PascalCase for both classes and functions.

Variables

Use camelCase for variables

Commenting and Documentation

Comments

Use comments to explain the "why" and not the "what". Comments should be used sparingly to avoid cluttering the code, focusing on explaining complex or non-obvious parts of the implementation.

Documentation

Maintain up-to-date JSDocs for all functions and classes.

Code styling

Install the Prettier extension so everyone can utilize the same code styling settings (.prettierrc). Prettier automatically formats the code according to predefined rules, ensuring that all developers follow the same style guidelines.

File and Directory Structure

Place code in the "src" directory and place images, SVGs, and other assets in the "assets" directory. This separation ensures a well-structured project that is easy to navigate.

Avoiding Magic Numbers and Strings

Avoid using magic numbers and strings directly in the code. Instead, define them as constants with meaningful names. This practice enhances code readability and makes it easier to update.

Code Reusability

Strive for DRY (Don't Repeat Yourself) principles by abstracting reusable code into classes, functions, or variables.

Tools

Necessary Tools

• Code Spell Checker - Helps in identifying and correcting spelling errors in the code.
• Live Server - Provides a local development server with live reload capability.
• Prettier - Ensures consistent code formatting across the project.

Recommended Tools

• Auto Rename Tag - Automatically renames paired HTML tags.
• Better Comments - Enhances comment readability with color-coded annotations.
• Class Collapse - Allows for easy navigation and collapsing of class definitions.
• CSS Peek - Provides quick access to CSS definitions directly from HTML files.
• GitLens — Git supercharged - Enhances the Git capabilities within VSCode, making it easier to manage version control.