▷ Tic Tac Toe - Html, CSS, and JavaScript

byTnlgo. Esteban Carrillo - 0

Complete code to create the classic game of Tic-Tac-Toe using only HTML, CSS, and JavaScript. This post includes everything needed to develop a functional version of the game, with a simple design and basic logic for interaction between two players. Without detailed explanations, this resource provides you with the source code ready to be copied and tested directly in your project. Perfect for those looking for a quick implementation of the game!

TIC-TAC-TOE

Play again

Codes:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Tic Tac Toe</title>
</head>
<body>
    <div class="game-container">
        <div class="game-title"><h2>TIC TAC TOE</h2></div>
        <p id = "game-info" class="game-info"></p>
        <div class="grid-game">

            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="frame"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>

        </div>

        <div id ="game-button" class="game-button">Play again</div>
    </div>


    <script src="script.js"></script>
</body>
</html>

CSS:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.game-container{
    height:100vh;
    max-width: 1250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:1rem;
    text-align: center;

}

.game-title, .game-info{
    text-align: center;
}

.game-grid{
   
    display: grid;
    grid-template-columns: auto auto auto;
    gap:0;
}

.box{
    width:3rem;
    height: 3rem;
    border: 1px solid rgb(168, 168, 168);
    text-align: center;
    color:rgb(7, 255, 69);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    transition: background-color ease-in 0.2s;
}

.cuadro:hover{
   
    background-color:#cccc;
    
}

.juego-boton{
    display:inline-flex;
    padding: 1rem 1rem;
    background:red ;
    color: white;
    cursor: pointer;
    justify-content: center;
    font-weight: bold;
    transition:color ease-out 0.3s;
   
}

.juego-boton:hover{
  
    background:white ;
    color: red;
    border: 1px solid red;
   
}

JavaScript:

const button_box = document.querySelectorAll(".frame");
const info = document.getElementById("game-info");
const game_btn = document.getElementById("game-button")
var i = 1;
const jBtn_e =  "pointer-events:initial;opacity:initial;",
      jBtn_d =  "pointer-events:none;opacity:40%;";
let state = false;

var pWin = [ [0,1,2],[3,4,5],[6,7,8],
             [0,3,6],[1,4,7],[2,5,8],
             [0,4,8],[2,4,6]
           ];

function check(){
  game_btn.style.cssText = jBtn_d;
  for (var j = 0; j < pWin.length;j++){
    if(box_btn[pWin[j][0]].innerHTML === "X" && box_btn[pWin[j][1]].innerHTML === "X" && button_box[pWin[j][2]].innerHTML === "X" ){
      info.innerHTML = '"X" Wins';
      state = true;
      disableBoxes();
    }else if(button_box[pWin[j][0]].innerHTML === "O" && button_box[pWin[j][1]].innerHTML === "O" && button_frame[pWin[j][2]].innerHTML === "O"){
      info.innerHTML = '"O" Wins';
      state = true;
      disableBoxes();
    }
  }
  if(button_box[0].innerHTML != "" && button_box[1].innerHTML != "" && button_box[2].innerHTML != "" && button_box[3].innerHTML !== "" && button_box[4].innerHTML != "" && button_box[5].innerHTML != "" && button_box[6].innerHTML != "" && button_box[7].innerHTML != "" && button_box[8].innerHTML != "" && state == false){
    info.innerHTML = "Tie";
    disableBoxes(false);
  }
    
}

function  disableBoxes(and){
  (and == false)?i = Math.floor(Math.random() * (3 - 1)) + 1:0;
    for(var n_button = 0; button_n < button_box.length; button_n++){    
      button_box[n_button].style.setProperty("pointer-events","none"); 
    } 
  game_btn.style.cssText = jBtn_e;
}

function nStarts(){
  game_btn.style.cssText = jBtn_d;
  let c1;
  (i % 2 == 0 )?c1= "X":c1= "O"; 
  info.innerHTML = `Press any box to start: <b>"${c1}</b> starts.`;   
}

button_frame.forEach(button => {
  button.onclick = function(){
    info.innerHTML = "";
    (i % 2 == 0)?button.innerHTML = "X": button.innerHTML = "O";
    check();
    button.style.setProperty("pointer-events","none"); 
    i++; 
    (i == 3)?i = 1: 0 ;
  }
});

game_btn.onclick = function(){
  for(var n_button = 0; n_button < box_btn.length; n_button++){    
    box_btn[n_button].style.cssText = "pointer-events:initial;";
    box_btn[n_button].innerHTML = "";
    state = false;
  }
  nStarts();
}

nStarts();
Labels

Posted by Tnlgo. Esteban Carrillo

0/Leave a comment/Comments

Hello! We're so glad you've made it this far and are reading this article on Edeptec.

This form is an open space for you: you can leave a comment with your questions, suggestions, experiences, or simply your opinion on the topic discussed.

» Did you find the information helpful?
» Do you have any personal experiences you'd like to share?
» Do you have any topics you'd like to see covered in future articles?

Remember that this space is for learning and sharing, so we encourage you to participate respectfully and constructively. Your comments can help other readers who are on the same path, whether in electronics, programming, sports, or technology.

Thank you for being part of this learning community! Your participation is what makes this project grow.

Post a Comment

Hello! We're so glad you've made it this far and are reading this article on Edeptec.

This form is an open space for you: you can leave a comment with your questions, suggestions, experiences, or simply your opinion on the topic discussed.

» Did you find the information helpful?
» Do you have any personal experiences you'd like to share?
» Do you have any topics you'd like to see covered in future articles?

Remember that this space is for learning and sharing, so we encourage you to participate respectfully and constructively. Your comments can help other readers who are on the same path, whether in electronics, programming, sports, or technology.

Thank you for being part of this learning community! Your participation is what makes this project grow.