Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
    <h1>TicTacToe</h1>
    <hr>
    <h2><u>Instructions</u></h2>
    <p>1 - There are two players. Each one is given a different symbol .</p>
    <p>2 - Each player has the right to play one turn. </p>
    <p>3 - The first player to make a straight line of 3 symbols in any direction wins the match.</p>
    <hr>
    <div class="margem1"></div>
    <div class="margem2"></div>
    <div class="tabuleiro" id="quadrados">
        <div class="quadrado" id="quadrado1" onclick="X()"></div>
        <div class="quadrado" id="quadrado2" onclick="X1()"></div>
        <div class="quadrado" id="quadrado3" onclick="X2()"></div>
        <div class="quadrado" id="quadrado4" onclick="X3()"></div>
        <div class="quadrado" id="quadrado5" onclick="X4()"></div>
        <div class="quadrado" id="quadrado6" onclick="X5()"></div>
        <div class="quadrado" id="quadrado7" onclick="X6()"></div>
        <div class="quadrado" id="quadrado8" onclick="X7()"></div>
        <div class="quadrado" id="quadrado9" onclick="X8()"></div>
    </div>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <div id=buttons>
   <button id = "Start">Start</button> <b><u>OR</u></b>  <button id ="Restart">Restart</button>
    </div>
   <br>
   <br>
  <p id="creditos">Jogo do Galo. <br><u> Projecto de aprendizagem @2020</u></p>

</body>
              
            
!

CSS

              
                .tabuleiro{
    display: flex;
    flex-direction:column;
    flex-wrap: wrap;
    width: 310px;
    height: 320px;
    margin-left: 38%;
    margin-top: 3%;
    position: absolute;
}

.quadrado{
    flex-flow: column wrap;
    width: 100px;
    height: 100px;
    border-right: 10px solid black;
    border-bottom: 10px solid black;
    cursor: pointer;
    text-align: center;
    font-weight: bolder;
    font-size: 500%;
}

.quadrado:hover{
    background-color: rgb(7, 133, 23);
}
#quadrado3, #quadrado6 , #quadrado9{
    border-bottom: none;
}

#quadrado7, #quadrado8 , #quadrado9{
    border-right: none;
}

h1{
    background-color: rgb(7, 133, 23);
}

