Giter VIP home page Giter VIP logo

tik-tak-toe-1's Introduction

TIC-TAC-TOE

This is an easy game of tic tac toe made with HTML, CSS, JS.

Tic Tac Toe is a site that hopes to demonstrate how pure JavaScript works in a real-world context. The site will be targeted toward people who not only love to implement more advanced JavaScript concepts but also logic. Tic Tac Toe is a fully responsive JavaScript logic game that will allow users to compite agaist the computer.

devises reponsive

Features

  • The Tic Tac Toe Logo and heading

    • Featured at the top of the page, Tic Tac Toe logo and Heading is easy to see for the user and brings some memories from your childhood. The users are able to see the name of the game.
    • You find the rules of the game at the left of the page. It is easy to read and understand. As most of us is familiar with this game.

devises reponsive

The Game Area

  • This section will allow the user to play the Tic Tac Toe. The user will be able to easily see the game table.
  • The user will be able to compete against the computer using the Os meanwhile the computer will be using the Xs.

devises reponsive

Features to implement

  • Add a section that allow the user to choose to play with O or X.

  • Add a section that shows the score of the user and the AI.

  • Add a light/dark mode.

Game explanation and AI integration

  • The game is really simple, consists to have three Os in a row horizontal, vertical or diagonal to win.

  • I used an AI to compete against the user called "minimax algorithms". It is made to test the patience of the user before the person is going to break his own device since AI is unbeatable.

Testing

  • My project is responsive in different browsers: Chrome, Safari and FireFox.
  • This project is responsive and looks good and is working in all the standard screen sizes. I tested it using devtools device toolbar.
  • I confirmed that the Header, Game are readable and easy to understand.
  • The site is working fine with all the resolutions such as:

1920×1080 (9.94%) 1366×768 (6.22%) 360×640 (5.88%) 414×896 (4.21%) 1536×864 (3.94%) 375×667 (3.74%)

  • The game is working fine, once you will manage to beat the AI the cell will color in darkblue and a message will appear with the opposition to replay the game. devises reponsive

  • In case of tie game, the background will color itself with a coral background.

devises reponsive

  • In case of user winning the game, after making three O in a row, the background will color pink.

devises reponsive

Validator Testing

HTML

device reponsive

CSS

device reponsive

JS

device reponsive

Lighthouse score

device reponsive

Deployment

  • The website was deployed to GitHub pages. The steps to deploy are as follows:

    • In the GitHub repository, navigate to the setting tab
    • From the soursr section menu, select Pages
    • Select the live link that I provided below

Cloning a repository

    * Link below
   ###  https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository
  • On GitHub.com, navigate to the main page of the repository.

  • Above the list of files, click Code. "Code" button

  • Copy the URL for the repository.

  • To clone the repository using HTTPS, under "HTTPS", click. To clone the repository using an SSH key, including a certificate issued by your organization's SSH certificate authority, click SSH, then click.

To clone a repository using GitHub CLI, click GitHub CLI, then click . The clipboard icon for copying the URL to clone a repository with GitHub CLI Open Terminal.

Change the current working directory to the location where you want the cloned directory.

Type git clone, and then paste the URL you copied earlier.

Cloning into Spoon-Knife... remote: Counting objects: 10, done. remote: Compressing objects: 100% (8/8), done. remove: Total 10 (delta 1), reused 10 (delta 1) Unpacking objects: 100% (10/10), done.

Credit

  • I took ispiration from the CI Love Math Project.
  • I watched plenty of videos on youtube to get some inspiration of javascritps project, that helped me to create the Tic Tac oe game.

Implement Minimax algorithm

A minimax algorithm is a recursive program written to find the best gameplay that minimizes any tendency to lose a game while maximizing any opportunity to win the game

Few of the YouTube channel that i watched to get inspired : https://www.youtube.com/watch?v=oZrp3Atkz18 https://www.youtube.com/watch?v=AzvpHNkjqsg https://www.youtube.com/watch?v=P2TcQ3h0ipQ https://www.youtube.com/watch?v=Y-GkMjUZsmM

tik-tak-toe-1's People

Contributors

stnobile avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.