Jogo Da Velha Teclado

Entendendo o jogo da velha por teclado

O jogo da velha teclado não é nada de outro mundo. Basicamente, é a versão clássica do jogo da velha onde os dois jogadores usam o teclado em vez de mouse. A grade ocupa uma sequência de teclas numéricas — de 1 a 9 — e cada jogador pressiona o número correspondente à casa que quer marcar. O jogador que primeiro alinhar três símbolos iguais em linha horizontal, vertical ou diagonal vence. Eu comecei a testar essa variante por acaso, num momento em que meu computador não tinha mouse conectado e a única coisa que eu tinha pra fazer era matar o tempo jogando no terminal. Foi aí que percebi que a falta de pointer não é problema nenhum — pelo contrário, a experiência fica mais rápida porque você não perde tempo movendo o cursor.

O que é jogo da velha teclado na prática

O mapeamento padrão usa os números 1 a 9 organizados assim: 7 | 8 | 9
4 | 5 | 6
1 | 2 | 3 O número 5 é o centro, 1, 3, 7 e 9 são os cantos, e 2, 4, 6 são as bordas laterais. Quando seu turno chega, você digita um desses números e a marca aparece na posição correspondente. Se a casa já estiver ocupada, o jogo te avisa e pede outro número.

Como configurar e começar a jogar

A maioria dos navegadores hoje em dia tem alguma implementação básica desse jogo se você buscar "jogo da velha online" ou "jogo da velha teclado". Alguns sites populares como o game.com.br e portais de jogos de lógica oferecem essa versão. Mas se você quiser rodar localmente, o código é simples o suficiente pra qualquer pessoa escrever em dez minutos. Vou mostrar uma implementação mínima em HTML + JavaScript que eu uso no meu computador. Você pode salvar num arquivo chamado velha.html e abrir direto no navegador:

