Placar
Placar com estilo flip para pontuação em tempo real de jogos e partidas
O que é um Placar?
Um placar é uma ferramenta dedicada para registrar pontuações em eventos esportivos e jogos competitivos. Este placar online replica a aparência e a animação de virada de um placar mecânico real, proporcionando uma experiência imersiva para tênis de mesa, badminton, basquete, jogos de tabuleiro, noites de trivia e muito mais.
Oferece múltiplos esquemas de cores, incluindo vermelho-azul e vermelho-amarelo, suporta até 6 times e possui modo de tela cheia para projeção em telas grandes. Todos os dados são salvos automaticamente no armazenamento local do navegador.
Ao usar com outras pessoas, entradas, premissas e resultado esperado devem estar claros para evitar interpretações erradas.
Como Usar
Como usar
- Selecione o esquema de cores: vermelho-azul, vermelho-amarelo e outros
- Clique no nome da equipe para editar
- Use os botões + / - para ajustar a pontuação
- Clique no botão de tela cheia para projetar na tela grande
Dicas de Exibição
- Ative o modo tela cheia antes do evento começar para que nomes, cores e pontuações fiquem legíveis da posição da plateia.
- Se as pontuações forem oficiais, mantenha um registro escrito ou em sistema separado, caso a aba do navegador seja fechada ou o armazenamento local seja limpo.
Casos de uso
Princípio técnico
O placar roda como uma pequena máquina de estados do lado do cliente: cada time é um objeto com campos de nome, pontuação e cor, e toda a escalação é persistida em window.localStorage como uma string JSON a cada mutação. Como o localStorage é síncrono e escopado por origem mais perfil do navegador, a mesma aba sobrevive a uma atualização, mas um navegador diferente ou uma janela em modo privado começa com uma escalação vazia. A animação de dígitos estilo flip é puramente CSS: cada dígito é duas metades rotacionadas ao redor do eixo X, e uma mudança de pontuação troca o dígito visível enquanto uma transição transform: rotateX de 300-400 ms anima a aba. Como a animação é conduzida por estado local em vez de um frame de rede, o display continua animando mesmo quando o Wi-Fi do local cai no meio do jogo. A apresentação em tela cheia usa a API Fullscreen padrão (element.requestFullscreen, document.exitFullscreen) para que o placar preencha um projetor ou TV sem a interface do navegador. A sincronização multi-aba aproveita o evento storage: quando a chave do localStorage muda em uma aba, todas as outras abas na mesma origem recebem um StorageEvent e re-renderizam a partir do JSON atualizado. Isso permite que o telefone de um árbitro e um laptop à beira da quadra permaneçam sincronizados sem nenhum backend, já que nenhum dado sai do dispositivo.
- Persistência de estado: window.localStorage.setItem com uma escalação em JSON stringificado a cada mudança de pontuação, escopado por origem e perfil do navegador
- Animação flip: duas pseudo-metades CSS animadas com transform: rotateX ao longo de cerca de 300-400 ms; nenhuma loop de animação JS necessária
- API Fullscreen: element.requestFullscreen() / document.exitFullscreen() com o evento fullscreenchange para rastrear saída pela tecla Esc
- Sincronização multi-aba: window.addEventListener('storage', handler) dispara em todas as outras abas quando a chave muda
- Piso de pontuação: pontuações são limitadas a zero para que o botão de menos não produza resultados negativos durante jogos casuais
- Tema de cores: variáveis CSS customizadas (--team-a, --team-b) trocam a paleta sem re-renderizar a árvore DOM
- Limites de pontuação seguem o conjunto de regras ativo, por exemplo basquete não tem limite, tênis de mesa termina em 11 com regra de desempate de 2 pontos
Exemplos
Placar de basquete no intervalo
Time A: Lakers Cor: vermelho
Time B: Celtics Cor: azul
Q1: 22 - 18
Q2: 41 - 38 (intervalo)
Q3: 60 - 55
Q4 final: 82 - 76
Tema: vermelho-azul, tela cheia no projetor do ginásioPartida de tênis por set
Set 1: 6 - 4 (Jogador A vence)
Set 2: 3 - 6 (Jogador B vence)
Set 3: 7 - 5 (Jogador A vence)
Final: Jogador A vence 2-1
Dica: renomeie os times com nomes dos jogadores, reinicie entre as partidasNoite de quiz, formato com 4 times
Rodada 1: Time Quokka 8, Time Otter 6, Time Bear 7, Time Wolf 5
Rodada 2: 14, 13, 12, 10
Rodada 3: 21, 22, 17, 16
Final: 30, 31, 25, 23 -> Otter vence
Suporta até 6 times, pontuações salvas no localStorageTênis de mesa, jogo de 11 pontos
Sequência: 1-0, 2-0, 2-1, 3-1, 3-2, 3-3, 4-3, ..., 10-9
Deuce em 10-10: precisa vencer por 2
Final: 12 - 10
Tema: vermelho-amarelo para alto contraste em telão
Reiniciar Pontuação mantém os nomes dos jogadores para o próximo jogoPerguntas frequentes
Para quais esportes ele serve?
Originalmente projetado para tênis de mesa e badminton com pontuação tipo placar de virar (mudança rápida, dígitos grandes em destaque). Funciona igualmente bem para jogos de tabuleiro, noites de quiz, basquete, vôlei, torneios de e-sports, competições em sala de aula e qualquer exibição de placar com atualização rápida.
Posso personalizar nomes e cores dos times?
Sim. Edite os nomes dos times clicando diretamente neles. Escolha entre temas de cores predefinidos (vermelho-azul, vermelho-amarelo, etc.) para combinar com seu evento. Não há recurso de upload de logo ou imagem.
Como a animação de virar funciona?
É uma animação de transformação 3D em CSS que imita placares mecânicos de virar. A duração da virada é curta o bastante para não atrasar pontuações rápidas (algumas centenas de ms). Desative a animação nas configurações se preferir atualizações instantâneas.
O placar é salvo quando atualizo a página?
Sim. O elenco atual (nomes dos times, placares, cores) é salvo no localStorage a cada alteração, então uma atualização no mesmo navegador preserva o placar. Trocar de navegador ou limpar os dados do site reseta para 0-0.
Posso usá-lo em um projetor ou tela grande?
Sim. O placar suporta o modo tela cheia para que você possa exibi-lo em projetor, TV ou monitor externo. Os placares são salvos no localStorage e sobrevivem a uma atualização da página dentro do mesmo navegador.
Suporta pontuação por sets ou games (por exemplo, tênis)?
Algumas versões, sim — permitem definir uma estrutura de 'melhor de N sets' e resetar a contagem de pontos ao final de cada set. Versões mais simples só rastreiam pontos brutos. Escolha o modo apropriado para seu esporte.
Algo é enviado para a internet?
Não. O placar roda inteiramente no seu navegador. Os placares ficam na sua aba e (opcionalmente) no localStorage. Nada é compartilhado com um servidor.