Projeto

Hangman Game é um jogo que relembra um dos jogos mais jogados na infância de todos e famoso até hoje, sendo utilizado, também, como forma de aprendizado, em diversos assuntos, principalmente para crianças, basicamente a missão do jogador é descobrir a palavra aleatória para que possa ajudar o homenzinho em apuros a não ir para a forca, cada letra errada pode ser um determinante para a sobrevivência do homem.

Prints

Aprendizados & Desafios

Esse projeto foi criado do zero, levando em consideração conceitos de UX/UI Design e “um poucoo” de lógica…🤏🏼Com um visual “dark” para o jogador sentir realmente a sensação de estar em uma noite sombria de lua cheia sendo levado à forca…😨

Principais desafios

• Lidar com posição relativa e absoluta do CSS para centralizar o bonequinho no centro da lua cheia (e continuar responsivo, independente do dispositivo), pois não tinha muita familiaridade com essas propriedades de posição.


• Pensar como seria armazenado a escolha da categoria pelo jogador na página inicial ao fazer a transição para a página do game, pois ao ser direcionado para a página seguinte a variável não estava sendo armazenada, encontrei a solução de armazená-la localmente através do Window.localStorage, uma propriedade somente leitura que permite guardar objetos localmente e podendo acessar os dados salvos através das sessões do navegador.


• Pensar qual seria a melhor forma de criar um boneco do zero que pudesse ser manipulado membro a membro ao decorrer do game, através de pesquisas encontrei na documentação do JavaScript no site → https://developer.mozilla.org/ , que existe um elemento HTML que nos permite desenhar em um quadro que é o Canvas, como se fosse uma lousa mesmo, com isso meu principal impedimento a esse projeto foi solucionado.


• Problemas no evento keyUp para detectar quando usuário estivesse com a input selecionado e pressionasse enter e acionar o evento onClick, que posteriormente faz o processamento do resto do código, o problema estava com a chamada dupla da função devido a propagação do evento click para os elementos pais, com a solução encontrada no Stack Overflow utilizando o método StopImmediatePropagation() foi solucionado o problema da chamada dupla, pois ele interrompe a propagação para os níveis superiores da hierarquia DOM, fazendo com que registre a tecla apenas uma vez.


• Último e não menos importante é:

Tentar ajudar o homenzinho prestes a ir para a forca… 😸