Jogo da velha detalhado com pontuação e ia com cores arial e prêmios's game

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

No:21240

←

Prev Next

→

Jogo da velha detalhado com pontuação e ia com cor..ALL
Developer User9365｜Date and time 23/10/14 7:20:54
Build time 82.396 sec｜Game capacity 5.471KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<HTML>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        
        .board {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 10px;
        }
        
        .cell {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            border: 1px solid #ccc;
            font-size: 36px;
            cursor: pointer;
        }
        
        .cell:hover {
            background-color: #f9f9f9;
        }
        
        .message {
            font-weight: bold;
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
    
<body>
    <div class="container">
        <div id="board" class="board"></div>
    </div>
    
    <script>
        // O jogo da velha será implementado como um HTML interativo usando JavaScript
        
        // Inicialização de variáveis
        let board = ['', '', '', '', '', '', '', '', ''];
        let currentPlayer = 'X';
        let gameOver = false;
        let scoreX = 0;
        let scoreO = 0;
        
        // Função para renderizar o tabuleiro
        function renderBoard() {
            const boardElement = document.getElementById('board');
            boardElement.innerHTML = '';
            
            for(let i = 0; i < board.length; i++) {
                const cell = document.createElement('div');
                cell.classList.add('cell');
                cell.dataset.index = i;
                cell.addEventListener('click', handleCellClick);
                cell.innerText = board[i];
                
                boardElement.appendChild(cell);
            }
        }
        
        // Função para lidar com o clique em uma célula
        function handleCellClick(event) {
            const clickedCellIndex = event.target.dataset.index;
            
            if(board[clickedCellIndex] === '' && !gameOver) {
                board[clickedCellIndex] = currentPlayer;
                renderBoard();
                checkWinner();
                switchPlayer();
            }
        }
        
        // Função para verificar o vencedor
        function checkWinner() {
            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]
            ];
            
            for(let combination of winningCombinations) {
                const [a, b, c] = combination;
                
                if(board[a] !== '' && board[a] === board[b] && board[a] === board[c]) {
                    gameOver = true;
                    highlightWinnerCells(a, b, c);
                    
                    if(board[a] === 'X') {
                        scoreX++;
                        showMessage('Jogador X venceu!');
                    } else {
                        scoreO++;
                        showMessage('Jogador O venceu!');
                    }
                    
                    updateScore();
                    setTimeout(resetGame, 2000);
                    return;
                }
            }
            
            if(board.indexOf('') === -1) {
                gameOver = true;
                showMessage('Empate!');
                setTimeout(resetGame, 2000);
            }
        }
        
        // Função para destacar as células vencedoras
        function highlightWinnerCells(a, b, c) {
            const cells = document.getElementsByClassName('cell');
            cells[a].style.backgroundColor = '#00ff00';
            cells[b].style.backgroundColor = '#00ff00';
            cells[c].style.backgroundColor = '#00ff00';
        }
        
        // Função para alternar o jogador atual
        function switchPlayer() {
            currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
        }
        
        // Função para mostrar mensagem de resultado
        function showMessage(message) {
            const boardElement = document.getElementById('board');
            const messageElement = document.createElement('div');
            messageElement.classList.add('message');
            messageElement.innerText = message;
            boardElement.appendChild(messageElement);
        }
        
        // Função para atualizar a pontuação
        function updateScore() {
            const score = document.getElementById('score');
            score.innerText = `Pontuação - X: ${scoreX} | O: ${scoreO}`;
        }
        
        // Função para reiniciar o jogo
        function resetGame() {
            board = ['', '', '', '', '', '', '', '', ''];
            currentPlayer = 'X';
            gameOver = false;
            
            const boardElement = document.getElementById('board');
            boardElement.innerHTML = '';
            
            const messageElement = boardElement.querySelector('.message');
            boardElement.removeChild(messageElement);
            
            renderBoard();
        }
        
        // Inicialização do jogo
        renderBoard();
    </script>
</body>
</HTML>