├── tic-tac-toe
    ├── main.scss
    ├── 9999-removebg-preview.png
    ├── _reset.scss
    ├── symbol-defs.svg
    ├── style.css
    ├── main.min.css.map
    ├── main.css.map
    ├── index.html
    ├── main.min.css
    ├── _game.scss
    ├── main.css
    └── script.js
└── README.md


/tic-tac-toe/main.scss:
--------------------------------------------------------------------------------
1 | @import "./base/reset";
2 | @import "./components/game";       


--------------------------------------------------------------------------------
/tic-tac-toe/9999-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Vinaykumarmahato/Tic-Tac-Toe-Game/HEAD/tic-tac-toe/9999-removebg-preview.png


--------------------------------------------------------------------------------
/tic-tac-toe/_reset.scss:
--------------------------------------------------------------------------------
 1 | h1,
 2 | h2,
 3 | h3,
 4 | h4,
 5 | h5,
 6 | h6,
 7 | p {
 8 |   margin: 0;
 9 |   padding: 0;
10 | }
11 | 
12 | a{
13 |     text-decoration: none;
14 | }
15 | 
16 | ul {
17 |   list-style: none;
18 |   padding-left: 0;
19 |   margin: 0;
20 | }
21 | 
22 | *{
23 |     margin: 0;
24 |     padding: 0;
25 | }
26 | 
27 | body{
28 |     margin: 0;
29 |     font-family: 'Nunito', sans-serif;
30 |     font-style: normal;
31 |     font-weight: 400;
32 | }


--------------------------------------------------------------------------------
/tic-tac-toe/symbol-defs.svg:
--------------------------------------------------------------------------------
 1 | <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 | <defs>
 3 | <symbol id="icon-cross" viewBox="0 0 32 32">
 4 | <path d="M2.462 32l-2.462-2.462 13.538-13.538-13.538-13.538 2.462-2.462 13.538 13.538 13.538-13.538 2.462 2.462-13.538 13.538 13.538 13.538-2.462 2.462-13.538-13.538-13.538 13.538z"></path>
 5 | </symbol>
 6 | <symbol id="icon-circle" viewBox="0 0 32 32">
 7 | <path d="M16 0c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM16 28c-6.627 0-12-5.373-12-12s5.373-12 12-12c6.627 0 12 5.373 12 12s-5.373 12-12 12z"></path>
 8 | </symbol>
 9 | </defs>
10 | </svg>


--------------------------------------------------------------------------------
/tic-tac-toe/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |     box-sizing: border-box;
 3 |     padding: 0;
 4 |     margin: 0;
 5 |   }
 6 |   
 7 |   .container {
 8 |     display: flex;
 9 |     background: #fff;
10 |     align-content: center;
11 |     justify-content: center;
12 |     flex-direction: column;
13 |     min-width: 700px;
14 |     min-height: 500px;
15 |     border-radius: 5%;
16 |     margin: auto;
17 |   }
18 |   
19 |   table {
20 |     border-collapse: collapse;
21 |     margin: auto;
22 |   }
23 |   
24 |   td {
25 |     background-color: #666;
26 |     border: 5px solid white;
27 |     font-size: 80px;
28 |     color: #fff;
29 |     border-radius: 10%;
30 |   }
31 |   
32 |   #player {
33 |     padding: 1rem;
34 |   }
35 |   
36 |   body {
37 |     display: flex;
38 |     background: #eee url('https://source.unsplash.com/1600x900/?nature') no-repeat
39 |       center center/cover;
40 |     height: 100vh;
41 |     width: 100%;
42 |     overflow: hidden;
43 |   }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### Tic Tac Toe Game
 2 | 
 3 | ## Table of Contents
 4 | - -Introduction
 5 | - Demo
 6 | - Features
 7 | - Technologies Used
 8 | - How to Play
 9 | 
10 | ## Introduction
11 | This is a simple Tic Tac Toe game built using HTML, CSS, and JavaScript. The game allows two players to take turns and try to get three of their symbols (either "X" or "O") in a row to win.
12 | 
13 | ## Demo
14 | You can play the game here [play](https://tic-tac-toe-game-adv.netlify.app/)
15 | 
16 | ## Features
17 | - Classic Tic Tac Toe gameplay.
18 | - Keeps track of X and O wins, and draws.
19 | - Responsive design, suitable for various devices like mobile, laptop, and desktop.
20 | - 
21 | ## Technologies Used
22 | - HTML
23 | - CSS
24 | - JavaScript
25 | - Google Fonts API
26 |   
27 | ## How to Play
28 | - Open the Tic Tac Toe game in your web browser.
29 | - The game starts with "X" playing first.
30 | - Click on an empty cell to make a move. The cell will be filled with "X" or "O" depending on the current player.
31 | - The game continues until one player wins by getting three of their symbols in a row, or the game ends in a draw.
32 | 


--------------------------------------------------------------------------------
/tic-tac-toe/main.min.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../sass/base/_reset.scss","../sass/components/_game.scss"],"names":[],"mappings":"AAAA,oBAOE,QAAA,CACA,SAAA,CAGF,EACI,oBAAA,CAGJ,GACE,eAAA,CACA,cAAA,CACA,QAAA,CAGF,EACI,QAAA,CACA,SAAA,CAGJ,KACI,QAAA,CACA,+BAAA,CACA,iBAAA,CACA,eAAA,CC9BJ,GACI,iBAAA,CACA,aAAA,CACA,cAAA,CACA,eAAA,CAGJ,eACI,YAAA,CACA,qBAAA,CACA,kBAAA,CACA,sBAAA,CACA,eAAA,CAGJ,cACI,WAAA,CACA,YAAA,CACA,iBAAA,CACA,wBAAA,CACA,kBAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,kBAAA,CACA,QAAA,CAEA,2BACI,WAAA,CACA,YAAA,CACA,wBAAA,CACA,kBAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,qBAAA,CACA,cAAA,CACA,YAAA,CACA,UAAA,CACA,OAAA,CAIR,YACI,cAAA,CACA,aAAA,CACA,aAAA,CAGJ,eACI,WAAA,CACA,cAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,cAAA,CACA,wBAAA,CACA,QAAA,CACA,kBAAA,CAGJ,MACI,WAAA,CACA,YAAA,CACA,wBAAA,CACA,kBAAA,CACA,cAAA,CACA,UAAA,CACA,eAAA,CACA,YAAA,CACA,kBAAA,CACA,sBAAA,CACA,iEAAA,CAEA,YACI,UAAA,CACA,wBAAA,CAGJ,UACI,UAAA,CACA,WAAA,CACA,SAAA,CAIR,YACI,WAAA,CACA,WAAA,CACA,wBAAA,CACA,kBAAA,CACA,cAAA,CACA,UAAA,CACA,aAAA,CAGJ,KACI,wBAAA,CAEA,WACI,wBAAA,CAIR,MACI,wBAAA,CAEA,YACI,wBAAA,CAKR,2DACI,GACI,cAAA,CAGJ,cACI,WAAA,CACA,WAAA,CACA,kBAAA,CAEA,2BACI,UAAA,CACA,WAAA,CACA,kBAAA,CACA,cAAA,CAIR,YACI,cAAA,CAGJ,eACI,WAAA,CACA,cAAA,CACA,QAAA,CACA,kBAAA,CAEA,qBACI,UAAA,CACA,WAAA,CACA,kBAAA,CACA,cAAA,CAEA,yBACI,UAAA,CACA,WAAA,CAKZ,YACI,WAAA,CACA,WAAA,CACA,kBAAA,CACA,cAAA,CACA,UAAA,CAAA","file":"main.min.css"}


--------------------------------------------------------------------------------
/tic-tac-toe/main.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../sass/base/_reset.scss","main.css","../sass/components/_game.scss"],"names":[],"mappings":"AAAA;;;;;;;EAOE,SAAA;EACA,UAAA;ACCF;;ADEA;EACI,qBAAA;ACCJ;;ADEA;EACE,gBAAA;EACA,eAAA;EACA,SAAA;ACCF;;ADEA;EACI,SAAA;EACA,UAAA;ACCJ;;ADEA;EACI,SAAA;EACA,iCAAA;EACA,kBAAA;EACA,gBAAA;ACCJ;;AC/BA;EACI,kBAAA;EACA,cAAA;EACA,eAAA;EACA,gBAAA;ADkCJ;;AC/BA;EACI,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,gBAAA;ADkCJ;;AC/BA;EACI,YAAA;EACA,aAAA;EACA,kBAAA;EACA,yBAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,mBAAA;EACA,SAAA;ADkCJ;AChCI;EACI,YAAA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,sBAAA;EACA,eAAA;EACA,aAAA;EACA,cAAA;EACA,QAAA;ADkCR;;AC9BA;EACI,eAAA;EACA,cAAA;EACA,cAAA;ADiCJ;;AC9BA;EACI,YAAA;EACA,eAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,eAAA;EACA,yBAAA;EACA,SAAA;EACA,mBAAA;ADiCJ;;AC9BA;EACI,YAAA;EACA,aAAA;EACA,yBAAA;EACA,mBAAA;EACA,eAAA;EACA,cAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,qEAAA;ADiCJ;AC/BI;EACI,WAAA;EACA,yBAAA;ADiCR;AC9BI;EACI,WAAA;EACA,YAAA;EACA,aAAA;ADgCR;;AC5BA;EACI,YAAA;EACA,YAAA;EACA,yBAAA;EACA,mBAAA;EACA,eAAA;EACA,cAAA;EACA,cAAA;AD+BJ;;AC5BA;EACI,yBAAA;AD+BJ;AC7BI;EACI,yBAAA;AD+BR;;AC3BA;EACI,yBAAA;AD8BJ;AC5BI;EACI,yBAAA;AD8BR;;AC1BA,eAAA;AACA;EACI;IACI,eAAA;ED6BN;EC1BE;IACI,YAAA;IACA,YAAA;IACA,mBAAA;ED4BN;EC1BM;IACI,WAAA;IACA,YAAA;IACA,mBAAA;IACA,eAAA;ED4BV;ECxBE;IACI,eAAA;ED0BN;ECvBE;IACI,YAAA;IACA,eAAA;IACA,SAAA;IACA,mBAAA;EDyBN;ECvBM;IACI,WAAA;IACA,YAAA;IACA,mBAAA;IACA,eAAA;EDyBV;ECvBU;IACI,WAAA;IACA,YAAA;EDyBd;ECpBE;IACI,YAAA;IACA,YAAA;IACA,mBAAA;IACA,eAAA;IACA,cAAA;EDsBN;AACF","file":"main.css"}


--------------------------------------------------------------------------------
/tic-tac-toe/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>Tic Tac Toe ADV </title>
 8 |     <link rel="icon" href="./other/tic-icon.ico">
 9 |     <link rel="stylesheet" href="main.css">
10 |     <link rel="preconnect" href="https://fonts.googleapis.com">
11 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 |     <link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
13 | </head>
14 | <body>
15 |     <h1>ADV Indian Coder</h1>
16 |     <h1>Tic Tac Toe Game</h1>
17 |     <div id="gameContainer">
18 |         <div class="player-cards">
19 |             <div class="player-card">
20 |               <p>X wins:</p>
21 |               <p class="x-win-count">0</p>
22 |             </div>
23 |             <div class="player-card">
24 |                 <p>Draws:</p>
25 |                 <p class="draw-count">0</p>
26 |               </div>
27 |             <div class="player-card">
28 |                 <p>O wins:</p>
29 |                 <p class="o-win-count">0</p>
30 |             </div>
31 |         </div>
32 |         <h2 id="statusText"></h2>
33 |         <div id="cellContainer">
34 |             <div cellIndex="0" class="cell"></div>
35 |             <div cellIndex="1" class="cell"></div>
36 |             <div cellIndex="2" class="cell"></div>
37 |             <div cellIndex="3" class="cell"></div>
38 |             <div cellIndex="4" class="cell"></div>
39 |             <div cellIndex="5" class="cell"></div>
40 |             <div cellIndex="6" class="cell"></div>
41 |             <div cellIndex="7" class="cell"></div>
42 |             <div cellIndex="8" class="cell"></div>
43 |         </div>
44 |         <button id="restartBtn">Restart</button>
45 |     </div>
46 |     <script src="script.js"></script>
47 | </body>
48 | </html>


--------------------------------------------------------------------------------
/tic-tac-toe/main.min.css:
--------------------------------------------------------------------------------
1 | h1,h2,h3,h4,h5,h6,p{margin:0;padding:0}a{text-decoration:none}ul{list-style:none;padding-left:0;margin:0}*{margin:0;padding:0}body{margin:0;font-family:"Nunito",sans-serif;font-style:normal;font-weight:400}h1{text-align:center;color:#252525;font-size:60px;margin-top:20px}#gameContainer{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:20px}.player-cards{width:440px;height:120px;padding:10px 10px;background-color:#151515;border-radius:25px;display:flex;align-items:center;justify-content:center;flex-direction:row;gap:10px}.player-cards .player-card{width:140px;height:120px;background-color:#252525;border-radius:25px;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:20px;display:flex;color:#fff;gap:5px}#statusText{font-size:40px;color:#252525;margin:20px 0}#cellContainer{width:460px;padding:10px 0;display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;background-color:#151515;gap:10px;border-radius:25px}.cell{width:140px;height:140px;background-color:#252525;border-radius:25px;cursor:pointer;color:#fff;font-size:120px;display:flex;align-items:center;justify-content:center;transition:scale .4s ease-in-out,background-color .4s ease-in-out}.cell:hover{scale:1.03;background-color:#4d4d4d}.cell svg{width:80px;height:80px;fill:#fff}#restartBtn{width:340px;height:80px;background-color:#151515;border-radius:25px;font-size:35px;color:#fff;margin:20px 0}.win{background-color:#2d412d}.win:hover{background-color:#2d412d}.draw{background-color:#374d5c}.draw:hover{background-color:#374d5c}@media screen and (min-width: 375px)and (max-width: 480px){h1{font-size:40px}.player-cards{width:300px;height:70px;border-radius:15px}.player-cards .player-card{width:90px;height:70px;border-radius:15px;font-size:18px}#statusText{font-size:30px}#cellContainer{width:310px;padding:10px 0;gap:10px;border-radius:15px}#cellContainer .cell{width:90px;height:90px;border-radius:15px;font-size:75px}#cellContainer .cell svg{width:50px;height:50px}#restartBtn{width:210px;height:50px;border-radius:15px;font-size:26px;color:#fff}}/*# sourceMappingURL=main.min.css.map */


--------------------------------------------------------------------------------
/tic-tac-toe/_game.scss:
--------------------------------------------------------------------------------
  1 | h1{
  2 |     text-align: center;
  3 |     color: #12e6b1;
  4 |     font-size: 60px;
  5 |     margin-top: 20px;
  6 | }
  7 | 
  8 | #gameContainer{
  9 |     display: flex;
 10 |     flex-direction: column;
 11 |     align-items: center;
 12 |     justify-content: center;
 13 |     margin-top: 20px;
 14 | }
 15 | 
 16 | .player-cards{  
 17 |     width: 440px;
 18 |     height: 120px;
 19 |     padding: 10px 10px;
 20 |     background-color: #151515;
 21 |     border-radius: 25px;
 22 |     display: flex;
 23 |     align-items: center;
 24 |     justify-content: center;
 25 |     flex-direction: row;
 26 |     gap: 10px;
 27 | 
 28 |     .player-card{
 29 |         width: 140px;
 30 |         height: 120px;
 31 |         background-color: #252525;
 32 |         border-radius: 25px;
 33 |         display: flex;
 34 |         align-items: center;
 35 |         justify-content: center;
 36 |         flex-direction: column;
 37 |         font-size: 20px;
 38 |         display: flex;
 39 |         color: #23dd12;
 40 |         gap: 5px;
 41 |     }
 42 | }
 43 | 
 44 | #statusText{
 45 |     font-size: 40px;
 46 |     color: #12d83d;
 47 |     margin: 20px 0;
 48 | }
 49 | 
 50 | #cellContainer{
 51 |     width: 460px;
 52 |     padding: 10px 0;
 53 |     display: flex;
 54 |     flex-direction: row;
 55 |     justify-content: center;
 56 |     flex-wrap: wrap;
 57 |     background-color: #151515;
 58 |     gap: 10px;
 59 |     border-radius: 25px;
 60 | }
 61 | 
 62 | .cell{
 63 |     width: 140px;
 64 |     height: 140px;
 65 |     background-color: #252525;
 66 |     border-radius: 25px;
 67 |     cursor: pointer;
 68 |     color: #FFFFFF;
 69 |     font-size: 120px;
 70 |     display: flex;
 71 |     align-items: center;
 72 |     justify-content: center;
 73 |     transition: scale .4s ease-in-out, background-color .4s ease-in-out;
 74 | 
 75 |     &:hover{
 76 |         scale: 1.03;
 77 |         background-color: #4D4D4D;
 78 |     }
 79 | 
 80 |     svg{
 81 |         width: 80px;
 82 |         height: 80px;
 83 |         fill: #FFFFFF;
 84 |     }
 85 | }
 86 | 
 87 | #restartBtn{
 88 |     width: 340px;
 89 |     height: 80px;
 90 |     background-color: #151515;
 91 |     border-radius: 25px;
 92 |     font-size: 35px;
 93 |     color: #FFFFFF;
 94 |     margin: 20px 0;
 95 | }
 96 | 
 97 | .win {
 98 |     background-color: #2D412D;
 99 | 
100 |     &:hover{
101 |         background-color: #2D412D;
102 |     }
103 | }
104 | 
105 | .draw{
106 |     background-color: #374D5C;
107 | 
108 |     &:hover{
109 |         background-color: #374D5C;
110 |     }
111 | }
112 | 
113 | /* SMARTPHONE */
114 | @media screen and (min-width: 375px) and (max-width: 480px){
115 |     h1{
116 |         font-size: 40px;
117 |     }
118 |     
119 |     .player-cards{
120 |         width: 300px;
121 |         height: 70px;
122 |         border-radius: 15px;
123 | 
124 |         .player-card{
125 |             width: 90px;
126 |             height: 70px;
127 |             border-radius: 15px;
128 |             font-size: 18px;
129 |         }
130 |     }
131 |     
132 |     #statusText{
133 |         font-size: 30px;
134 |     }
135 | 
136 |     #cellContainer{
137 |         width: 310px;
138 |         padding: 10px 0;
139 |         gap: 10px;
140 |         border-radius: 15px;
141 | 
142 |         .cell{
143 |             width: 90px;
144 |             height: 90px;
145 |             border-radius: 15px;
146 |             font-size: 75px;
147 | 
148 |             svg{
149 |                 width: 50px;
150 |                 height: 50px;
151 |             }
152 |         }
153 |     }
154 | 
155 |     #restartBtn{
156 |         width: 210px;
157 |         height: 50px;
158 |         border-radius: 15px;
159 |         font-size: 26px;
160 |         color: #8e89d4;
161 |     }
162 | }


