Até agora já temos:
Elementos arrastáveis
Zonas de destino com validação
Rejeição automática
Pontuação
Agora vamos acrescentar três componentes fundamentais:
Sistema de fim de jogo
Botão de reset
Temporizador opcional
Verificar quando o jogo termina
Precisamos de saber quando todas as respostas corretas foram colocadas.
No evento drop:
HTML:
Criar botão de Reset
HTML:
jQuery:
Esta é a forma mais simples de reiniciar o jogo.
Se quisermos algo mais avançado (sem recarregar a página), podemos:
Reposicionar os elementos
Reativar draggable e droppable
Resetar pontuação
Mas para já, o reload é uma solução clara e funcional.
Adicionar Temporizador
HTML:
JavaScript:
Agora o jogo tem limite de tempo.
Exemplo Estruturado Completo
Exercício 1 — Jogo completo
Cria um jogo que inclua:
Pelo menos 4 elementos arrastáveis
4 zonas corretas
Pontuação
Temporizador
Mensagem final
Exercício 2 — Melhorias pessoais
Adiciona pelo menos uma melhoria, por exemplo:
Efeito visual ao acertar
Som ao errar
Mudança de nível
Mensagem diferente conforme a pontuação
