cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <aside id="info"><strong></strong><span id="info-text"></span></aside>
<h1>Tic-Tac-Toe</h1>
<table>
  <tr>
    <td id="a1"></td>
    <td id="a2"></td>
    <td id="a3"></td>
  </tr>
  <tr>
    <td id="b1"></td>
    <td id="b2"></td>
    <td id="b3"></td>
  </tr>
  <tr>
    <td id="c1"></td>
    <td id="c2"></td>
    <td id="c3"></td>
  </tr>
</table>
<div>
  <button id="start">Start</button>
  <button id="reset">Reset</button>
  <h2>
    W: <span id="games-won">0</span>
    L: <span id="games-lost">0</span>
    T: <span id="games-tied">0</span>
  </h2>
</div>
<aside id="pickScreen">
  <h1>Pick</h1>
  <div>
    <button id="btnX">X's</button>
    <button id="btnO">O's</button>
  </div>
</aside>
            
          
!
            
              html, body {
  min-height: 100%;
}

body {
  display: flex;
  justify-content:center;
  align-items:center;
  flex-direction: column;
  font-family: sans-serif;
}

#pickScreen {
  height: 100%;
  width:100%;
  background:white;
  display: none;
  position:absolute;
  top:0;
  justify-content:center;
  align-items:center;
  flex-direction: column;
}

button {
  padding: 1rem;
  font-size:1rem;
}

button:first-of-type {
  background-color: tomato;
  border-color: tomato;
}

button:last-of-type {
  background-color: skyblue;
  border-color: skyblue;
  margin-left:1rem;
 }

@keyframes bounce {
  0% {transform: translate(0,5px);}
  25% {transform: translate(0,-5px);}
  75% {transform: translate(0,3px);}
  100% {transform: translate(0,-2px);}
}

table {
  border-collapse: collapse;
  margin: 2rem;
  font-size:4rem;
}

td {
  height: 5rem;
  width: 5rem;
  text-align:center;
}

td:first-of-type {
    border-right: 1px solid black;
}

td:last-of-type {
  border-left: 1px solid black;
}

tr:first-of-type, tr:nth-child(2) {
  border-bottom: 1px solid black;
}

#info {
  padding: 1rem;
  background-color: seashell;
  border: 3px solid powderblue;
  border-radius: 5px;
  display:none;
  position: absolute;
}
            
          
!
            
              /*=== Game Layout ===

  1 2 3
A _|_|_
B _|_|_
C  | |

*/

/*=== Variable Declarations ===*/

//boxes
var boxes = document.getElementsByTagName("td");
var boxIds = [];
var boxIdsStatic = [];
for (i = 0; i < boxes.length; i++) {
  boxIds.push(boxes[i].id);
  boxIdsStatic.push(boxes[i].id);
}

//rows
var rowA = [];
for (i = 0; i < 3; i++) {
  rowA.push(boxes[i].id);
}

var rowB = [];
for (i = 3; i < 6; i++) {
  rowB.push(boxes[i].id);
}

var rowC = [];
for (i = 6; i < 9; i++) {
  rowC.push(boxes[i].id);
}

//columns
var colA = [];
for (i = 0; i < 9; i++) {
  if (i === 0 || i === 3 || i === 6) {
    colA.push(boxes[i].id);
  }
}

var colB = [];
for (i = 0; i < 9; i++) {
  if (i === 1 || i === 4 || i === 7) {
    colB.push(boxes[i].id);
  }
}

var colC = [];
for (i = 0; i < 9; i++) {
  if (i === 2 || i === 5 || i === 8) {
    colC.push(boxes[i].id);
  }
}

//buttons
var btnReset = document.getElementById("reset");
var btnStart = document.getElementById("start");
var btnX = document.getElementById("btnX");
var btnO = document.getElementById("btnO");

//other
var pickScreen = document.getElementById("pickScreen");
var playerSymbol = "";
var info = document.getElementById("info");
var infoText = document.getElementById("info-text");
var gamesWonText = document.getElementById("games-won");
var gamesLostText = document.getElementById("games-lost");
var gamesTiedText = document.getElementById("games-tied");
var gameIsOver = false;

/*=== Event Handlers ===*/