--------------------------------------------------------------------------------
/tic-tac-toe/main.css:
--------------------------------------------------------------------------------
  1 | h1,
  2 | 
  3 | h3,
  4 | h4,
  5 | h5,
  6 | h6,
  7 | p {
  8 |   margin: 0;
  9 |   padding: 0;
 10 | }
 11 | 
 12 | h1{
 13 |   color: #2cdd15;
 14 | }
 15 | 
 16 | a {
 17 |   text-decoration: none;
 18 | }
 19 | 
 20 | ul {
 21 |   list-style: none;
 22 |   padding-left: 0;
 23 |   margin: 0;
 24 | }
 25 | 
 26 | * {
 27 |   margin: 0;
 28 |   padding: 0;
 29 | }
 30 | 
 31 | body {
 32 |   margin: 0;
 33 |   font-family: "Nunito", sans-serif;
 34 |   font-style: normal;
 35 |   font-weight: 400;
 36 | }
 37 | 
 38 | h1 {
 39 |   text-align: center;
 40 |   color: #252525;
 41 |   font-size: 60px;
 42 |   margin-top: 20px;
 43 | }
 44 | 
 45 | #gameContainer {
 46 |   display: flex;
 47 |   flex-direction: column;
 48 |   align-items: center;
 49 |   justify-content: center;
 50 |   margin-top: 20px;
 51 | }
 52 | 
 53 | .player-cards {
 54 |   width: 440px;
 55 |   height: 120px;
 56 |   padding: 10px 10px;
 57 |   background-color: #151515;
 58 |   border-radius: 25px;
 59 |   display: flex;
 60 |   align-items: center;
 61 |   justify-content: center;
 62 |   flex-direction: row;
 63 |   gap: 10px;
 64 | }
 65 | .player-cards .player-card {
 66 |   width: 140px;
 67 |   height: 120px;
 68 |   background-color: #252525;
 69 |   border-radius: 25px;
 70 |   display: flex;
 71 |   align-items: center;
 72 |   justify-content: center;
 73 |   flex-direction: column;
 74 |   font-size: 20px;
 75 |   display: flex;
 76 |   color: #f6fcf6;
 77 |   gap: 5px;
 78 | }
 79 | 
 80 | #statusText {
 81 |   font-size: 40px;
 82 |   color: #252525;
 83 |   margin: 20px 0;
 84 | }
 85 | 
 86 | #cellContainer {
 87 |   width: 460px;
 88 |   padding: 10px 0;
 89 |   display: flex;
 90 |   flex-direction: row;
 91 |   justify-content: center;
 92 |   flex-wrap: wrap;
 93 |   background-color: #151515;
 94 |   gap: 10px;
 95 |   border-radius: 25px;
 96 | }
 97 | 
 98 | .cell {
 99 |   width: 140px;
100 |   height: 140px;
101 |   background-color: #252525;
102 |   border-radius: 25px;
103 |   cursor: pointer;
104 |   color: #0cdb28;
105 |   font-size: 120px;
106 |   display: flex;
107 |   align-items: center;
108 |   justify-content: center;
109 |   transition: scale 0.4s ease-in-out, background-color 0.4s ease-in-out;
110 | }
111 | .cell:hover {
112 |   scale: 1.03;
113 |   background-color: #4D4D4D;
114 | }
115 | .cell svg {
116 |   width: 80px;
117 |   height: 80px;
118 |   fill: #FFFFFF;
119 | }
120 | 
121 | #restartBtn {
122 |   width: 340px;
123 |   height: 80px;
124 |   background-color: #151515;
125 |   border-radius: 25px;
126 |   font-size: 35px;
127 |   color: #FFFFFF;
128 |   margin: 20px 0;
129 | }
130 | 
131 | .win {
132 |   background-color: #2D412D;
133 | }
134 | .win:hover {
135 |   background-color: #2D412D;
136 | }
137 | 
138 | .draw {
139 |   background-color: #374D5C;
140 | }
141 | .draw:hover {
142 |   background-color: #374D5C;
143 | }
144 | 
145 | /* SMARTPHONE */
146 | @media screen and (min-width: 375px) and (max-width: 480px) {
147 |   h1 {
148 |     font-size: 40px;
149 |   }
150 |   .player-cards {
151 |     width: 300px;
152 |     height: 70px;
153 |     border-radius: 15px;
154 |   }
155 |   .player-cards .player-card {
156 |     width: 90px;
157 |     height: 70px;
158 |     border-radius: 15px;
159 |     font-size: 18px;
160 |   }
161 |   #statusText {
162 |     font-size: 30px;
163 |   }
164 |   #cellContainer {
165 |     width: 310px;
166 |     padding: 10px 0;
167 |     gap: 10px;
168 |     border-radius: 15px;
169 |   }
170 |   #cellContainer .cell {
171 |     width: 90px;
172 |     height: 90px;
173 |     border-radius: 15px;
174 |     font-size: 75px;
175 |   }
176 |   #cellContainer .cell svg {
177 |     width: 50px;
178 |     height: 50px;
179 |   }
180 |   #restartBtn {
181 |     width: 210px;
182 |     height: 50px;
183 |     border-radius: 15px;
184 |     font-size: 26px;
185 |     color: #FFFFFF;
186 |   }
187 | }/*# sourceMappingURL=main.css.map */


