Um jogo feito somente com Html e Css, o objetivo do jogo é coletar as moedas clicando nelas e evitar a colisão com os obstáculos.
Esse Jogo foi feito seguindo uma palestra da Fernanda Bernardo no FrontInVale 2017 - Jogos: indo além do simples CSS por Fernanda Bernardo, o jogo foi feito sem usar uma linha de javascript, o que limita um pouco o jogo mas é ótimo para estudar seletores avançados, para realmente entender o que esta acontecendo eu sempre vou pesquisando as coisas que não sei, eu já havia feito esse jogo uma vez então muita coisa já não foi novidade para mim, então decidi que ia pesquisar a fundo para tentar melhorar um pouco mais o código, não consegui modificar muita coisa, pesquisei bastante, conheci algumas funcionalidades novas enquanto tentava achar algo para melhorar o código, e no final a maior mudança que fiz e que economizou algumas linhas de código, foi inserir variáveis do css pelo style do elemento no html, isso foi uma coisa que nunca tinha pensando, já tinha visto as variais no css de maneira global, mas dessa vez o que fiz foi por exemplo determinar a posição da moedas do jogo através de variáveis colocando elas na tag, assim eu evitei de criar um seletor para cada moeda e colocar a posição delas uma por uma, apenas usei uma var() na classe, outra coisa bem legal e usar um checkbox para controlar outros elementos caso ele esteja ativo ou desativo, como fazer aparecer a tela de pause do jogo e usar o seletor ~ para selecionar elementos irmãos, é um projeto simples e pequeno mas que agrega muito conteúdo legal, como usar o css para contar com a prop counter-reset, o css é incrível e vai além do que se imagina.
- Git (Para clonar, opcional)
# Primeiro passo, abra o console e clone o repositório ou
# baixe o projeto em sua maquina
$ git clone git@github.com:devsp011/robo-conversor-moeda.git
# Segundo passo, executar o arquivo index.htmlMelhor que uma imagem mostrando como ficou o jogo, você pode acessar ele e jogar, ele esta hospedado aqui no GitHub Pages Link para o Jogo