h1, h2{
    text-align: center;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

p{
    text-align: center;
    font-weight: bold;
}

.margem1{
    background-color: rgb(7, 133, 23);
    width: 350px;
    height: 600px;
    margin: 0pt;
    float: left;
    position: relative;
}

.margem2{
    background-color: rgb(7, 133, 23);
    width: 350px;
    height: 600px;
    margin: 0pt;
    float: right;
    position: relative;
}

hr{
    border: none;
    height: 3px;
    background-color: #333; 
}

button{
    display: inline-block;
    background-color: darkgreen;
    font-weight: bolder;
    font-size: 190%;
    font-family: fantasy;
    border-radius: 5%;
    font-family: Arial, Helvetica, sans-serif;
    margin: auto;
}

#buttons{
    width: 240px;
    height: 45px;
    margin: auto;
    border: 4px solid black;

              
            
!

JS

              
                const Board = {
  square1: document.getElementById("quadrado1"),
  square2: document.getElementById("quadrado2"),
  square3: document.getElementById("quadrado3"),
  square4: document.getElementById("quadrado4"),
  square5: document.getElementById("quadrado5"),
  square6: document.getElementById("quadrado6"),
  square7: document.getElementById("quadrado7"),
  square8: document.getElementById("quadrado8"),
  square9: document.getElementById("quadrado9"),
}

SquaresArray = [Board.square1,Board.square2,Board.square3,Board.square4,Board.square5,Board.square6,Board.square7,Board.square8,Board.square9];


   
   let CheckingWinner = setInterval(function CheckWinner(){SquaresArray.some(element => {
   if (Board.square1.innerText == "X" && Board.square2.innerText == "X" && Board.square3.innerText == "X")
   return console.log("Player 1 has won the match");
   else if(Board.square1.innerText == "O" && Board.square2.innerText == "O" && Board.square3.innerText == "O")
   return console.log("Player 2 has won the match");
   else if (Board.square4.innerText == "X" && Board.square5.innerText == "X" && Board.square6.innerText == "X")
   return console.log("Player 1 has won the match");
   else if(Board.square4.innerText == "O" && Board.square5.innerText == "O" && Board.square6.innerText == "O")
   return console.log("Player 2 has won the match");
   else if (Board.square7.innerText == "X" && Board.square8.innerText == "X" && Board.square9.innerText == "X")
   return console.log("Player 1 has won the match");
   else if(Board.square7.innerText == "O" && Board.square8.innerText == "O" && Board.square9.innerText == "O")
   return console.log("Player 2 has won the match");
})}, 5000)

function StopCheckingWinner(){
   if (CheckingWinner == console.log("Player 1 has won the match") ||CheckingWinner == console.log("Player2 has won the match"))
   return clearInterval(CheckingWinner), 6100}

const Game = {
 start: document.getElementById("Start"),
 restart: document.getElementById("Restart"),
 Player1Name: function DefinePlayer1(){ return prompt("Hello Player 1 ! What is your name?")},
 Player2Name: function DefinePlayer2(){ return prompt("Hello Player 2 ! What is your name?")}, 
}

const rounds = {
  turn : 0,
  PlayerTurn: document.getElementById("PlayerTurn"),
}

Game.start.onclick = function Start(){
   let namePlayer1 = Game.Player1Name();
   let namePlayer2 = Game.Player2Name();
   return alert(namePlayer1 + "- You have the symbol 'X'.\n"+ namePlayer2 + "- You have the symbol 'O'.\nClick one of the squares to start!")

};


Game.restart.onclick = function Restart(){
   return window.location.reload()
}; 

document.addEventListener("DOMContentLoaded", function(event) {
  let tabuleiro = document.getElementById("quadrados");
  tabuleiro.addEventListener('click', function(){
      if ( rounds.turn < 9 )
      return console.log(rounds.turn++)
      else{
         return alert('Game is over!')
      }
   });
  });


   function TurnOf(){
      if (rounds.turn == 0 || rounds.turn == 2 || rounds.turn  == 4 || rounds.turn == 6 || rounds.turn == 8 ) 
      return rounds.PlayerTurn.innerText = "It's Player 1 turn!" ;
      else if ( rounds.turn  == 1 || rounds.turn  == 3 || rounds.turn == 5 || rounds.turn == 7 )
      return rounds.PlayerTurn.innerText = "It's Player 2 turn!" ;
      }



  Board.square1.onclick = function CheckSquare1() {
    if (Board.square1.innerText == "X") 
      return Board.square1.onclick = null;
    else if (Board.square1.innerText == "O") {
       return Board.square1.onclick = null;
       }
   else{
       return AssignSymbolSquare1()
       }
  };

function AssignSymbolSquare1(){
 if (rounds.turn == 0 || rounds.turn == 2 || rounds.turn  == 4 || rounds.turn == 6 || rounds.turn == 8 ) 
   return Board.square1.innerText = "X" ;
 else if ( rounds.turn  == 1 || rounds.turn  == 3 || rounds.turn == 5 || rounds.turn == 7 )
   return Board.square1.innerText = "O" ;
 else {
    return alert("Game is Over!")    }
}


Board.square2.onclick = function CheckSquare2() {
 if (Board.square2.innerText == "X") 
    return Board.square2.onclick = null
    else if (Board.square2.innerText == "O") {
       return Board.square2.onclick = null
    }
    else{
       return AssignSymbolSquare2()
    }
};

function AssignSymbolSquare2(){
  if (rounds.turn == 0 || rounds.turn == 2 || rounds.turn  == 4 || rounds.turn == 6 || rounds.turn == 8 ) 
  return Board.square2.innerText = "X"
  else if ( rounds.turn  == 1 || rounds.turn  == 3 || rounds.turn == 5 || rounds.turn == 7 )
  return Board.square2.innerText = "O"
  else {
    return alert("Game is Over!")    }
}


Board.square3.onclick = function CheckSquare3() {
 if (Board.square3.innerText == "X") 
    return Board.square3.onclick = null
    else if (Board.square3.innerText == "O") {
       return Board.square3.onclick = null
    }
    else{
       return AssignSymbolSquare3()
    }
};

function AssignSymbolSquare3(){
  if (rounds.turn == 0 || rounds.turn == 2 || rounds.turn  == 4 || rounds.turn == 6 || rounds.turn == 8 )
  return Board.square3.innerText = "X"
  else if ( rounds.turn  == 1 || rounds.turn  == 3 || rounds.turn == 5 || rounds.turn == 7)
  return Board.square3.innerText = "O"
  else {
     return alert("Game is Over!")    }
}

Board.square4.onclick = function CheckSquare4() {
 if (Board.square4.innerText == "X") 
    return Board.square4.onclick = null
    else if (Board.square4.innerText == "O") {
       return Board.square4.onclick = null
    }
    else{
       return AssignSymbolSquare4()
    }
};

function AssignSymbolSquare4(){
  if (rounds.turn == 0 || rounds.turn == 2 || rounds.turn  == 4 || rounds.turn == 6 || rounds.turn == 8 ) 
  return Board.square4.innerText = "X"
  else if ( rounds.turn  == 1 || rounds.turn  == 3 || rounds.turn == 5 || rounds.turn == 7)
  Board.square4.innerText = "O"
  else {
    return alert("Game is Over!")    }
}

Board.square5.onclick = function CheckSquare5() {
 if (Board.square5.innerText == "X") 
    return Board.square5.onclick = null
    else if (Board.square5.innerText == "O") {
       return Board.square5.onclick = null
    }
    else{
       return AssignSymbolSquare5()
    }
};

function AssignSymbolSquare5(){
  if (rounds.turn == 0 || rounds.turn == 2 || rounds.turn  == 4 || rounds.turn == 6 || rounds.turn == 8 )  
  return Board.square5.innerText = "X"
  else if ( rounds.turn  == 1 || rounds.turn  == 3 || rounds.turn == 5 || rounds.turn == 7 )
  Board.square5.innerText = "O"
  else {
    return alert("Game is Over!")    }
}

Board.square6.onclick = function CheckSquare6() {
 if (Board.square6.innerText == "X") 
    return Board.square6.onclick = null
    else if (Board.square6.innerText == "O") {
       return Board.square6.onclick = null
    }
    else{
       return AssignSymbolSquare6()
    }
};

function AssignSymbolSquare6(){
  if (rounds.turn == 0 || rounds.turn == 2 || rounds.turn  == 4 || rounds.turn == 6 || rounds.turn == 8 )  
  return Board.square6.innerText = "X"
  else if ( rounds.turn  == 1 || rounds.turn  == 3 || rounds.turn == 5 || rounds.turn == 7 )
  Board.square6.innerText = "O"
  else {
    return alert("Game is Over!")    }
}

Board.square7.onclick = function CheckSquare7() {
 if (Board.square7.innerText == "X") 
    return Board.square7.onclick = null
    else if (Board.square7.innerText == "O") {
       return Board.square7.onclick = null
    }
    else{
       return AssignSymbolSquare7()
    }
};

function AssignSymbolSquare7(){
  if (rounds.turn == 0 || rounds.turn == 2 || rounds.turn  == 4 || rounds.turn == 6 || rounds.turn == 8 )  
  return Board.square7.innerText = "X"
  else if ( rounds.turn  == 1 || rounds.turn  == 3 || rounds.turn == 5 || rounds.turn == 7)
  Board.square7.innerText = "O"
  else {
    return alert("Game is Over!")    }
}

Board.square8.onclick = function CheckSquare8() {
 if (Board.square8.innerText == "X") 
    return Board.square8.onclick = null
    else if (Board.square8.innerText == "O") {
       return Board.square8.onclick = null
    }
    else{
       return AssignSymbolSquare8()
    }
};

function AssignSymbolSquare8(){
  if (rounds.turn == 0 || rounds.turn == 2 || rounds.turn  == 4 || rounds.turn == 6 || rounds.turn == 8 ) 
  return Board.square8.innerText = "X"
  else if ( rounds.turn  == 1 || rounds.turn  == 3 || rounds.turn == 5 || rounds.turn == 7 )
  Board.square8.innerText = "O"
  else {
    return alert("Game is Over!")    }
}

Board.square9.onclick = function CheckSquare9() {
 if (Board.square9.innerText == "X") 
    return Board.square9.onclick = null
    else if (Board.square9.innerText == "O") {
       return Board.square9.onclick = null
    }
    else{
       return AssignSymbolSquare9()
    }
};

function AssignSymbolSquare9(){
  if (rounds.turn == 0 || rounds.turn == 2 || rounds.turn  == 4 || rounds.turn == 6 || rounds.turn == 8 ) 
  return Board.square9.innerText = "X"
  else if ( rounds.turn  == 1 || rounds.turn  == 3 || rounds.turn == 5 || rounds.turn == 7 )
  Board.square9.innerText = "O"
  else {
    return alert("Game is Over!")    }
};
              
            
!
999px

Console