minesweeper

Campo Minado

Campo Minado... sim, aquele velho jogo clássico que você lembra de ter jogado no bom e velho Windows '95 antigamente (na verdade, ele foi implementado nas atualizações de software da Microsoft até o Windows 8). O Campo Minado tem suas origens nos primeiros jogos de mainframe das décadas de 1960 e 1970. O ancestral mais antigo do Campo Minado foi o Cubo de Jerimac Ratliff. O estilo de jogo básico tornou-se um segmento popular do gênero de jogos de quebra-cabeça durante a década de 1980.

Recapitule sua história no Campo Minado aqui.

Você sabe o que é um Campo Minado de verdade? Eu também não sabia até ler isso.

Lembro-me da minha primeira experiência com computadores nos anos 90, que envolvia jogar muito esse jogo, então pensei que jogo melhor do que esse para fechar o círculo?

Minha versão

Começando

Jogue o jogo aqui!

Jogabilidade Básica

1. Selecione seu nível de dificuldade.

• Fácil = 9x9, 10 minas
• Médio = 16x16, 40 minas
• Difícil = 30x30, 160 minas

2. Clique em qualquer lugar do quadro para iniciar e iniciar o cronômetro. *Os números representam quantas minas estão adjacentes a qualquer célula.
3. Use “Shift + Click” para adicionar sinalizadores a uma célula se você achar que é uma mina.

Ganhar/Perder

• Se você acertar uma mina... o jogo acaba, mano.
• Ganhe descobrindo todas as células sem minas!

(entendeu... MEU... VARREDORA...?)

Tecnologias Utilizadas

Os bons e velhos Três Amigos:

• HTML
• CSS
• JavaScript

HTML

Como você pode ver no código-fonte, o HTML é muito conciso, já que a maior parte da ação acontece no JavaScript. Sem mencionar que o tabuleiro em si é apenas uma mesa simples.

CSS

Eu me diverti muito estilizando isso com a aparência antiga da visualização da área de trabalho do Windows 95. Ainda quero mexer um pouco com ele para deixá-lo perfeito (não consegui encontrar a fonte exata usada pelo MS).

Meu maior desafio com CSS foi descobrir os estilos das tabelas (bordas, tamanhos td, etc.)

JavaScript

Como esta foi a primeira vez que escrevi um aplicativo web funcional usando JavaScript, não é uma grande surpresa que esta seção tenha sido de longe o maior desafio do projeto para mim.

Aqui estão alguns destaques:

1. Dimensionando dinamicamente a tabela ao clicar em um nível de dificuldade

• Eu criei uma função (com a ajuda de Jim, é claro) que analisa o número do ID na tabela e o converte em uma variável ${size} que basicamente anexa linhas/colunas com base no número que ela captura. Esse conceito me surpreendeu.

2. Por sua vez, criando dinamicamente uma matriz de matrizes para corresponder à tabela visual.
3. Criando uma classe "Célula" que usei para criar "objetos de célula" individuais aos quais atribuí uma tonelada de propriedades: linha#, col#, bomba t/f, # de bombas adjacentes (outro desafio por si só, aliás) , revelou t/f e sinalizou t/f.

• Essa abordagem tornou muito mais fácil escrever código mais conciso e não me repetir indefinidamente, bem como criar métodos na classe que seriam executados para cada objeto de célula.

4. Criação de um cronômetro funcional que exibia os segundos decorridos.
5. Randomizando a colocação de bombas no array.
6. Renderizando tudo no DOM.
7. Atribuir manipuladores de cliques a diferentes eventos.
8. Criando lógica de ganhar/perder
9. Descobrir o fluxo de controle de como as funções são encadeadas de forma síncrona.
10. Aprendendo sobre recursão e como escrever corretamente uma função que crie tal efeito.

Minhas escolhas de design

Decidi usar o visual OG Windows '95. Acredito firmemente no princípio "Imite. Assimilar. Inovar". modelo de aprendizagem, então imaginei que para meu primeiro projeto eu precisava caminhar antes de poder correr e começar com a fase de imitação do processo de aprendizagem.

Estou muito feliz por ter escolhido esse caminho, pois aprendi MUITO simplesmente tentando combinar os estilos do jogo original.

Com isso dito, definitivamente irei criar uma versão modernizada disso em breve.

Próximos passos!

Este projeto realmente foi muito divertido para mim. Pretendo continuar a aprimorá-lo e relembrar as muitas lições aprendidas nos próximos anos.

• Como mencionei anteriormente, eu adoraria fazer uma "alternância de exibição" que mudasse o CSS para uma UI modernizada, limpa, plana e minimalista.
• Existem alguns pequenos bugs estéticos estúpidos que estão me fazendo arrancar os cabelos, como a forma como a largura/altura da célula é ajustada em alguns pixels quando a placa é totalmente revelada. Eu preciso consertar isso.
• Eu também adoraria dar mais detalhes ao Windows 95, fazendo com que o botão Iniciar fizesse alguma coisa, adicionasse um relógio no canto inferior direito e alguns ícones funcionais da área de trabalho.
• Um recurso realmente difícil que eu adoraria abordar seria criar um recurso onde o usuário pudesse escolher a dificuldade inserindo números (números de linha/coluna/mina).

Isso será para um dia chuvoso.

Obrigado por ler! Espero que você goste do jogo :)