Flexbox Froggy

Sobre o jogo

Flexbox Froggy é um jogo de quebra-cabeça para aprender o layout flexbox do CSS. Há sapos num lago, vitórias-régias esperando do outro lado, e o seu trabalho é levar cada sapo à vitória-régia da sua própria cor. Você faz isso escrevendo CSS, a mesma linguagem que as páginas da web usam para posicionar coisas na tela: o lago é um contêiner flexível, e as propriedades que você digita decidem como os sapos lá dentro se alinham, se espalham, quebram em linhas, se viram ou trocam de lugar.

O jogo tem 24 níveis. Ele começa com uma única propriedade, justify-content, que empurra os sapos ao longo do eixo principal, e acrescenta uma ideia por vez: align-items para o outro eixo, flex-direction para virar o eixo, order e align-self para mover um sapo só, flex-wrap e align-content para várias linhas, e flex-flow para juntar tudo. Os últimos níveis misturam tudo, com sapos em colunas invertidas e em linhas que quebram para cima.

Jogando aqui

Clique em Play e o primeiro nível aparece. As instruções no alto da coluna da esquerda dizem o que fazer, e a caixa logo abaixo é um pequeno editor de código com a primeira e a última linha da regra já escritas; você digita as linhas do meio. O lago se atualiza enquanto você digita, então dá para ver o efeito de cada propriedade na hora. Quando os sapos chegam aonde devem, eles pulam nas vitórias-régias e o botão Próximo acende. O menu de níveis ao lado do contador deixa você voltar a qualquer nível que já tenha visto.

Seu progresso, suas respostas e suas configurações ficam no seu navegador, então dá para fechar a página e voltar ao mesmo nível. O menu Configurações, embaixo da coluna da esquerda, tem três opções: o idioma (o jogo começa em inglês nas páginas em inglês e em português do Brasil nas páginas em português, mas oferece mais de cinquenta), a dificuldade e um modo para daltônicos que desenha os sapos e as vitórias-régias de outro jeito, para ficarem mais fáceis de distinguir.

Controles

Algumas coisas que valem saber

O eixo muda. justify-content sempre age ao longo do eixo principal, e align-items no sentido transversal. Quando flex-direction vira o eixo, os dois trocam de papel, que é a ideia em torno da qual a maioria dos níveis é construída.

Leia as instruções. Cada nível apresenta no texto o que precisa, e tocar no nome de uma propriedade abre uma referência curta. Vários níveis têm mais de uma resposta certa; o jogo aceita qualquer uma delas.

Modos mais difíceis. O modo iniciante diz quais propriedades usar. O intermediário tira essas dicas, e o expert ainda embaralha a ordem dos níveis.

Experimente. Não se perde nada digitando um valor errado: o lago só se mexe, e o editor só conta a resposta quando todos os sapos estão em suas vitórias-régias.

Créditos e licença

Flexbox Froggy foi criado por Thomas Park. O código é publicado sob a licença MIT e as imagens (sapos, vitórias-régias) sob a licença Creative Commons Attribution 3.0, como diz o README do repositório dele no GitHub; as imagens aparecem sem alteração. O jogo é servido como o autor o publicou, a não ser por algumas mudanças nossas: o analytics, a publicidade, os botões de compartilhamento, os links para outros sites e as fontes da web carregadas do Google foram retirados, para que nada seja pedido a outros sites. Ele também contém jQuery e Animate.css (licença MIT) e as fontes PT Sans, Fredoka e Source Code Pro (SIL Open Font License), todas incluídas no jogo. Os textos das licenças estão ligados nesta página.