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

No:20919

←

Prev Next

→

10x10 tic tack toe
Developer User9231｜Date and time 23/10/12 1:58:50
Build time 129.853 sec｜Game capacity 4.941KB｜

Script

10x10 Крестики-нолики

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>10x10 Tic Tac Toe</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        
        .grid {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-gap: 10px;
            width: 400px;
            margin: 0 auto;
        }

.cell {
            width: 40px;
            height: 40px;
            background-color: #f2f2f2;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            border: 1px dashed #ccc;
        }
        
        .cell:hover {
            background-color: #e5e5e5;
        }

.pictogram {
            font-size: 24px;
        }
        
        .player1 {
            color: #ff5757;
        }
        
        .player2 {
            color: #009ffd;
        }

h1 {
            text-align: center;
        }

.message {
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>10x10 Крестики-нолики</h1>

// Initialize the Tic Tac Toe board
        let board = Array(100).fill('');
        let currentPlayer = 'Player 1';

// Create the cells in the grid
        for (let i = 0; i < board.length; i++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            cell.dataset.index = i;
            grid.appendChild(cell);
        }

// Add event listener to each cell for marking X or O
        const cells = document.querySelectorAll('.cell');
        cells.forEach(cell => cell.addEventListener('click', handleCellClick));

// Function to handle cell click event
        function handleCellClick(event) {
            const cellIndex = parseInt(event.target.dataset.index);

// Check if the clicked cell is empty
            if (board[cellIndex] === '') {
                board[cellIndex] = currentPlayer === 'Player 1' ? 'X' : 'O';
                event.target.innerHTML = getPictogram(board[cellIndex]);
                event.target.classList.add(currentPlayer === 'Player 1' ? 'player1' : 'player2');

// Check for win or draw
                if (checkWin() || isBoardFull()) {
                    cells.forEach(cell => cell.removeEventListener('click', handleCellClick));
                }

// Switch players
                currentPlayer = currentPlayer === 'Player 1' ? 'Player 2' : 'Player 1';
            }
        }

// Function to get the pictogram for X or O
        function getPictogram(symbol) {
            if (symbol === 'X') {
                return `<span class="pictogram">❌</span>`;
            } else {
                return `<span class="pictogram">☀</span>`;
            }
        }

// Function to check for a win
        function checkWin() {
            const winningPatterns = [
                [0, 1, 2, 3, 4],
                [10, 11, 12, 13, 14],
                [20, 21, 22, 23, 24],
                [30, 31, 32, 33, 34],
                [40, 41, 42, 43, 44],
                [50, 51, 52, 53, 54],
                [60, 61, 62, 63, 64],
                [70, 71, 72, 73, 74],
                [80, 81, 82, 83, 84],
                [90, 91, 92, 93, 94],
                [0, 10, 20, 30, 40],
                [1, 11, 21, 31, 41],
                [2, 12, 22, 32, 42],
                [3, 13, 23, 33, 43],
                [4, 14, 24, 34, 44],
                [5, 15, 25, 35, 45],
                [6, 16, 26, 36, 46],
                [7, 17, 27, 37, 47],
                [8, 18, 28, 38, 48],
                [9, 19, 29, 39, 49],
                [0, 11, 22, 33, 44],
                [4, 13, 22, 31, 40]
            ];

for (let pattern of winningPatterns) {
                let [a, b, c, d, e] = pattern;
                if (
                    board[a] === board[b] &&
                    board[a] === board[c] &&
                    board[a] === board[d] &&
                    board[a] === board[e] &&
                    board[a] !== ''
                ) {
                    message.textContent = `Игрок ${currentPlayer} победил!`;
                    return true;
                }
            }

return false;
        }

// Function to check if the board is full
        function isBoardFull() {
            if (board.every(cell => cell !== '')) {
                message.textContent = 'Ничья!';
                return true;
            }
            return false;
        }
    </script>
</body>
</html>