API tools faq
paste
Advertisement
AkaruiKuraku

Tictactoe by Yatharth

AkaruiKuraku
Apr 30th, 2022 (edited)
76
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.25 KB | Gaming | 0 0
raw download clone embed print report
  1. <html lang="en">
  2.  
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <style>
  8.      * {
  9.   padding: 0;
  10.   margin: 0;
  11.   font-family: 'Itim', cursive;
  12. }
  13.  
  14. .background {
  15.   background-color: #E6E6E6;
  16.   height: 100vh;
  17.   padding-top: 1px;
  18. }
  19.  
  20. .title {
  21.   color: rgb(80, 80, 80);
  22.   text-align: center;
  23.   font-size: 40px;
  24.   margin-top: 10%;
  25. }
  26.  
  27. .title label {
  28.   font-size: 30px;
  29. }
  30.  
  31. .display {
  32.   color: rgb(80, 80, 80);
  33.   font-size: 25px;
  34.   text-align: center;
  35.   margin-top: 1em;
  36.   margin-bottom: 1em;
  37. }
  38.  
  39. .hide {
  40.   display: none;
  41. }
  42.  
  43. .container {
  44.   margin: 0 auto;
  45.   display: grid;
  46.   grid-template-columns: 33% 33% 33%;
  47.   grid-template-rows: 33% 33% 33%;
  48.   max-width: 300px;
  49.  
  50. }
  51.  
  52. .tile {
  53.   border: none;
  54.   border-radius: 10px;
  55.   min-width: 100px;
  56.   min-height: 100px;
  57.   display: flex;
  58.   justify-content: center;
  59.   align-items: center;
  60.   font-size: 50px;
  61.   cursor: pointer;
  62.   box-shadow: -5px -5px 12px #fff,
  63.     5px 5px 12px rgba(0, 0, 0, .2);
  64.   color: rgb(80, 80, 80);
  65. }
  66.  
  67. .tile:active {
  68.   background: rgb(80, 80, 80);
  69.   color: #E6E6E6;
  70.   z-index: 9;
  71. }
  72.  
  73. .playerX {
  74.   color: rgb(80, 80, 80);
  75. }
  76.  
  77. .playerO {
  78.   color: rgb(80, 80, 80);
  79. }
  80.  
  81. .controls {
  82.   display: flex;
  83.   flex-direction: row;
  84.   justify-content: center;
  85.   align-items: center;
  86.   margin-top: 1em;
  87. }
  88.  
  89. .controls button {
  90.   padding: 8px;
  91.   border-radius: 8px;
  92.   border: none;
  93.   margin-left: 1em;
  94.   cursor: pointer;
  95.   box-shadow: -5px -5px 12px #fff,
  96.     5px 5px 12px rgba(0, 0, 0, .2);
  97.   font-size: 28px;
  98.   color: rgb(80, 80, 80);
  99. }
  100.  
  101. .restart {
  102.   background-color: #E6E6E6;
  103. }
  104.  
  105. #reset {
  106.   background-color: #E6E6E6;
  107. }
  108.  
  109. #reset:active {
  110.   background-color: rgb(80, 80, 80);
  111.   color: #E6E6E6;
  112. }
  113.  
  114.   </style>
  115.   <link rel="preconnect" href="https://fonts.gstatic.com">
  116.   <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
  117.   <script>
  118.      window.addEventListener('DOMContentLoaded', () => {
  119.     const tiles = Array.from(document.querySelectorAll('.tile'));
  120.     const playerDisplay = document.querySelector('.display-player');
  121.     const resetButton = document.querySelector('#reset');
  122.     const announcer = document.querySelector('.announcer');
  123.  
  124.     let board = ['', '', '', '', '', '', '', '', ''];
  125.     let currentPlayer = 'X';
  126.     let isGameActive = true;
  127.  
  128.     const PLAYERX_WON = 'PLAYERX_WON';
  129.     const PLAYERO_WON = 'PLAYERO_WON';
  130.     const TIE = 'TIE';
  131.  
  132.  
  133.     /*
  134.         Indexes within the board
  135.         [0] [1] [2]
  136.         [3] [4] [5]
  137.         [6] [7] [8]
  138.     */
  139.  
  140.     const winningConditions = [
  141.         [0, 1, 2],
  142.         [3, 4, 5],
  143.         [6, 7, 8],
  144.         [0, 3, 6],
  145.         [1, 4, 7],
  146.         [2, 5, 8],
  147.         [0, 4, 8],
  148.         [2, 4, 6]
  149.     ];
  150.  
  151.     function handleResultValidation() {
  152.         let roundWon = false;
  153.         for (let i = 0; i <= 7; i++) {
  154.            const winCondition = winningConditions[i];
  155.            const a = board[winCondition[0]];
  156.            const b = board[winCondition[1]];
  157.            const c = board[winCondition[2]];
  158.            if (a === '' || b === '' || c === '') {
  159.                continue;
  160.            }
  161.            if (a === b && b === c) {
  162.                roundWon = true;
  163.                break;
  164.            }
  165.        }
  166.  
  167.    if (roundWon) {
  168.            announce(currentPlayer === 'X' ? PLAYERX_WON : PLAYERO_WON);
  169.            isGameActive = false;
  170.            return;
  171.        }
  172.  
  173.    if (!board.includes(''))
  174.        announce(TIE);
  175.    }
  176.  
  177.    const announce = (type) => {
  178.         switch(type){
  179.             case PLAYERO_WON:
  180.                 announcer.innerHTML = 'Player <span class="playerO">O</span> Won';
  181.                 break;
  182.             case PLAYERX_WON:
  183.                 announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
  184.                 break;
  185.             case TIE:
  186.                 announcer.innerText = 'Tie';
  187.         }
  188.         announcer.classList.remove('hide');
  189.     };
  190.  
  191.     const isValidAction = (tile) => {
  192.         if (tile.innerText === 'X' || tile.innerText === 'O'){
  193.             return false;
  194.         }
  195.  
  196.         return true;
  197.     };
  198.  
  199.     const updateBoard =  (index) => {
  200.         board[index] = currentPlayer;
  201.     }
  202.  
  203.     const changePlayer = () => {
  204.         playerDisplay.classList.remove(`player${currentPlayer}`);
  205.         currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
  206.         playerDisplay.innerText = currentPlayer;
  207.         playerDisplay.classList.add(`player${currentPlayer}`);
  208.     }
  209.  
  210.     const userAction = (tile, index) => {
  211.         if(isValidAction(tile) && isGameActive) {
  212.            tile.innerText = currentPlayer;
  213.             tile.classList.add(`player${currentPlayer}`);
  214.             updateBoard(index);
  215.             handleResultValidation();
  216.             changePlayer();
  217.         }
  218.     }
  219.    
  220.     const resetBoard = () => {
  221.         board = ['', '', '', '', '', '', '', '', ''];
  222.         isGameActive = true;
  223.         announcer.classList.add('hide');
  224.  
  225.         if (currentPlayer === 'O') {
  226.             changePlayer();
  227.         }
  228.  
  229.         tiles.forEach(tile => {
  230.             tile.innerText = '';
  231.             tile.classList.remove('playerX');
  232.             tile.classList.remove('playerO');
  233.         });
  234.     }
  235.  
  236.     tiles.forEach( (tile, index) => {
  237.         tile.addEventListener('click', () => userAction(tile, index));
  238.     });
  239.  
  240.     resetButton.addEventListener('click', resetBoard);
  241. });
  242.  
  243.  
  244.   </script>
  245.   <title>Tic-Tac-Toe by yatharth</title>
  246. </head>
  247.  
  248. <body>
  249.   <main class="background">
  250.     <section class="title">
  251.       <h1>Tic Tac Toe</h1>
  252.     </section>
  253.     <section class="display">
  254.       Player <span class="display-player playerX">X</span>'s turn
  255.     </section>
  256.     <section class="container">
  257.       <div class="tile"></div>
  258.       <div class="tile"></div>
  259.       <div class="tile"></div>
  260.       <div class="tile"></div>
  261.       <div class="tile"></div>
  262.       <div class="tile"></div>
  263.       <div class="tile"></div>
  264.       <div class="tile"></div>
  265.       <div class="tile"></div>
  266.     </section>
  267.     <section class="display announcer hide"></section>
  268.     <section class="controls">
  269.       <button id="reset">Reset</button>
  270.     </section>
  271.   </main>
  272. </body>
  273.  
  274. </html>
  275.  
Tags: html Tic-tac-toe
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!