Tic Tac Toe Game code | Mini Game In Html, CSS, JS | #untoldCoding

Welcome to another #UntoldCoding adventure! Today we dive into the world of game development with the classic and timeless game – Tic Tac Toe. This little game project will be built using the web development trifecta: HTML, CSS, and JavaScript. Whether you are a beginner looking to hone your skills or an experienced coder looking for a fast and fun project, this Tic Tac Toe game is perfect for you.

Setting up the platform: HTML

Let’s start by using HTML to program our game. Open your favorite code editor and create a new HTML file. Here’s a simple start:

Step 1 Html Code :

<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic Tac mini game | untoldcoding </title>
    
    <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap" rel="stylesheet">

<div class="popup hide">
       <p id="message">Sample Message</p>
       <button id="new-game">New Game</button>
   </div>
   
 
    <script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>: Declares the document type and version of the HTML (in this case HTML5).

Step 2 CSS Code:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Raleway", sans-serif;
}
body {
  height: 100vh;
  background: linear-gradient(105deg, #00f2ff, rgb(0, 16, 197));
}
html {
  font-size: 16px;
}
.untoldcoding {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.untoldcoding1 {
  width: 70vmin;
  height: 70vmin;
  display: flex;
  flex-wrap: wrap;
  gap: 2vmin;
}
.button-option {
  background: #ffffff;
  height: 22vmin;
  width: 22vmin;
  border: none;
  border-radius: 8px;
  font-size: 12vmin;
  color: rgb(11, 13, 118);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
#restart {
  font-size: 1.3em;
  padding: 1em;
  border-radius: 8px;
  background-color: #0a0027;
  color: #ffffff;
  border: none;
  position: relative;
  margin: 1.5em auto 0 auto;
  display: block;
}
.popup {
  background: linear-gradient(105deg, #00f2ff, rgb(0, 16, 197));
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  z-index: 2;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1em;
  font-size: 12vmin;
}
#new-game {
  font-size: 0.6em;
  padding: 0.5em 1em;
  background-color: #0a0027;
  color: #ffffff;
  border-radius: 0.2em;
  border: none;
}
#message {
  color: #ffffff;
  text-align: center;
  font-size: 1em;
}
.popup.hide {
  display: none;
}

Step 3 JS Code:

let btnRef = document.querySelectorAll(".button-option");
let popupRef = document.querySelector(".popup");
let newgameBtn = document.getElementById("new-game");
let restartBtn = document.getElementById("restart");
let msgRef = document.getElementById("message");

let winningPattern = [
  [0, 1, 2],
  [0, 3, 6],
  [2, 5, 8],
  [6, 7, 8],
  [3, 4, 5],
  [1, 4, 7],
  [0, 4, 8],
  [2, 4, 6],
];

let xTurn = true;
let count = 0;

const disableButtons = () => {
  btnRef.forEach((element) => (element.disabled = true));

popupRef.classList.remove("hide");
};

const enableButtons = () => {
  btnRef.forEach((element) => {
    element.innerText = "";
    element.disabled = false;
  });

popupRef.classList.add("hide");
};

const drawFunction = () => {
  disableButtons();
  msgRef.innerHTML = " <br> It's a Draw";
};

newgameBtn.addEventListener("click", () => {
  count = 0;
  enableButtons();
});
restartBtn.addEventListener("click", () => {
  count = 0;
  enableButtons();
});

btnRef.forEach((element) => {
  element.addEventListener("click", () => {
    if (xTurn) {
      xTurn = false;

element.innerText = "X";
      element.disabled = true;
    } else {
      xTurn = true;

element.innerText = "O";
      element.disabled = true;
    }

count += 1;
    if (count == 9) {
      drawFunction();
    }

winChecker();
  });
});

window.onload = enableButtons;

btnRef: Represents all buttons on the Tic Tac Toe board.

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Frequently Asked Questions (FAQ) - Tic Tac Toe Mini Game

1. What is this little game about?

This little game is a simplified version of the classic Tic Tac Toe. Players take turns placing their markers (X or O) on a 3x3 grid, aiming to make knots out of three of those markers.

2. How can I play the game?

Click on the empty button to place your marker (X or O). The goal is to get your three marker scores horizontal, vertical, or horizontal.

3. How can I restart the game?

You can restart the game by pressing the "Restart" button at the bottom of the game board.

4. What happens if the game ends in a draw?

If all the buttons are pressed, and no one wins, the game is declared a draw. You will see a message that you have drawn and you can start a new game.

5. How can I start a new game?

When the game ends (whether it's a win or a draw), a pop-up message will appear with a "new game" button. Pressing this button will reset the game and allow you to start a new one.

6. Can I play this game on a mobile device?

Yes, the game is designed to be compatible, allowing you to play on devices including mobile phones and tablets.

7. What do messages in popups mean?

The message in the popup tells you whether a player won and whether a player (X or O) won. A failure to draw would mean the end of the game.

8. Can I customize the look of the game?

Yes, you can customize the look of the game by editing the associated CSS file ("style.css"). Feel free to customize colors, fonts, and other accessories.

9. Where can I find the source code for this game?

The source code for this Tic Tac Toe mini-game is contained in external files, including "style.css" for styling and "script.js" for scripting. You can search and edit the code .

Tic Tac Toe Game code | Mini Game In Html, CSS, JS | #untoldCoding

Setting up the platform: HTML

Step 1 Html Code :

Step 2 CSS Code:

Step 3 JS Code:

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Frequently Asked Questions (FAQ) - Tic Tac Toe Mini Game

Post a Comment

No comments

Categories

Popular Post

Random Posts

Recent Posts

Popular Posts

Tic Tac Toe Game code | Mini Game In Html, CSS, JS | #untoldCoding

Setting up the platform: HTML

Step 1 Html Code :

Step 2 CSS Code:

Step 3 JS Code:

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Frequently Asked Questions (FAQ) - Tic Tac Toe Mini Game

Related Posts