Advertisement
Josif_tepe

Untitled

May 12th, 2023
616
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. let playerText = document.getElementById("playerText")
  2. let restartButton = document.getElementById("restartButton")
  3. let boxes = Array.from(document.getElementsByClassName("box"))
  4. const xText = "X"
  5. const oText = "O"
  6. let currentPlayer = xText
  7. let idleBlock = getComputedStyle(document.body).getPropertyValue('--idle-block')
  8. let cells = Array(9).fill(null)
  9. let winningblocks = getComputedStyle(document.body).getPropertyValue('--winning-blocks')
  10. function startGame() {
  11.     boxes.forEach(box => {
  12.         box.addEventListener('click', boxClicked)
  13.     })
  14. }
  15. function boxClicked(e) {
  16.     let cellsNotEmpty = 0;
  17.     let idx = e.target.id;
  18.     cells.forEach(cell => {
  19.         if(cell) {
  20.             cellsNotEmpty++
  21.         }
  22.     })
  23.     if(cellsNotEmpty == 9) {
  24.         playerText.innerText = "It is a draw!"
  25.         return
  26.     }
  27.     if(!cells[idx]) {
  28.         cells[idx] = currentPlayer
  29.         e.target.innerText = currentPlayer
  30.         const hasWon = playerWon()
  31.  
  32.         if(hasWon.length == 3) {
  33.             for(let i = 0; i < 3; i++) {
  34.                 Array.from(document.getElementsByClassName("box"))[hasWon[i]].style.backgroundColor = winningblocks;
  35.  
  36.             }
  37.             playerText.innerText = currentPlayer + " has won!"
  38.             boxes.forEach(box => {
  39.                 box.removeEventListener('click', boxClicked)
  40.             })
  41.             return
  42.         }
  43.  
  44.         if(currentPlayer == xText) {
  45.             currentPlayer = oText
  46.         }
  47.         else {
  48.             currentPlayer = xText
  49.         }
  50.     }
  51. }
  52. const winningCombos = [
  53.     [0, 1, 2],
  54.  [3, 4, 5],
  55.  [6, 7, 8],
  56. [0, 3, 6],
  57. [1, 4, 7],
  58. [2, 5, 8],
  59. [0, 4, 8],
  60. [2, 4, 6]
  61. ]
  62. function playerWon() {
  63.     for(let i = 0; i < winningCombos.length; i++) {
  64.         let cnt = 0;
  65.         for(let j = 0; j < 3; j++) {
  66.             if(cells[winningCombos[i][j]] == currentPlayer) {
  67.                 cnt++;
  68.             }
  69.         }
  70.         if(cnt == 3) {
  71.             return winningCombos[i]
  72.         }
  73.     }
  74.     return []
  75. }
  76. restartButton.addEventListener('click', restart)
  77.  
  78. function restart() {
  79.     cells.fill(null)
  80.     currentPlayer = xText
  81.    
  82.     boxes.forEach(box => {
  83.          box.innerHTML = ''
  84.         box.addEventListener('click', boxClicked)
  85.     })
  86.     for(let i = 0; i < 9; i++) {
  87.         Array.from(document.getElementsByClassName("box"))[i].style.backgroundColor = idleBlock
  88.     }
  89.     playerText.innerText = 'Tic tac toe'
  90.     window.location.reload()
  91. }
  92. /**
  93.  * winning combos
  94.  
  95.  */
  96.  
  97. startGame();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement