Advertisement
Josif_tepe

Untitled

May 12th, 2023
679
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.     for(let i = 0; i < 9; i++) {
  12.         boxes[i].addEventListener('click', boxClicked)
  13.     }
  14. }
  15. function boxClicked(e) {
  16.     let cellsNotEmpty = 0;
  17.     let idx = e.target.id;
  18.     for(let i = 0; i < 9; i++) {
  19.         if(cells[i]) {
  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.             for(let i = 0; i < 9; i++) {
  39.                 boxes[i].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. function playerWon() {
  53.     if(cells[0] == currentPlayer && cells[1] == currentPlayer && cells[2] == currentPlayer) {
  54.         return [0, 1, 2]
  55.     }
  56.     if(cells[3] == currentPlayer && cells[4] == currentPlayer && cells[5] == currentPlayer) {
  57.         return [3, 4, 5]
  58.     }
  59.     if(cells[6] == currentPlayer && cells[7] == currentPlayer && cells[8] == currentPlayer) {
  60.         return [6, 7, 8]
  61.     }
  62.     if(cells[0] == currentPlayer && cells[3] == currentPlayer && cells[6] == currentPlayer) {
  63.         return [0, 3, 6]
  64.     }
  65.     if(cells[0] == currentPlayer && cells[1] == currentPlayer && cells[2] == currentPlayer) {
  66.         return [0, 1, 2]
  67.     }
  68.     if(cells[1] == currentPlayer && cells[4] == currentPlayer && cells[7] == currentPlayer) {
  69.         return [1, 4, 7]
  70.     }
  71.     if(cells[2] == currentPlayer && cells[5] == currentPlayer && cells[8] == currentPlayer) {
  72.         return [2, 5, 8]
  73.     }
  74.     if(cells[0] == currentPlayer && cells[4] == currentPlayer && cells[8] == currentPlayer) {
  75.         return [0, 4, 8]
  76.     }
  77.     if(cells[2] == currentPlayer && cells[4] == currentPlayer && cells[6] == currentPlayer) {
  78.         return [2, 4, 6]
  79.     }
  80.     return []
  81. }
  82. restartButton.addEventListener('click', restart)
  83.  
  84. function restart() {
  85.     for(let i = 0; i < 9; i++) {
  86.         cells[i] = null
  87.     }
  88.     currentPlayer = xText
  89.     for(let i = 0; i < 9; i++) {
  90.         boxes[i].innerHTML = ''
  91.         boxes[i].addEventListener('click', boxClicked)
  92.     }
  93.     for(let i = 0; i < 9; i++) {
  94.         Array.from(document.getElementsByClassName("box"))[i].style.backgroundColor = idleBlock
  95.     }
  96.     playerText.innerText = 'Tic tac toe'
  97.     window.location.reload()
  98. }
  99. /**
  100.  * winning combos
  101.  * 0, 1, 2
  102.  * 3, 4, 5
  103.  * 6, 7, 8
  104.  * 0, 3, 6
  105.  * 1, 4, 7
  106.  * 2, 5, 8
  107.  * 0, 4, 8
  108.  * 2, 4, 6
  109.  */
  110.  
  111. startGame();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement