marijanasevo/unbeatable-game

JavaScript game with OOP — WebPack — Semantic HTML5 — Sass — Grid & Flexbox

Tic Tac Toe solution

This is a solution to the Tic Tac Toe challenge on Frontend Mentor.

Table of contents

• Tic Tac Toe solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
    • Links
  • My process
    • Built with
    • What I learned
    • Optimizations
  • Install
  • Author

Overview

The challenge

Users are able to:

• View the optimal layout for the game depending on their device's screen size (lowest 340px)
• See hover states for all interactive elements on the page
• Play the game either solo vs the computer or multiplayer against another person
• Bonus 1: Instead of having the computer randomly make their moves, try making it clever so it’s proactive in blocking your moves and trying to win

Screenshot

Links

• Live URL: Live site

My process

Built with

• Semantic HTML5 markup
• Sass
• CSS custom properties
• Grid
• Flexbox
• JavaScript
• OOP
• WebPack

What I learned

To make the Tic Tac Toe game against CPU unbeatable I applied minimax algorithm (which you can find here). I also have been experimenting with webpack and I can see how this tool can be useful when working on bigger projects. Debugging with webpack, ES6 and Babel can be less convenient, next time I'll have to look up webpack source-map.

Optimizations

localStorage could be implemented.

Install

1. Clone the repository

git clone https://github.com/marijanasevo/Tic-Tac-Toe-game.git

2. Change into the project directory:

cd Tic-Tac-Toe-game

3. Install dependencies npm install

4. Start the application with npm run serve or run npm run build to bundle your application.

Author

• Website - webdevlpr.com
• Frontend Mentor - @Curiositz