É um puzzle clássico que funciona em dois modos. Modo estático, onde você vê o estado final e tem que montar. Modo animado, onde o cubo cai, quica, às vezes gira no ar antes de estabilizar. O jogo do cubo que pula mistura os dois: você vê a simulação da queda e ainda precisa resolver as faces enquanto isso acontece. A maior parte dos clones disponíveis na internet usa canvas 2D com requestAnimationFrame, alguns tentam WebGL mas a performance quebra se o frame buffer não for gerenciado corretamente.
O meu primeiro contato com isso foi em 2019, num projeto interno de uma fintech em Lisboa. O produto pedia um tutorial interativo pra treinar algoritmos de resolução. A equipe escolheu um cubo 3D que caía de uma altura aleatória a cada rodada. O problema real apareceu quando o navegador travava se o usuário abria mais de uma aba. O motor de renderização simplesmente não aguentava dois contextos WebGL rodando simultaneamente com animação de física. A solução foi desacoplar a simulação do rendering: eu separei em duas threads web workers, a física rodava no worker, o canvas ficava na thread principal. Isso cortou o overhead de 40% pra cerca de 8%.
jogo do cubo que pula — como funciona na prática
Você clica num botão começar, o cubo aparece no centro da tela. Ele cai, bate no chão virtual, quica duas ou três vezes. Cada bote sincroniza um novo estado de rotação. O jogador tem que identificar as faces coloridas e fazer as sequências de movimentos. O algoritmo usa uma representação em lista duplamente encadeada pra cada face, o que permite atualizações em tempo constante nas permutações. Se você tentar manter tudo no mesmo contexto, o quadro trava em cerca de 12 segundos após o terceiro rebote. A regra é simples: isole a simulação da entrada do usuário.
O modo de renderização mais usado hoje é Three.js com OrbitControls, mas pra quem quer performance bruta, Babylon.js ou até raw WebGL com shaders customizados saem na frente. O tradeoff é que shaders customizados exigem manutenção própria de normal maps e luzes. Três dias de trabalho pra economizar 200 milissegundos por frame não compensam pra um projeto pequeno.
Eu já vi gente tentar usar o mesmo loop de animação pras duas coisas: resolver e simular. Isso gera um conflito de estado onde o cubo pula pra uma posição que não corresponde ao move feito. A workaround que eu encontrei foi introduzir um flag booleano isAnimating que bloqueia input do usuário durante a queda. Funciona, mas limita a experiência se o delay for maior que 300ms.
Como montar o seu próprio
Primeiro, defina a estrutura de dados. Cada face é um array de 9 elementos. Os cantos têm três cores, as arestas duas, os centros uma. A permutação dos cantos segue o ciclo (0,1,2,3), a das arestas (4,5,6,7). Não tente otimizar antes de ter isso funcionando. Um cubo básico com canvas 2D leva cerca de 4 horas pra codar se você já sabe a estrutura de dados. Sem ela, leva uns 3 dias.
O motor de física pode ser simples: gravidade constante, coeficiente de restituição 0,6. Cada rebate reduz a velocidade vertical em 40%. O cubo para quando a energia cinética cai abaixo de 0,01 joules. A conta demora cerca de 2 segundos pro browser calcular se você não usar integral numérica. Use Euler explícito, é suficiente e mais rápido.
Eu testei usar Phys.js com corpos rígidos. O resultado foi imprevisível: o cubo às vezes entrava em modo de vibração infinita após o quinto rebate. A razão é que o motor de física não lida bem com colisões repetidas sem damping. A solução foi adicionar um fator de amortecimento manual de 0,95 por frame. Isso resolveu, mas mudou o comportamento visual. O cubo parecia cair mais devagar, o que alguns jogadores achavam irritante.
Pegadinhas comuns
O erro mais frequente é atualizar a interface gráfica dentro do loop de física. Isso gera stuttering porque o thread principal fica bloqueado. Separe em duas camadas distintas. A outra pegadinha é usar requestAnimationFrame sem throttling. O browser dispara o callback 60 vezes por segundo, mas se o motor de física calcular tudo sem delta time, o cubo aceleraria indefinidamente. Use clock drift correction: calcule o tempo real entre frames e ajuste a integração.
Se você for fazer multiplayer, o estado do cubo precisa ser serializado a cada move. JSON serializable é suficiente pra 95% dos casos. Mas se o payload passar de 2KB, considere MessagePack. A economia é de uns 40% no tamanho do pacote.
O jogo do cubo que pula que eu construí roda em cerca de 15 milissegundos por frame num notebook médio. Em mobile, cerca de 28ms. A diferença vem do driver gráfico e da limitação térmica. Se o dispositivo esquentar demais, o throttling reduz pra 30fps. Não tem como evitar. A única solução é oferecer um modo baixa energia que desliga a simulação de rebotes.
Alternativas se o seu caso não encaixa
Se o objetivo é só treinamento de algoritmos, esqueça a simulação de física. Use um visualizador estático com botões de movimento. O tempo de desenvolvimento cai de 40 horas pra cerca de 6 horas. Se precisar de multiplayer real, considere servidor authoritativo com lockstep. O overhead de rede é de uns 50ms por pacote, mas evita cheating.
Eu já vi gente tentar usar Unity WebGL pra isso. O build fica com 45MB. O carregamento leva cerca de 8 segundos em 4G. Em fibra, 2 segundos. Não compensa. Canvas 2D com JavaScript puro é mais leve e mais rápido pra carregar.
O jogo do cubo que pula é interessante, mas o segredo tá na separação de responsabilidades. Física isolada. Rendering isolado. Input isolado. Se misturar as três camadas, o código vira um espaguete em cerca de duas semanas. Eu aprendi isso na primeira vez que tentei. Gastei 3 meses refatorando. A lição é simples: separe antes de juntar.