//reset button
btnReset.addEventListener("click", function() {
  resetGame();
});

//start button
btnStart.addEventListener("click", function() {
  //If the game has been reset
  if (boxIds.length === 9) {
    console.log("Starting game...");
    pickScreen.style.display = "flex"; 
  } else {
    displayAlert("You have to reset the game.");
  }
});

//X choice button
btnX.addEventListener("click", function() {
  pickScreen.style.display = "none";
  playerSymbol = "X";
  computerSymbol = "O";
});

//O choice button
btnO.addEventListener("click", function() {
  pickScreen.style.display = "none";
  playerSymbol = "O";
  computerSymbol = "X";
});

/*=== Functions ===*/

//boxes
for (i = 0; i < boxes.length; i++) {
  var box = boxes[i];
  box.addEventListener("click", function() {
    console.log("Box " + this.id + " clicked...");
    if (gameIsOver === true) {
      displayAlert("The game has ended.");
    } else if (playerSymbol === "") {
      displayAlert("You have to start a game first, silly.");
    } else if (this.innerHTML === "") {
      playerMove(this.id);
    } else if (this.innerHTML.length > 0) {
      displayAlert("Someone already played there!");
    }
  });
}

//reset game
function resetGame() {
  console.log("Resetting Game...");
  gameIsOver = false;
  playerSymbol = "";
  btnReset.style.animation = "none";
  for (i = 0; i < boxes.length; i++) {
    boxIds[i] = boxIdsStatic[i];
    boxes[i].innerHTML = "";
  }
  console.log("Box ID array", boxIds);
}

//player move
function playerMove(boxId) {
  console.log("Player Move...");
  var box = document.getElementById(boxId);
  box.innerHTML = playerSymbol;
  var index = boxIds.indexOf(boxId);
  boxIds.splice(index, 1); //erase this as a choice
  console.log("Box ID array", boxIds); //check the array
  var currentRowAMoves = [];
  var currentRowBMoves = [];
  var currentRowCMoves = [];
  var currentColAMoves = [];
  var currentColBMoves = [];
  var currentColCMoves = [];
  var currentDiagnoalTopLeftToBottomRightMoves = [document.getElementById(rowA[0]).innerHTML, document.getElementById(rowB[1]).innerHTML, document.getElementById(rowC[2]).innerHTML];
  var currentDiagnoalTopRightToBottomLeftMoves = [document.getElementById(rowA[2]).innerHTML, document.getElementById(rowB[1]).innerHTML, document.getElementById(rowC[0]).innerHTML];
  for (i = 0; i < 3; i++) {
    currentRowAMoves.push(document.getElementById(rowA[i]).innerHTML);
    currentRowBMoves.push(document.getElementById(rowB[i]).innerHTML);
    currentRowCMoves.push(document.getElementById(rowC[i]).innerHTML);
    currentColAMoves.push(document.getElementById(colA[i]).innerHTML);
    currentColBMoves.push(document.getElementById(colB[i]).innerHTML);
    currentColCMoves.push(document.getElementById(colC[i]).innerHTML);
  }
  
  if (box.innerHTML !== "") {
    checkWinner("player", playerSymbol, currentRowAMoves, currentRowBMoves, currentRowCMoves, currentColAMoves, currentColBMoves, currentColCMoves, currentDiagnoalTopLeftToBottomRightMoves, currentDiagnoalTopRightToBottomLeftMoves);
    }
}

