├── o.png ├── x.png ├── ♡ Anime pfp♡.jpeg ├── README.md ├── index.html ├── style.css └── script.js /o.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raffneptune/game9/HEAD/o.png -------------------------------------------------------------------------------- /x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raffneptune/game9/HEAD/x.png -------------------------------------------------------------------------------- /♡ Anime pfp♡.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raffneptune/game9/HEAD/♡ Anime pfp♡.jpeg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

game 9

2 | tap link 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Raff | Tic Tac Toe 9 | 10 | 11 | 12 |

13 |

tic tac toe

14 |

15 |

16 |

17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 |

28 |

29 |

30 |

31 |

Score

32 |

33 |

X : 0

34 |

O : 0

35 |

36 |

37 |

Draws

38 |

0

39 |

40 |

41 | 42 |

text

43 |

44 |

45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: "Poppins", sans-serif; 8 | } 9 | body { 10 | min-height: 100vh; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | color: #fff; 15 | background-color: #33383f; 16 | } 17 | .heading { 18 | text-transform: uppercase; 19 | text-align: center; 20 | margin-bottom: 50px; 21 | font-size: 40px; 22 | border-radius: 5px; 23 | padding: 0 10px; 24 | background-color: #555; 25 | } 26 | .cells { 27 | display: flex; 28 | } 29 | .cell { 30 | width: 100px; 31 | height: 100px; 32 | display: flex; 33 | align-items: center; 34 | justify-content: center; 35 | border: 10px solid #05ccab; 36 | } 37 | .cell img { 38 | width: 90%; 39 | } 40 | .cell.one { 41 | border-top: none; 42 | border-left: none; 43 | } 44 | .cell.two { 45 | border-top: none; 46 | } 47 | .cell.three { 48 | border-top: none; 49 | border-right: none; 50 | } 51 | .cell.four { 52 | border-left: none; 53 | } 54 | .cell.six { 55 | border-right: none; 56 | } 57 | .cell.seven { 58 | border-left: none; 59 | border-bottom: none; 60 | } 61 | .cell.eight { 62 | border-bottom: none; 63 | } 64 | .cell.nine { 65 | border-bottom: none; 66 | border-right: none; 67 | } 68 | .score { 69 | margin-top: 20px; 70 | text-align: center; 71 | } 72 | .score-inner { 73 | display: flex; 74 | justify-content: space-between; 75 | align-items: center; 76 | width: 100%; 77 | padding: 0 20px; 78 | } 79 | .resetBtn { 80 | text-transform: uppercase; 81 | margin: 20px auto; 82 | display: block; 83 | font-size: 20px; 84 | padding: 10px 20px; 85 | background-color: #555; 86 | border-radius: 5px; 87 | cursor: pointer; 88 | border: none; 89 | color: #fff; 90 | transition: all 0.3s ease; 91 | } 92 | .resetBtn:hover { 93 | background-color: #333; 94 | } 95 | .toast { 96 | text-transform: uppercase; 97 | background-color: #555; 98 | color: #fff; 99 | padding: 10px; 100 | border-radius: 5px; 101 | font-size: 30px; 102 | font-weight: 700; 103 | text-align: center; 104 | position: fixed; 105 | top: 20px; 106 | left: 50%; 107 | opacity: 0; 108 | transition: top 0.3s ease, opacity 0.3s ease; 109 | transform: translateX(-50%); 110 | } 111 | .toast.show { 112 | opacity: 1; 113 | top: 50px; 114 | } 115 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const cells = document.querySelectorAll(".cell"); 2 | const playerXScoreSpan = document.querySelector("#playerXScore"); 3 | const playerOScoreSpan = document.querySelector("#playerOScore"); 4 | const resetBtn = document.querySelector(".resetBtn"); 5 | const toastDiv = document.querySelector(".toast"); 6 | const draws = document.querySelector("#draws"); 7 | 8 | const playerX = "X"; 9 | const playerO = "O"; 10 | let playerXScore = 0; 11 | let playerOScore = 0; 12 | let currentLevel = 1; 13 | let flag = true; 14 | let currentPlayer = playerX; 15 | 16 | const winCombos = [ 17 | [0, 1, 2], 18 | [3, 4, 5], 19 | [6, 7, 8], 20 | [0, 3, 6], 21 | [1, 4, 7], 22 | [2, 5, 8], 23 | [0, 4, 8], 24 | [2, 4, 6], 25 | ]; 26 | 27 | for (let i = 0; i < cells.length; i++) { 28 | cells[i].addEventListener("click", cellClicked); 29 | } 30 | function cellClicked(e) { 31 | if (flag) { 32 | if (e.target.innerHTML === "") { 33 | e.target.appendChild(addImg(currentPlayer)); 34 | checkWinner(); 35 | checkDraw(); 36 | if (currentPlayer === playerX) { 37 | currentPlayer = playerO; 38 | } else { 39 | currentPlayer = playerX; 40 | } 41 | } 42 | } 43 | } 44 | 45 | function addImg(type) { 46 | const img = document.createElement("img"); 47 | img.src = `${type}.png`; 48 | return img; 49 | } 50 | 51 | function checkWinner() { 52 | for (let i = 0; i < winCombos.length; i++) { 53 | const winCombo = winCombos[i]; 54 | const cell1 = cells[winCombo[0]]; 55 | const cell2 = cells[winCombo[1]]; 56 | const cell3 = cells[winCombo[2]]; 57 | if ( 58 | cell1.innerHTML !== "" && 59 | cell1.innerHTML === cell2.innerHTML && 60 | cell1.innerHTML === cell3.innerHTML 61 | ) { 62 | toast(`Player ${currentPlayer} wins!`); 63 | updateScore(); 64 | flag = false; 65 | currentLevel++; 66 | setTimeout(() => { 67 | reset(); 68 | toast(`level ${currentLevel}`); 69 | }, 2000); 70 | } 71 | } 72 | } 73 | 74 | function checkDraw() { 75 | if ([...cells].every((cell) => cell.innerHTML !== "")) { 76 | toast("its a draw"); 77 | currentLevel++; 78 | setTimeout(() => { 79 | reset(); 80 | toast(`level ${currentLevel}`); 81 | }, 2000); 82 | } 83 | } 84 | 85 | function toast(msg) { 86 | toastDiv.classList.add("show"); 87 | toastDiv.textContent = msg; 88 | setTimeout(() => { 89 | toastDiv.classList.remove("show"); 90 | }, 1000); 91 | } 92 | 93 | function updateScore() { 94 | if (currentPlayer === playerX) { 95 | playerXScore++; 96 | playerXScoreSpan.textContent = playerXScore; 97 | } else { 98 | playerOScore++; 99 | playerOScoreSpan.textContent = playerOScore; 100 | } 101 | } 102 | 103 | function reset() { 104 | cells.forEach((cell) => { 105 | cell.innerHTML = ""; 106 | }); 107 | flag = true; 108 | } 109 | 110 | resetBtn.addEventListener("click", () => { 111 | flag = false; 112 | reset(); 113 | currentLevel = 1; 114 | playerOScore = 0; 115 | playerXScore = 0; 116 | playerOScoreSpan.textContent = playerOScore; 117 | playerXScoreSpan.textContent = playerXScore; 118 | toast("game reset!"); 119 | setTimeout(() => { 120 | toast(`level ${currentLevel}`); 121 | flag = true; 122 | }, 2000); 123 | }); 124 | --------------------------------------------------------------------------------