Jogo Flood Puzzle

 

Flood é um quebra cabeças simples implementado como uma Single Page App escrita usando HTML/CSS/JS. O objetivo do jogo é o de preencher toda a área do jogo com uma única cor. O preenchimento começa pelo canto superior esquerdo e quaisquer quadrados adjacentes que forem da mesma cor. Quando outra cor é tocada (ou clicada), o preenchimento do canto esquerdo superior muda para esta nova cor, e qualquer quadrado adjacente se torna parte do preenchimento. O número na parte de baixo da tela mostra o número de passos até então. O Flood foi escrito para mostrar diversas técnicas de programação e características da linguagem.

Características da Linguagem:

O app foi escrito em um arquivo HTML, mas grande parte do trabalho é feito em JavaScript e CSS3. Toda a lógica do jogo está em JavaScript, respondendo as interações do usuário, colorindo os campos e rastreando o número de movimentos, enquanto a aparência é governada primeirmente por estilos CSS3, incuíndo o tamanho e layout dos quadrados coloridos, o contador e o botão de reset. Muito do código CSS está focado no layout, mas ele também é usado para controlar a transição, o que faze com que as cores troquem suavemente de uma para outra, em vez de trocar de forma abruptamente.

Layout

O layout do campo de cores é simplesmente uma mesa quadrada grande, onde cada elemento td é um quadrado colorido. A cor de cada quadrado é determinada por uma escolha aleatória no JavaScript durante a inicialicação ou o reset. Cada quadrado está associado com a classe cell. Para evitar qualquer borda ou espaçamentos entre os quadrados, é importante setar border-spacing: 0.

Default borders
Bordas Padrão
 0px;
Usando border-spacing: 0px;
 

Lógica

Este jogo é comumente implementado usando botões separados, mas esta versão utiliza cada célula como um botão colorido. Quando uma célula é pressionada (ou qualquer coisa que dispare o evento onclick), a cor do preenchimento é alterada para aquela cor, e quadrados adjacentes são absorvidos através das funções doColor e addNeighbors, que criam uma lista de trabalho de células preenchidas e células vizinhas conectadas às adjacências.

Testes, Limitações e Soluções:

A app foi testado em um número de dispositivos e plataformas, incluindo navegadores de desktop como Firefox e Chrome, e diversos dispositivos Android e iOS, incluíndo smartphones e tablets.

Tendo em vista que ele não usa nenhuma funcionalidade exótica do HTML5 ou do CSS3, geralmente o exemplo funciona bem nas diversas plataformas testadas, mas o tamanho dos quadrados ou de todo o grid é problemático em dispositivos menores. Nestes dispositivos, se o app for escalonado para baixo em telas pequenas, os quadrados ficam tão pequenos que não podem ser usados como pontos de toque com precisão, comprometendo a jogabilidade. Nestes dispositivos, se o app for ampliado até um ponto onde os quadrados sejam grandes o suficiente para serem tocados, então apenas uma parte do grid ficará visível, tornando o scroll necessário, o que também compromete a jogabilidade. Uma solução melhor seria provavelmente a de usar botões separados para selecionar as cores, como é feito em algumas outras versões deste app, mas isto seria necessário apenas em smartphones.

Outra diferença interessante apareceu durante os testes. Quando executado em um navegador de um smartphone, o aplicativo foi reduzido para o tamanho da tela. Aparentemente existe alguma facilidade para remapear os pixels em um smartphone, de forma que uma largura típica de desktop pode trabalhar bem em um smartphone sem zoom. Entretanto, quando foi executado como um app construído com o PhoneGap, o zoom automático não aconteceu, então os quadrados ficaram grandes, mas o campo todo não era visível sem o scroll.

Uma melhoria neste app pode ser levar em consideração o tamanho da tela, bem como o número de pixels para a largura da tela, e adaptar a interface de forma apropriada.

 
Para obter informações mais completas sobre otimizações do compilador, consulte nosso aviso de otimização.