//computer move
function computerMove() {
  console.log("Computer Move...");
  if (boxIds.length > 0) {
    var boxId = boxIds[Math.floor(Math.random() * boxIds.length)];
    var box = document.getElementById(boxId);
    var index = boxIds.indexOf(boxId);
    box.innerHTML = computerSymbol;
    boxIds.splice(index, 1); //erase this as a choice
    console.log("Box ID array", boxIds); //check ids 
    var currentRowAMoves = [];
    var currentRowBMoves = [];
    var currentRowCMoves = [];
    var currentColAMoves = [];
    var currentColBMoves = [];
    var currentColCMoves = [];
    var currentDiagnoalTopLeftToBottomRightMoves = [
      document.getElementById(rowA[0]).innerHTML, 
      document.getElementById(rowB[1]).innerHTML, 
      document.getElementById(rowC[2]).innerHTML
    ];
    var currentDiagnoalTopRightToBottomLeftMoves = [
      document.getElementById(rowA[2]).innerHTML, 
      document.getElementById(rowB[1]).innerHTML, 
      document.getElementById(rowC[0]).innerHTML
    ];
    for (i = 0; i < 3; i++) {
      currentRowAMoves.push(document.getElementById(rowA[i]).innerHTML);
      currentRowBMoves.push(document.getElementById(rowB[i]).innerHTML);
      currentRowCMoves.push(document.getElementById(rowC[i]).innerHTML);
      currentColAMoves.push(document.getElementById(colA[i]).innerHTML);
      currentColBMoves.push(document.getElementById(colB[i]).innerHTML);
      currentColCMoves.push(document.getElementById(colC[i]).innerHTML);
    }
    if (box.innerHTML !== "") {
      checkWinner("computer", computerSymbol, currentRowAMoves, currentRowBMoves, currentRowCMoves, currentColAMoves, currentColBMoves, currentColCMoves, currentDiagnoalTopLeftToBottomRightMoves, currentDiagnoalTopRightToBottomLeftMoves);
    }
  }
}

//display alert
function displayAlert(text) {
  console.log("Displaying Alert...");
  infoText.innerHTML = text;
  info.style.display = "block";
  setTimeout(function() {
    info.style.display = "none";
  }, 2000);
}

//game over
function gameOver(winner) {
  console.log("Game Over...");
  gameIsOver = true;
  if (winner === "player") {
    displayAlert("You have won the game!!!");
    gamesWonText.innerHTML = parseInt(gamesWonText.innerHTML) + 1;
    setTimeout(function() {
      btnReset.style.animation = "bounce 1s infinite";
    }, 2000);
  } else {
      displayAlert("The computer has won!");
    gamesLostText.innerHTML = parseInt(gamesLostText.innerHTML) + 1;
      setTimeout(function() {
      btnReset.style.animation = "bounce 1s infinite";
    }, 2000);
  }
}

//check winner
function checkWinner(currentPlayer, symbol, rowA, rowB, rowC, colA, colB, colC, currentDiagnoalTopLeftToBottomRightMoves, currentDiagnoalTopRightToBottomLeftMoves) {
  console.log("Checking if " + currentPlayer + " is the winner...");
  console.log("currentDiagnoalTopLeftToBottomRightMoves", currentDiagnoalTopLeftToBottomRightMoves);
  console.log("currentDiagnoalTopRightToBottomLeftMoves", currentDiagnoalTopRightToBottomLeftMoves);
  console.log("attempting to match " + symbol + symbol + symbol);
  if (rowA.join("") === symbol + symbol + symbol) {
    gameOver(currentPlayer);
  } else if (rowB.join("") === symbol + symbol + symbol) {
    gameOver(currentPlayer);
  } else if (rowC.join("") === symbol + symbol + symbol) {
    gameOver(currentPlayer);
  } else if (colA.join("") === symbol + symbol + symbol) {
    gameOver(currentPlayer);
  } else if (colB.join("") === symbol + symbol + symbol) {
    gameOver(currentPlayer);
  } else if (colC.join("") === symbol + symbol + symbol) {
    gameOver(currentPlayer);
  } else if (currentDiagnoalTopLeftToBottomRightMoves.join("") === symbol + symbol + symbol) {
    gameOver(currentPlayer);
  } else if (currentDiagnoalTopRightToBottomLeftMoves.join("") === symbol + symbol + symbol) {
    gameOver(currentPlayer);
  } else if (boxIds.length === 0) {
    displayAlert("It's a tie :/");
    gamesTiedText.innerHTML = parseInt(gamesTiedText.innerHTML) + 1;
    setTimeout(function() {
      btnReset.style.animation = "bounce 1s infinite";
    }, 2000);
  } else {
    console.log("No Winner Yet...");
    if (currentPlayer === "player") {
      console.log("Computers Move next...");
      setTimeout(computerMove, 1000);
    }
  }
}

            
          
!
999px
Loading ..................

Console