Martin's Tic-Tac-Toe

tic-tac-toe_demo-vid.mov

The project idea

My idea is to make the classic Tic-Tac-Toe game. 2 players putting X and O-s in the 3x3 grid. The first one to accomplish 3 in a row wins. Else a draw is forced.

Try it!

https://mpalkov.github.io/tic-tac-toe/

Technical requirements

• Render a game in the browser.

• Have logic for winning and/or losing and show feedback to the player in either case:

• Your game must have logic that allows the player to win or lose.

• Your game code must be organized in separate files for HTML, CSS, and JavaScript.

• Use plain JavaScript for DOM manipulation.

• Your game entities and elements must be organized using classes and OOP.

• Have a repo on GitHub.

• Have at least one (1) commit per day that you worked on.

• You must deploy your game online using GitHub Pages so anyone can play it.

• Your code should follow the principles of KISS (Keep It Simple Stupid) and DRY (Don’t Repeat Yourself).

Backlog

If I have time, I will apply some of these extras

• add restart game button
• add hover effect on empty cells
• add animations
• add score (X wins: # | O wins: #)
  • add "New Game" button
• add option for computer as second-player
• add sound effects
• add more difficulty levels (5x5 / 7x7)
• make it more fun
• Integrate with OpenAI API and play against chat-GPT (will require backend with openAI NodeJS library and API Key)

Approach and learnings

• I have connected HTML, CSS and JavaScript files to make it all work.

• I have used Object Oriented programming to create Game class and then create class AiGame which extends the Game Class, it has some more methods with algorhytms controlling the AI turns.

• I tried to make the code as much clear and readable as possible. Grouping related code into various files.

• I come from C language programming and I find it very useful to create constants (constant variables) which can be reused in multiple places and if a change is required, you have to modify it in one place only. As well, It can be used to increase readability for humans. In C the term is macros.

for example:

const IS_TEST = true;
const NOT_TEST = false;

addClickHandlers = () => {
        const cells = document.querySelectorAll(".cell");
        cells.forEach(element => {
            element.addEventListener("click", (event) => {
                this.onClickActions(element, cells, NOT_TEST);
                if (myGame.player2 === AI && myGame.whosTurn === O_PLAYER) {
                    this.aiMove(cells);
                }
            }, {once:true});
        });
    }

Presentation:

https://docs.google.com/presentation/d/13q7yCYQIQz0rvNxiOEd1Z0hCP9i_GDIZ49CaKEDEl1M/edit?usp=sharing