Tic toe game with UI restart and stat button with score's game

Click here for free DL of the app version that can save data.

No:39344

←

Prev Next

→

Tic toe game with UI restart and stat button with ..ALL
Developer User17562｜Date and time 24/1/28 3:05:56
Build time 17.249 sec｜Game capacity 4.915KB｜

Script

Sure! Here's a simple implementation of a Tic Tac Toe game in a single HTML file using JavaScript. It includes a UI restart button and a stat button to display the score. Pictograms are not used, but you can customize the UI further to include them if needed.

You can save the above code in a file with a `.html` extension, and then open it in a web browser to play the Tic Tac Toe game with the provided UI. The game features a restart button to reset the board and a stat button to display the current score. Please note that this implementation uses the basic HTML DOM manipulation through JavaScript to create the game. For more interactive and advanced UI/UX, you may consider using frameworks like React.js or Vue.js.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Tic Tac Toe</title>
    <style>
      .board {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        gap: 5px;
        margin-bottom: 10px;
      }

.cell {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #dddddd;
        font-size: 48px;
        cursor: pointer;
      }

.restart,
      .stat {
        padding: 10px;
        margin-bottom: 10px;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div class="board"></div>
    <button class="restart">Restart</button>
    <button class="stat">Score</button>

// DOM elements
        const boardElement = document.querySelector('.board');
        const cells = document.getElementsByClassName('cell');
        const restartButton = document.querySelector('.restart');
        const statButton = document.querySelector('.stat');

// Event listeners
        boardElement.addEventListener('click', handleCellClick);
        restartButton.addEventListener('click', restartGame);
        statButton.addEventListener('click', displayScore);

// Initialize the game
        renderBoard();

// Function to handle cell click event
        function handleCellClick(event) {
          const clickedCell = event.target;
          const cellIndex = Array.from(cells).indexOf(clickedCell);

if (board[cellIndex] === '' && !gameOver) {
            board[cellIndex] = currentPlayer;
            clickedCell.textContent = currentPlayer;

if (checkWin(currentPlayer)) {
              gameOver = true;
              score[currentPlayer]++;
              displayMessage(`${currentPlayer} wins!`);
            } else if (checkDraw()) {
              gameOver = true;
              displayMessage("It's a draw!");
            } else {
              currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            }
          }
        }

// Function to render the game board
        function renderBoard() {
          boardElement.innerHTML = '';
          for (let i = 0; i < 9; i++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.textContent = board[i];
            boardElement.appendChild(cell);
          }
        }

// Function to check if a player has won
        function checkWin(player) {
          const winningCombinations = [
            [0, 1, 2],
            [3, 4, 5],
            [6, 7, 8],
            [0, 3, 6],
            [1, 4, 7],
            [2, 5, 8],
            [0, 4, 8],
            [2, 4, 6]
          ];

return winningCombinations.some((combination) => {
            return (
              board[combination[0]] === player &&
              board[combination[1]] === player &&
              board[combination[2]] === player
            );
          });
        }

// Function to check if it's a draw
        function checkDraw() {
          return board.every((cell) => {
            return cell !== '';
          });
        }

// Function to restart the game
        function restartGame() {
          board = ['', '', '', '', '', '', '', '', ''];
          currentPlayer = 'X';
          gameOver = false;
          renderBoard();
          displayMessage('');
        }

// Function to display a message
        function displayMessage(message) {
          const messageElement = document.createElement('div');
          messageElement.textContent = message;
          boardElement.appendChild(messageElement);
          setTimeout(() => {
            boardElement.removeChild(messageElement);
          }, 1500);
        }

// Function to display the score
        function displayScore() {
          alert(`Score: X - ${score.X}    O - ${score.O}`);
        }
      })();
    </script>
  </body>
</html>
```

Please note that this implementation uses the basic HTML DOM manipulation through JavaScript to create the game. For more interactive and advanced UI/UX, you may consider using frameworks like React.js or Vue.js.