--------------------------------------------------------------------------------
/tic-tac-toe/script.js:
--------------------------------------------------------------------------------
  1 | //!----- Cells -----
  2 | const cells = document.querySelectorAll(".cell");
  3 | const statusText = document.querySelector("#statusText");
  4 | const restartBtn = document.querySelector("#restartBtn");
  5 | 
  6 | //!----- Statistic -----
  7 | const winX = document.querySelector(".x-win-count");
  8 | const drawCount = document.querySelector(".draw-count");
  9 | const winO = document.querySelector(".o-win-count");
 10 | const stat = {
 11 |     X: 0,
 12 |     D: 0,
 13 |     O: 0
 14 | }
 15 | 
 16 | //!----- Выиграшные комбинации -----
 17 | const winCombinations = [
 18 |     [0, 1, 2],
 19 |     [3, 4, 5],
 20 |     [6, 7, 8],
 21 |     [0, 3, 6],
 22 |     [1, 4, 7],
 23 |     [2, 5, 8],
 24 |     [0, 4, 8],
 25 |     [2, 4, 6]
 26 | ];
 27 | 
 28 | let cross = '<svg class="cross"><use href="./other/symbol-defs.svg#icon-cross"></use></svg>';
 29 | let circle = '<svg class="circle"><use href="./other/symbol-defs.svg#icon-circle"></use></svg>';
 30 | 
 31 | //!----- Клетки поля изначально пустые -----
 32 | let options = ["", "", "", "", "", "", "", "", ""];
 33 | let currentPlayer = "X";
 34 | let running = false;
 35 | 
 36 | //!----- Иницилизация игры -----
 37 | function initializeGame(){
 38 |     cells.forEach(cells => cells.addEventListener("click", cellClicked));
 39 |     restartBtn.addEventListener("click", restartGame);
 40 |     statusText.textContent = `${currentPlayer}'s turn`;
 41 |     running = true;
 42 | }
 43 | 
 44 | //!----- Отслеживает каждый клик по пустому полю -----
 45 | function cellClicked(){
 46 |     const cellIndex = this.getAttribute("cellIndex");
 47 |     
 48 |     if(options[cellIndex] != "" || !running){
 49 |         return;
 50 |     }
 51 |     
 52 |     updateCell(this, cellIndex);
 53 |     checkWinner();
 54 | }
 55 | 
 56 | //!----- Заменяет в массиве options пустые места на текущего игрока ( "O" или "X") -----
 57 | function updateCell(cell, index){
 58 |     options[index] = currentPlayer;
 59 |     if(currentPlayer === "X"){
 60 |         cell.innerHTML = cross;
 61 |     }
 62 |     else{
 63 |         cell.innerHTML = circle;
 64 |     }
 65 |     // cell.textContent = currentPlayer;
 66 | }
 67 | 
 68 | //!-----Меняет каждый раз текущего игрока-----
 69 | function changePlayer(){
 70 |     currentPlayer = (currentPlayer == "X") ? "O" : "X";
 71 |     statusText.textContent = `${currentPlayer}'s turn`;
 72 | }
 73 | 
 74 | //!----- После каждого хода проверяет победу -----
 75 | function checkWinner(){
 76 |     let roundWon = false;
 77 |     
 78 |     for(let i = 0; i < winCombinations.length; i += 1){
 79 |         const condition = winCombinations[i];
 80 |         const cellA = options[condition[0]];
 81 |         const cellB = options[condition[1]];
 82 |         const cellC = options[condition[2]];
 83 | 
 84 |         //!----- Проверяет клетки, если пустые ничего не делает, -----
 85 |         //!----- если они не пустые и одинаковые, -----
 86 |         //!----- то добавляет выиграшным клеткам стиль победы -----
 87 |         if (cellA == "" || cellB == "" || cellC == ""){
 88 |             continue;
 89 |         }
 90 |         else if(cellA == cellB && cellB == cellC){
 91 |             cells[condition[0]].classList.add('win');
 92 |             cells[condition[1]].classList.add('win');
 93 |             cells[condition[2]].classList.add('win');
 94 |             roundWon = true;
 95 |             break;
 96 |         }
 97 |         // const condition = winCombinations[i];
 98 |         // const cellA = options[condition[0]];
 99 |         // const cellB = options[condition[1]];
100 |         // const cellC = options[condition[2]];
101 |     
102 |         // if(cellA == "" || cellB == "" || cellC == ""){
103 |         //     continue;
104 |         // }
105 |         // if(cellA == cellB && cellB == cellC){
106 |         //     roundWon = true;
107 |         //     break;
108 |         // }
109 |     }
110 |     
111 |     //!----- Если победа, проверяет чья она и обновляет статиску -----
112 |     if(roundWon){
113 |         statusText.textContent = `${currentPlayer} wins!`;
114 |         running = false;
115 |         if (currentPlayer === "X"){ 
116 |             stat.X += 1;
117 |             winX.textContent = stat.X;
118 |         } else{
119 |             stat.O += 1;
120 |             winO.textContent = stat.O;
121 |         }
122 |     } 
123 |     //!----- Если ничья, обновляет статиску и подсвечивает все клетки-----
124 |     else if(!options.includes("")){
125 |         statusText.textContent = `Draw!`;
126 |         running = false;
127 |         stat.D += 1;
128 |         drawCount.textContent = stat.D;
129 |         cells.forEach(cells => cells.classList.add('draw'));
130 |     }
131 |     //!----- Если не ничья и не победа, то игра продолжается-----
132 |     else{
133 |         changePlayer();
134 |     }
135 | }
136 | 
137 | //!----- Кнопка, которая обновляет все -----
138 | function restartGame(){
139 |     currentPlayer = "X";
140 |     options = ["", "", "", "", "", "", "", "", ""];
141 |     statusText.textContent = `${currentPlayer}'s turn`;
142 |     cells.forEach((cell) => {
143 |         cell.textContent = "";
144 |         cell.classList.remove('win');
145 |         cell.classList.remove('draw');
146 |     })
147 |     // cells.forEach(cells => cells.textContent = "");
148 |     // cells.forEach(cells => cells.classList.remove('win'));
149 |     // cells.forEach(cells => cells.classList.remove('draw'));
150 |     running = true;
151 | }
152 | 
153 | initializeGame();


--------------------------------------------------------------------------------