Complete tic Tac toe game's game

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

No:27954

←

Prev Next

→

Complete tic Tac toe game
Developer User13950｜Date and time 23/12/10 7:24:28
Build time 30.81 sec｜Game capacity 4.341KB｜

Script

Sure! Here's a complete implementation of a tic-tac-toe game in a single HTML file. The game is playable on smartphones and uses pictograms for X and O symbols. The implementation is enclosed within the script tags and written in JavaScript.

To play the game, simply copy and paste the above code into a new HTML file (e.g., `tic-tac-toe.html`), and open the file in a web browser on your smartphone. You'll see a tic-tac-toe board displayed, and you can tap on the cells to make your moves. The game will notify you if a player wins or if it's a draw. Have fun playing!

←

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>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        .board-container {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 300px;
            margin-top: 50px;
        }
        
        .board-cell {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            border: 1px solid black;
            cursor: pointer;
        }
        
        .message {
            margin-top: 20px;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div class="board-container"></div>
    <div class="message"></div>

function makeMove(row, col) {
            if (!gameOver && board[row][col] === '') {
                board[row][col] = currentPlayer;
                renderBoard();

if (checkWin()) {
                    gameOver = true;
                    showMessage(`Player ${currentPlayer} wins!`);
                } else if (checkDraw()) {
                    gameOver = true;
                    showMessage("It's a draw!");
                } else {
                    currentPlayer = currentPlayer === player1Symbol ? player2Symbol : player1Symbol;
                    showMessage(`Player ${currentPlayer}'s turn`);
                }
            }
        }

function checkWin() {
            const winningCombinations = [
                [[0, 0], [0, 1], [0, 2]],
                [[1, 0], [1, 1], [1, 2]],
                [[2, 0], [2, 1], [2, 2]],
                [[0, 0], [1, 0], [2, 0]],
                [[0, 1], [1, 1], [2, 1]],
                [[0, 2], [1, 2], [2, 2]],
                [[0, 0], [1, 1], [2, 2]],
                [[0, 2], [1, 1], [2, 0]]
            ];

for (let combination of winningCombinations) {
                const [a, b, c] = combination;
                if (board[a[0]][a[1]] !== '' && board[a[0]][a[1]] === board[b[0]][b[1]] && board[b[0]][b[1]] === board[c[0]][c[1]]) {
                    return true;
                }
            }

return false;
        }

function checkDraw() {
            for (let row of board) {
                if (row.includes('')) {
                    return false;
                }
            }
            return true;
        }

// UI rendering
        const boardContainer = document.querySelector('.board-container');
        const messageContainer = document.querySelector('.message');

function renderBoard() {
            boardContainer.innerHTML = '';

for (let row = 0; row < board.length; row++) {
                for (let col = 0; col < board[row].length; col++) {
                    const cell = document.createElement('div');
                    cell.className = 'board-cell';
                    cell.textContent = board[row][col];
                    cell.addEventListener('click', () => makeMove(row, col));
                    boardContainer.appendChild(cell);
                }
            }
        }

function showMessage(msg) {
            messageContainer.textContent = msg;
        }

renderBoard();
        showMessage(`Player ${currentPlayer}'s turn`);
    </script>
</body>
</html>
```