DEV Community

Cover image for Tik Tac Toe in javaScript
bappasaha
bappasaha

Posted on

Tik Tac Toe in javaScript

Image description

Implementing 2D logic

console.log('bappa');
2D array 
let arr = [
    ['1', '2', '33'],
    ['aa', 'bb', 'cc'],
    ['bappa', 'kappa', 'dappa']
]
console.log('0th index->', arr[0]);
console.log('1st index->', arr[1]);
console.log('2nd index->', arr[2]);

console.log('◼️ Access [0][0] position ->', arr[0][0])
console.log('◼️ Access [0][1] position ->', arr[0][1])
console.log('◼️ Access [0][2] position ->', arr[0][2])
Enter fullscreen mode Exit fullscreen mode

index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tic-Tac-Toe Game</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="msg-container hide">
      <p id="msg">Winner</p>
      <button id="new-btn">New Game</button>
    </div>
    <main>
      <h1>Tic Tac Toe</h1>
      <div class="container">
        <div class="game">
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
          <button class="box"></button>
        </div>
      </div>
      <button id="reset-btn">Reset Game</button>
    </main>
    <script src="app.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

style.css

file

* {
    margin: 0;
    padding: 0;
  }

  body {
    background-color: #65f3f5;
    text-align: center;
  }

  .container {
    height: 70vh;
    display: flex;

    justify-content: center;
    align-items: center;
  }

  .game {
    height: 60vmin;
    width: 60vmin;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5vmin;
  }

  .box {
    height: 18vmin;
    width: 18vmin;
    border-radius: 1rem;
    border: none;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    font-size: 8vmin;
    color: #b0413e;
    background-color: #ffffc7;
  }

  #reset-btn {
    padding: 1rem;
    font-size: 1.25rem;
    background-color: #191913;
    color: #fff;
    border-radius: 1rem;
    border: none;
  }

  #new-btn {
    padding: 1rem;
    font-size: 1.25rem;
    background-color: #191913;
    color: #fff;
    border-radius: 1rem;
    border: none;
  }

  #msg {
    color: #ffffc7;
    font-size: 5vmin;
  }

  .msg-container {
    height: 100vmin;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 4rem;
  }

  .hide {
    display: none;
  }
Enter fullscreen mode Exit fullscreen mode

Step by Step Process

todo:0 ---------- start ----------**

💎 Take all the dom variables

let boxes = document.querySelectorAll('.box');
let resetBtn = document.getElementById('reset-btn');
let messageContainer = document.querySelector('.msg-container');
let showWinningMsg=document.getElementById('msg');
let newGame =document.getElementById('new-btn');

let trunO = true;
Enter fullscreen mode Exit fullscreen mode

💎 todo:1 win patterns

const winPatterns = [
    [0, 1, 2],
    [0, 3, 6],
    [0, 4, 8],
    [1, 4, 7],
    [2, 5, 8],
    [2, 4, 6],
    [3, 4, 5],
    [6, 7, 8],
];
Enter fullscreen mode Exit fullscreen mode

💎 todo: 6 reset game

const resetGame =()=>{
    trunO =true;
    enabledBoxes();
    messageContainer.classList.add('hide')
}
Enter fullscreen mode Exit fullscreen mode

💎 todo:2 addEventListener for every box
- check all boxes are clicked
- then give innerText to see print or not
- check the trun0 [O or X is working or not ]
- double click is disabled
- jokoni button click korbo tokoni dekbo j keu win hocce ki na .

boxes.forEach((box) => {
    box.addEventListener('click', () => {
        // console.log('box clicked');
        // box.innerText ='X'
        if (trunO) {
            box.innerText = ''
            trunO = false;
        } else {
            box.innerText = ''
            trunO = true;
        }
        box.disabled = true;
        // 3. check winner
        checkWinner();
    })
});
Enter fullscreen mode Exit fullscreen mode

💎 todo:7 disable field after one person win

const disabledBoxes =()=>{
    for(let box of boxes){
        box.disabled = true;
    }
}
Enter fullscreen mode Exit fullscreen mode

💎 todo:8 enable field after one person win

const enabledBoxes =()=>{
    for(let box of boxes){
        box.disabled = false;
        box.innerText="";
    }
}
Enter fullscreen mode Exit fullscreen mode

💎 todo:4 check winner

const showWinner=(WinnerValue)=>{
    showWinningMsg.innerText=`Congratulations!!! Mr.${WinnerValue}`;
    messageContainer.classList.remove('hide');
    disabledBoxes();
};
Enter fullscreen mode Exit fullscreen mode

💎 todo:3 check winner

  • jokoni button click korbo tokoni dekbo j keu win hocce ki na .
  • winning pattern check korte hbe [0,0][0,1][0,2] position e same
  • element hole win hbe.
  • so win pattern er uprey loop chalabo
  • result pabo array and ekane array er position check korbo
  • position paile sekane inner text check korbo
  • winner pabar por sob button k disable kore dibo
const checkWinner =()=>{
    for(let pattern of winPatterns){
        // console.log('indexs of patterns:',pattern[0],pattern[1],pattern[2] ); // result is an array 
        // console.log(pattern[0],pattern[1],pattern[2] ); 
        // console.log(boxes[pattern[0]],boxes[pattern[1]],boxes[pattern[2]]);

        // this is my postioin 0 { boxes[pattern[0]].innerText,}
        // console.log(
        //     boxes[pattern[0]].innerText, //--pos1 value
        //     boxes[pattern[1]].innerText,
        //     boxes[pattern[2]].innerText,

        // );

        let postion1Value = boxes[pattern[0]].innerText;
        let postion2Value = boxes[pattern[1]].innerText;
        let postion3Value = boxes[pattern[2]].innerText;



##  //💎 todo: 4 check condition [is empty or not , three values are same or not]
            // check post1 , post2 , post3 values are not empty
            if(postion1Value !=="" && postion2Value !=="" && postion3Value !==""){

                //now check winning pattern
                if(postion1Value ===postion2Value && postion2Value===postion3Value){
                    // console.log('Winner is ', postion1Value);
                    //show winner functon
                    showWinner(postion1Value);

                }
            }
    }
};
Enter fullscreen mode Exit fullscreen mode

resetBtn.addEventListener('click', resetGame);
newGame.addEventListener('click', resetGame);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)