ATENÇÃO!!
Esta entrega é HARD DEADLINE, ou seja, se você não submete-la até o prazo de entrega, você NÃO poderá enviar após a data de entrega. Reveja atentamente no fim da entrega o seu tempo limite, qualquer dúvida chame o seu Facilitador.
A Torre de Hanoi é um quebra-cabeças.
Ele consiste de três varetas e um número de discos de diferentes tamanhos que podem ser encaixados em qualquer vareta. O jogo começa com todos os discos empilhados em uma vareta, do maior (embaixo) para o menor (no topo).
O objetivo do quebra-cabeças é mover toda a pilha para outra vareta obedecendo às seguintes regras:
- Apenas um disco pode ser movido por vez.
- Cada movimento consiste de pegar o disco de cima de uma das pilhas e movê-lo para o topo de outra pilha.
- Nenhum disco pode ser colocado no topo de um disco menor.
Aqui está uma animação mostrando como um jogador pode completar o quebra-cabeças com 4 discos.
Se quiser aprender mais sobre o jogo, você pode ler seu artigo na Wikipédia.
Vocês trabalharão em duplas para criar uma versão JavaScript de uma Torre de Hanoi.
O envio deve ser o trabalho realizado por você e seu colega -* (não copiem a solução escrita por outra pessoa).*
Não será permitido o uso de LIVE SHARE ou qualquer outra extensão de live coding em equipe, ao invés disso, tente pôr em prática seu conhecimento de git usando branchs.
Aqui tem alguns sites de referência:
- Comandos básicos de git
- Resolver um conflito de merge usando a linha de comando
- Resolving Merge Conflicts from the GitLab UI
- Faça cada torre ser uma caixa flex que empilha elementos de baixo para cima usando as seguintes propriedades CSS:
{
display: flex;
flex-direction: column-reverse;
align-items: center;
}- Você precisa fazer o jogador clicar duas vezes para cada movimento: primeiro para selecionar a torre de origem, e depois para selecionar a torre de destino. Use uma variável para registrar qual modo o jogador está.
- Adicione um handler de clique em cada uma das três torres. Use event.currentTarget dentro do handler de evento para determinar qual torre foi clicada.
- Use a propriedade DOM childElementCount para saber quantos discos estão em uma torre.
- Use a propriedade DOM lastElementChild para saber qual é o disco no topo da torre.
- Use o método DOM appendChild() para adicionar um disco a uma torre (você já usou este método várias vezes em tarefas anteriores). Observe que quando você usa appendChild em um elemento que já tem um pai, ele é automaticamente removido do pai anterior e adicionado no novo.
- Use a propriedade Element.clientWidth para pegar o tamanho dos discos.
Lembrando que os itens abaixo são extras, ou seja, não são obrigatórios, mas adicionaria um toque mais elegante e divertido a sua aplicação, caso tenha tempo sobrando que tal adicionar algumas funções abaixo:
- Contador de movimentos: Crie um contador que demostras quantas vezes o jogador mudou o disco de torre
- Função Reset: Crie uma função (um botão na aplicação) que reseta todos os dados, ou seja, trazer todos os dados do jogo para o início. Lembrando que resetar os dados diferem de dar reload na página. Não use reload
- Mensagem de vitória: Crie uma função que quando um jogador ganhar apareça uma mensagem na tela demostrando quando completar o objetivo. Não usar Alert
- Níveis de dificuldade: Crie um seletor de dificuldade, do mais básico (3 discos) até onde preferir, aconselhamos até no máximo 5 discos.
Estilize tudo com o conceito escolhido pela dupla, mais que uma entrega, será um grande contato a conceitos novos que ambos tem sobre estilização
Faça o push do código para o seu repositório GitHub e implemente-o GitHub pages. No Canvas, por favor, envie sua url do GitHub Pages: (ex: https://nomedeusuario.github.io/tower-of-hanoi) e envie o link do seu repositório nos comentários. Após ser a correção, seu projeto deverá ficar privado.