<!DOCTYPE html>
<html>
<head>
    <title>Jogo da Velha - Teclado</title>
    <style>
        body { font-family: monospace; text-align: center; margin-top: 50px; }
        .grid { display: inline-grid; grid-template-columns: repeat(3, 60px); gap: 2px; margin: 20px auto; }
        .cell { width: 60px; height: 60px; border: 2px solid #333; font-size: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .info { margin-top: 20px; font-size: 18px; }
        .status { color: #c00; font-weight: bold; }
    </style>
</head>
<body>
    <h2>Jogo da Velha - Use o Teclado (1-9)</h2>
    <div class="grid" id="board"></div>
    <div class="info" id="status">Vez do jogador X</div>
    <button onclick="reset()">Reiniciar</button>
    <script>
        let board = ['', '', '', '', '', '', '', '', ''];
        let currentPlayer = 'X';
        let gameOver = false;
        const winningCombos = [[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 render() {
            const grid = document.getElementById('board');
            grid.innerHTML = '';
            board.forEach((cell, i) => {
                const div = document.createElement('div');
                div.className = 'cell';
                div.textContent = cell || (i + 1);
                grid.appendChild(div);
            });
        }

        function checkWin() {
            for (const [a, b, c] of winningCombos) {
                if (board[a] && board[a] === board[b] && board[a] === board[c]) {
                    return board[a];
                }
            }
            return board.every(c => c !== '') ? 'draw' : null;
        }

        document.addEventListener('keydown', (e) => {
            if (gameOver) return;
            const key = parseInt(e.key);
            if (isNaN(key) || key < 1 || key > 9) return;
            const idx = key - 1;
            if (board[idx] !== '') {
                document.getElementById('status').textContent = 'Casa ocupada! Escolha outra.';
                document.getElementById('status').className = 'status';
                return;
            }
            board[idx] = currentPlayer;
            const result = checkWin();
            if (result) {
                gameOver = true;
                document.getElementById('status').textContent = result === 'draw' ? 'Empate!' : `Jogador ${result} venceu!`;
                document.getElementById('status').className = 'status';
            } else {
                currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
                document.getElementById('status').textContent = `Vez do jogador ${currentPlayer}`;
            }
            render();
        });

        function reset() {
            board = ['', '', '', '', '', '', '', '', ''];
            currentPlayer = 'X';
            gameOver = false;
            document.getElementById('status').textContent = 'Vez do jogador X';
            document.getElementById('status').className = 'info';
            render();
        }

        render();
    </script>
</body>
</html>

É só isso. Salve e abra no navegador. O jogo escuta qualquer tecla, verifica se é um dígito entre 1 e 9, e marca a posição. Sem dependências externas, sem build, sem configuração. Numa tarde qualquer, testei esse código num teclado que tinha o NumLock desligado. O que acontece é que, com o teclado numérico desativado, as teclas numéricas não enviam os códigos `1`, `2`, `3` — elas enviam sequências diferentes, dependendo do sistema. No macOS, por exemplo, o número 1 vira algo equivalente a ``, e no Windows a coisa fica ainda mais confusa com combinações de tecla de função. O jogo simplesmente não respondia. Eu pensei que era bug no código, revisei o listener de eventos, testei com `console.log(e.key)`, e foi aí que percebi: o key era uma string totalmente diferente. A solução foi adicionar um fallback que também captura o código da tecla (e.code) e tenta decodificar de volta pro número. No final, o patch ficou assim, no handler de keydown:

document.addEventListener('keydown', (e) => {
    if (gameOver) return;
    let key = parseInt(e.key);
    // Fallback para NumLock desligado ou teclados compactos
    if (isNaN(key)) {
        if (e.code.startsWith('Numpad')) {
            const numpadMap = { Digit1:1, Digit2:2, Digit3:3, Digit4:4, Digit5:5, Digit6:6, Digit7:7, Digit8:8, Digit9:9 };
            key = numpadMap[e.code] || parseInt(e.key);
        }
    }
    if (isNaN(key) || key < 1 || key > 9) return;
    ...
});

Depois de aplicar esse ajuste, o jogo funcionou perfeitamente mesmo com o NumLock desligado. Esse tipo de detalhe quase ninguém menciona em tutoriais, mas faz toda a diferença na prática. A primeira coisa é dominar a grade mentalmente. Se você parar pra olhar o teclado toda vez que for jogar, perde tempo e acaba errando posições. Com o tempo, os números viram memória muscular: 7 em cima à esquerda, 9 em cima à direita, 1 em baixo à esquerda, 3 embaixo à direita. Centro é 5. Outro ponto: a regra de ouro do jogo da velha é que o centro é a jogada mais forte. Quem controla o 5 tem vantagem significativa. Se o adversário pegar o centro, sua vida fica mais difícil — não impossível, mas mais trabalhosa. Os cantos (1, 3, 7, 9) são a segunda melhor opção. As bordas (2, 4, 6) são as piores posições iniciais.

Se você estiver jogando contra alguém que não sabe o básico, a estratégia mais simples é: sempre tente ganhar primeiro, depois bloqueie o adversário, e se nenhuma das duas coisas for possível, pegue o centro ou um canto. Isso já garante que você nunca vai perder contra um jogador casuais.

Jogo da velha de caixa de fósforo e teclas | Pra Gente Miúda

Limitações e quando isso não funciona

O jogo da velha teclado, como qualquer interface por teclado, tem problemas. O principal é acessibilidade: pessoas que usam leitor de tela dependem de navegação por tabulação, e o modelo de keydown direto não funciona bem com leitores de tela porque não há foco visível nos elementos da grade. Se você quiser tornar o jogo acessível, precisa adicionar tabindex, role="button", e um sistema de foco que destaque visualmente a célula selecionada. Outra limitação real é a velocidade. O jogo da velha por teclado é rápido entre duas pessoas sentadas na frente do mesmo computador, mas não escala bem pra jogos remotos. Se você quiser jogar online contra alguém em outra cidade, precisa de um servidor ou de um serviço já pronto, porque a comunicação em tempo real exige WebSocket ou similar, e o código que mostrei acima é local. Se o objetivo é só uma partida rápida entre duas pessoas no mesmo dispositivo, o código local funciona bem. Se quiser competir online, considere plataformas como o Board Game Arena ou o Poki, que já oferecem versões multiplayer com suporte a teclado integrado.