Grid Garden

Sobre o jogo

Grid Garden é um jogo de quebra-cabeça para aprender o layout grid do CSS. Você tem uma horta organizada numa grade, com cenouras crescendo em alguns quadrados e ervas daninhas em outros, e um irrigador que rega a área que você descrever. A descrição é escrita em CSS, a linguagem que as páginas da web usam para posicionar coisas na tela, e o objetivo é simples: regar todas as cenouras e manter a água longe das ervas daninhas.

O jogo tem 28 níveis. Ele começa com grid-column-start, que diz em qual linha vertical da grade a área regada começa, e depois acrescenta as ideias do layout grid uma por vez: onde a área termina, quantas colunas ela cobre, o mesmo para as linhas, os atalhos grid-column, grid-row e grid-area, a propriedade order, que embaralha os itens, e por fim o lado do contêiner da grade, com grid-template-columns, grid-template-rows e o espaço entre as células. Os últimos níveis combinam tudo isso.

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. A horta se atualiza enquanto você digita, com uma grade por cima que numera as linhas, então dá para ver exatamente onde cada valor põe a água. Quando as cenouras estão regadas e as ervas daninhas ficam de fora, as cenouras crescem 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 e suas respostas ficam no seu navegador, então dá para fechar a página e voltar ao mesmo nível. O menu de idioma, embaixo da coluna da esquerda, oferece mais de cinquenta idiomas; 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.

Controles

Algumas coisas que valem saber

Conte as linhas, não os quadrados. As linhas da grade são as linhas finas entre os quadrados e em volta deles, numeradas a partir de 1 em cada lado. Uma horta de 5 por 5 tem 6 linhas verticais, e grid-column-start: 3 começa exatamente onde está a terceira linha.

Números negativos contam do fim. O valor -1 é a última linha, o que ajuda quando você não quer contar.

Os spans poupam digitação. grid-column: 2 / span 3 começa na linha 2 e cobre três colunas, não importa em qual linha isso termine.

Experimente. Não se perde nada com um valor errado: a água só cai em outro lugar, e o nível só é resolvido quando toda cenoura está regada e nenhuma erva daninha está.

Créditos e licença

Grid Garden foi criado por Thomas Park. O código é publicado sob a licença MIT e as imagens (cenouras, ervas daninhas, a horta) 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, Autour One e Source Code Pro (SIL Open Font License), todas incluídas no jogo. Os textos das licenças estão ligados nesta página.