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

No:42170

soccer game with tic tac toe
Developer User18820｜Date and time 24/2/10 22:40:16
Build time 15.278 sec｜Game capacity 4.534KB｜

Script

Tic Tac Toe - Football Edition

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Soccer Tic Tac Toe Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 40px;
        }

h1 {
            margin-bottom: 20px;
        }

#game-board {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            border: 2px solid black;
            width: 220px;
            margin: 0 auto;
            margin-bottom: 20px;
        }

.cell {
            width: 70px;
            height: 70px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            cursor: pointer;
        }

.cell:hover {
            background-color: #ddd;
        }

#message {
            font-weight: bold;
            margin-bottom: 20px;
        }

#reset-btn {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Tic Tac Toe - Football Edition</h1>
    <div id="game-board">
        <div class="cell" onclick="makeMove(0)"></div>
        <div class="cell" onclick="makeMove(1)"></div>
        <div class="cell" onclick="makeMove(2)"></div>
        <div class="cell" onclick="makeMove(3)"></div>
        <div class="cell" onclick="makeMove(4)"></div>
        <div class="cell" onclick="makeMove(5)"></div>
        <div class="cell" onclick="makeMove(6)"></div>
        <div class="cell" onclick="makeMove(7)"></div>
        <div class="cell" onclick="makeMove(8)"></div>
    </div>
    <p id="message"></p>
    <button id="reset-btn" onclick="resetGame()">Reset</button>

// Winning combinations
        var 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]
        ];

function makeMove(cellIndex) {
            // Check if the cell is already occupied or the game has ended
            if (cells[cellIndex].innerHTML !== '' || gameEnded) {
                return;
            }

cells[cellIndex].innerHTML = currentPlayer;

// Check if the current player wins
            if (checkWin(currentPlayer)) {
                message.innerHTML = 'Player ' + currentPlayer + ' wins!';
                gameEnded = true;
                return;
            }

// Check if the game is a draw
            if (checkDraw()) {
                message.innerHTML = 'It\'s a draw!';
                gameEnded = true;
                return;
            }

// Switch player
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
            message.innerHTML = 'Player ' + currentPlayer + '\'s turn';
        }

function highlightWinningCombo(combo) {
            for (var i = 0; i < combo.length; i++) {
                cells[combo[i]].style.backgroundColor = 'green';
            }
        }

function resetGame() {
            currentPlayer = 'X';
            gameEnded = false;
            message.innerHTML = 'Player ' + currentPlayer + '\'s turn';
            for (var i = 0; i < cells.length; i++) {
                cells[i].innerHTML = '';
                cells[i].style.backgroundColor = '';
            }
        }

// Start the game
        message.innerHTML = 'Player ' + currentPlayer + '\'s turn';
    </script>
</body>
</html>