Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- let playerText = document.getElementById("playerText")
- let restartButton = document.getElementById("restartButton")
- let boxes = Array.from(document.getElementsByClassName("box"))
- const xText = "X"
- const oText = "O"
- let currentPlayer = xText
- let idleBlock = getComputedStyle(document.body).getPropertyValue('--idle-block')
- let cells = Array(9).fill(null)
- let winningblocks = getComputedStyle(document.body).getPropertyValue('--winning-blocks')
- function startGame() {
- for(let i = 0; i < 9; i++) {
- boxes[i].addEventListener('click', boxClicked)
- }
- }
- function boxClicked(e) {
- let cellsNotEmpty = 0;
- let idx = e.target.id;
- for(let i = 0; i < 9; i++) {
- if(cells[i]) {
- cellsNotEmpty++;
- }
- }
- if(cellsNotEmpty == 9) {
- playerText.innerText = "It is a draw!"
- return
- }
- if(!cells[idx]) {
- cells[idx] = currentPlayer
- e.target.innerText = currentPlayer
- const hasWon = playerWon()
- if(hasWon.length == 3) {
- for(let i = 0; i < 3; i++) {
- Array.from(document.getElementsByClassName("box"))[hasWon[i]].style.backgroundColor = winningblocks;
- }
- playerText.innerText = currentPlayer + " has won!"
- for(let i = 0; i < 9; i++) {
- boxes[i].removeEventListener('click', boxClicked)
- }
- return
- }
- if(currentPlayer == xText) {
- currentPlayer = oText
- }
- else {
- currentPlayer = xText
- }
- }
- }
- function playerWon() {
- if(cells[0] == currentPlayer && cells[1] == currentPlayer && cells[2] == currentPlayer) {
- return [0, 1, 2]
- }
- if(cells[3] == currentPlayer && cells[4] == currentPlayer && cells[5] == currentPlayer) {
- return [3, 4, 5]
- }
- if(cells[6] == currentPlayer && cells[7] == currentPlayer && cells[8] == currentPlayer) {
- return [6, 7, 8]
- }
- if(cells[0] == currentPlayer && cells[3] == currentPlayer && cells[6] == currentPlayer) {
- return [0, 3, 6]
- }
- if(cells[0] == currentPlayer && cells[1] == currentPlayer && cells[2] == currentPlayer) {
- return [0, 1, 2]
- }
- if(cells[1] == currentPlayer && cells[4] == currentPlayer && cells[7] == currentPlayer) {
- return [1, 4, 7]
- }
- if(cells[2] == currentPlayer && cells[5] == currentPlayer && cells[8] == currentPlayer) {
- return [2, 5, 8]
- }
- if(cells[0] == currentPlayer && cells[4] == currentPlayer && cells[8] == currentPlayer) {
- return [0, 4, 8]
- }
- if(cells[2] == currentPlayer && cells[4] == currentPlayer && cells[6] == currentPlayer) {
- return [2, 4, 6]
- }
- return []
- }
- restartButton.addEventListener('click', restart)
- function restart() {
- for(let i = 0; i < 9; i++) {
- cells[i] = null
- }
- currentPlayer = xText
- for(let i = 0; i < 9; i++) {
- boxes[i].innerHTML = ''
- boxes[i].addEventListener('click', boxClicked)
- }
- for(let i = 0; i < 9; i++) {
- Array.from(document.getElementsByClassName("box"))[i].style.backgroundColor = idleBlock
- }
- playerText.innerText = 'Tic tac toe'
- window.location.reload()
- }
- /**
- * winning combos
- * 0, 1, 2
- * 3, 4, 5
- * 6, 7, 8
- * 0, 3, 6
- * 1, 4, 7
- * 2, 5, 8
- * 0, 4, 8
- * 2, 4, 6
- */
- startGame();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement