-
-
Save shelooks16/8afbea0c325bfbe64d8c0b7d98c86b65 to your computer and use it in GitHub Desktop.
| { | |
| "extends": [ | |
| "eslint:recommended", | |
| "plugin:react/recommended", | |
| "plugin:react/jsx-runtime", | |
| "prettier" | |
| ], | |
| "env": { | |
| "browser": true | |
| }, | |
| "parserOptions": { | |
| "ecmaVersion": 2021, | |
| "ecmaFeatures": { | |
| "jsx": true | |
| }, | |
| "sourceType": "module" | |
| }, | |
| "settings": { | |
| "react": { | |
| "version": "detect" | |
| } | |
| }, | |
| "rules": { | |
| "react/prop-types": "off" | |
| } | |
| } |
| { | |
| "trailingComma": "es5", | |
| "tabWidth": 2, | |
| "semi": true, | |
| "singleQuote": true, | |
| "arrowParens": "avoid" | |
| } |
| function calculateWinner(squares) { | |
| const lines = [ | |
| [0, 1, 2], | |
| [3, 4, 5], | |
| [6, 7, 8], | |
| [0, 3, 6], | |
| [1, 4, 7], | |
| [2, 5, 8], | |
| [0, 4, 8], | |
| [2, 4, 6], | |
| ]; | |
| for (let i = 0; i < lines.length; i++) { | |
| const [a, b, c] = lines[i]; | |
| if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { | |
| return squares[a]; | |
| } | |
| } | |
| return null; | |
| } |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <link | |
| href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <title>TIC TAC TOE</title> |
Vite documentation - https://vitejs.dev/
Sass - https://sass-lang.com/
Google Fonts - https://fonts.google.com/
| $green: #12e177; | |
| $orange: #ffc72a; | |
| $blue: #4c43d4; | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: $blue; | |
| color: #fff; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| button { | |
| background: none; | |
| border: none; | |
| outline: none; | |
| &:hover { | |
| cursor: pointer; | |
| } | |
| } | |
| .app { | |
| font-size: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .text-green { | |
| color: $green; | |
| } | |
| .text-orange { | |
| color: $orange; | |
| } | |
| .history-wrapper { | |
| width: 300px; | |
| text-align: center; | |
| margin-bottom: 20px; | |
| .history { | |
| display: inline-block; | |
| padding: 0; | |
| margin: 0; | |
| li { | |
| list-style: none; | |
| text-align: left; | |
| &:before { | |
| content: ''; | |
| border-radius: 50%; | |
| display: inline-block; | |
| height: 5px; | |
| width: 5px; | |
| background-color: $green; | |
| margin-right: 4px; | |
| margin-bottom: 1px; | |
| } | |
| .btn-move { | |
| color: #fff; | |
| &.active { | |
| font-weight: bold; | |
| color: $green; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .status-message { | |
| margin-bottom: 30px; | |
| font-size: 1.2rem; | |
| font-weight: lighter; | |
| span { | |
| font-weight: normal; | |
| } | |
| } | |
| .btn-reset { | |
| font-size: 0.8rem; | |
| color: #fff; | |
| border-radius: 15px; | |
| padding: 12px 18px; | |
| margin-top: 25px; | |
| transition: all 0.2s; | |
| background-color: $blue; | |
| box-shadow: 0px 0px 0px 1px $orange; | |
| &.active { | |
| background-color: $orange; | |
| box-shadow: none; | |
| } | |
| } | |
| .board { | |
| .board-row { | |
| display: flex; | |
| flex-direction: row; | |
| border-bottom: 2px solid #fff; | |
| &:last-child { | |
| border-bottom: none; | |
| } | |
| .square { | |
| width: 80px; | |
| height: 80px; | |
| border-right: 2px solid #fff; | |
| font-size: 2.5rem; | |
| padding: 0; | |
| overflow: hidden; | |
| transition: all 0.2s; | |
| &:last-child { | |
| border-right: none; | |
| } | |
| &.winning { | |
| animation: scaleText 1.4s infinite; | |
| @keyframes scaleText { | |
| 0% { | |
| transform: 2.5rem; | |
| } | |
| 50% { | |
| font-size: 3.5rem; | |
| } | |
| 100% { | |
| font-size: 2.5rem; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .bg-balls { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| min-width: 100%; | |
| z-index: -1; | |
| &:before, | |
| &:after { | |
| content: ''; | |
| position: absolute; | |
| width: 150px; | |
| height: 150px; | |
| border-radius: 50%; | |
| } | |
| &:before { | |
| background-color: $orange; | |
| right: -75px; | |
| bottom: -75px; | |
| @media screen and (min-width: 476px) { | |
| width: 220px; | |
| height: 220px; | |
| right: -110px; | |
| bottom: -110px; | |
| } | |
| } | |
| &:after { | |
| background-color: $green; | |
| top: -75px; | |
| left: -75px; | |
| @media screen and (min-width: 476px) { | |
| width: 220px; | |
| height: 220px; | |
| top: -110px; | |
| left: -110px; | |
| } | |
| } | |
| } |
thank you
tictactoe.mp4
Certainly! Here's a brief description and logic for a simple Tic-Tac-Toe game using React:
Description:
The Tic-Tac-Toe game is a classic two-player game where the players take turns marking a cell in a 3x3 grid with their respective symbols (typically 'X' and 'O'). The player who succeeds in placing three of their symbols in a horizontal, vertical, or diagonal row wins the game. If the grid is filled without any player achieving three in a row, the game ends in a draw.
Logic:
Board State:
Use a state to represent the 3x3 grid of the Tic-Tac-Toe board.
Each cell in the grid can be represented by a state variable, and it can be either 'X', 'O', or empty.
Player Turn:
Maintain a state variable to keep track of the current player's turn.
Alternate the player turn after each move.
Handling Clicks:
Attach a click event handler to each cell of the grid.
On a player's turn, when a cell is clicked, update the state to reflect the player's symbol in the clicked cell ('X' or 'O').
Check for Winner:
After each move, check if the current player has achieved three in a row horizontally, vertically, or diagonally.
If a winner is found, end the game and display the winner.
Check for Draw:
If the entire board is filled and no winner is found, declare a draw.
Reset the Game:
Provide an option to reset the game after it concludes (either due to a win or a
Thanks @Badshahshvm !
Thanks!
code is best for programming