top of page

Creating "Tik-Tok-Toy" Game Using HTML, CSS and JavaScript

realcode4you














Index.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">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container-out">
        <div class="container-in">
        <div class="table-container">
            <p>Player <span id="player">X</span> your turn</p>
            <table align="center">
            <tr>
                <td><div class="box"></div></td>
                <td><div class="box"></div></td>
                <td><div class="box"></div></td>
            </tr>
            <tr>
                <td><div class="box"></div></td>
                <td><div class="box"></div></td>
                <td><div class="box"></div></td>
            </tr>
            <tr>
                <td><div class="box"></div></td>
                <td><div class="box"></div></td>
                <td><div class="box"></div></td>
            </tr>
            </table>
    
            <h2 id="message">Player <span id="winner"></span> Wins</h2>
            <button id="reset">Reset</button>
        </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Script.js

//stores player turns
let currentPlayer = "x";

//stores the status of the game, whether its over or still in play
let gameStatus = "Game On";

//Gets all Boxes elements
const boxes = document.getElementsByClassName("box");

//loops through all the elements
for (let i = 0; i < boxes.length; i++) {


  //adds event listener to each box;
  boxes[i].addEventListener("click", function() {
    //checks if the box has an x or an o in it and also checks if the game is still on
    if (boxes[i].innerHTML.trim() == "" && gameStatus == "Game On") {
      //adds x or o for the current play in their choosen box
      boxes[i].innerHTML = currentPlayer;

      //changes player turns
      currentPlayer = currentPlayer == "x" ? "o" : "x";

      //changes player's turn label on top of the game
      document.getElementById(
        "player"
      ).innerHTML = currentPlayer.toUpperCase();

      //checks 3 matching x's or o's
      if (
        boxes[0].innerHTML == boxes[1].innerHTML &&
        boxes[1].innerHTML == boxes[2].innerHTML &&
        boxes[0].innerHTML.trim() != ""
      ) {
        showWinner(0, 1, 2);
      } else if (
        boxes[3].innerHTML == boxes[4].innerHTML &&
        boxes[4].innerHTML == boxes[5].innerHTML &&
        boxes[3].innerHTML.trim() != ""
      ) {
        showWinner(3, 4, 5);
      } else if (
        boxes[6].innerHTML == boxes[7].innerHTML &&
        boxes[7].innerHTML == boxes[8].innerHTML &&
        boxes[6].innerHTML.trim() != ""
      ) {
        showWinner(6, 7, 8);
      } else if (
        boxes[0].innerHTML == boxes[3].innerHTML &&
        boxes[3].innerHTML == boxes[6].innerHTML &&
        boxes[0].innerHTML.trim() != ""
      ) {
        showWinner(0, 3, 6);
      } else if (
        boxes[1].innerHTML == boxes[4].innerHTML &&
        boxes[4].innerHTML == boxes[7].innerHTML &&
        boxes[1].innerHTML.trim() != ""
      ) {
        showWinner(1, 4, 7);
      } else if (
        boxes[2].innerHTML == boxes[5].innerHTML &&
        boxes[5].innerHTML == boxes[8].innerHTML &&
        boxes[2].innerHTML.trim() != ""
      ) {
        showWinner(2, 5, 8);
      } else if (
        boxes[0].innerHTML == boxes[4].innerHTML &&
        boxes[4].innerHTML == boxes[8].innerHTML &&
        boxes[0].innerHTML.trim() != ""
      ) {
        showWinner(0, 4, 8);
      } else if (
        boxes[2].innerHTML == boxes[4].innerHTML &&
        boxes[4].innerHTML == boxes[6].innerHTML &&
        boxes[2].innerHTML.trim() != ""
      ) {
        showWinner(2, 4, 6);
      }
    }
  });
}


//resets the game
document.getElementById("reset").addEventListener("click", function() {
  for (let i = 0; i < boxes.length; i++) {
    boxes[i].innerHTML = "";
    boxes[i].style.backgroundColor = "#dee9ec";
    boxes[i].style.color = "black";
  }
  currentPlayer = "x";
  document.getElementById("message").style.display = "none";
  document.getElementById("player").innerHTML = "X";
  gameStatus = "Game On";
});

//displays the winner
function showWinner(x, y, z) {
  boxes[x].style.background = "#0d8b70";
  boxes[x].style.color = "white";
  boxes[y].style.background = "#0d8b70";
  boxes[y].style.color = "white";
  boxes[z].style.background = "#0d8b70";
  boxes[z].style.color = "white";
  document.getElementById("winner").innerHTML =
    currentPlayer == "x" ? "O" : "X";
  document.getElementById("message").style.display = "block";
  gameStatus = "Game Over";
}

style.css

.container-out {
    font-family: "Fira Sans", sans-serif;
    padding: 15px 0;
  }

  .container-in {
    width: 97%;
    margin: 0 auto;
  }
  .table-container {
    margin: 10 auto;
    text-align: center;
  }

  .box {
    min-width: 70px;
    min-height: 70px;
    background: #dee9ec;
    text-align: center;
    vertical-align: center;
    font-size: 50px;
    font-weight: 900;
    cursor: pointer;
  }

  .box:hover {
    opacity: 0.7;
  }

  .table-container h2 {
    color: #0d8b70;
    display: none;
  }

  .table-container button {
    border: none;
    background: #13838b;
    color: white;
    border-radius: 3px;
    padding: 5px 7px;
    font-size: 18px;
    cursor: pointer;
    margin: 15px;
  }

  .table-container button:hover {
    opacity: 0.7;
  }

  .table-container button:focus {
    outline: none;
  }


Here, You can get all advance level JavaScript project Help, assignment Help and homework Help.


If you have any project related to JavaScript, HTML, CSS and AJAX then contact us and get instant help with an affordable price:


Send Your requirement details at:


realcode4you@gmail.com

תגובות


REALCODE4YOU

Realcode4you is the one of the best website where you can get all computer science and mathematics related help, we are offering python project help, java project help, Machine learning project help, and other programming language help i.e., C, C++, Data Structure, PHP, ReactJs, NodeJs, React Native and also providing all databases related help.

​

Hire Us to get Instant help from realcode4you expert with an affordable price.

USEFUL LINKS

Discount

ADDRESS

Noida, Sector 63, India 201301

Follows Us!

  • Facebook
  • Twitter
  • Instagram
  • LinkedIn

OUR CLIENTS BELONGS TO

  • india
  • australia
  • canada
  • hong-kong
  • ireland
  • jordan
  • malaysia
  • new-zealand
  • oman
  • qatar
  • saudi-arabia
  • singapore
  • south-africa
  • uae
  • uk
  • usa

© 2023 IT Services provided by Realcode4you.com

bottom of page