Até agora já tens um jogo completo com:

• Drag & Drop validado

• Pontuação

• Temporizador

• Reset

• Shuffle

• Níveis

Agora vamos trabalhar os detalhes que fazem a diferença.

Melhorar o feedback visual com animações

O jQuery UI permite aplicar efeitos adicionais.

Exemplo ao acertar:

Exemplo ao errar:

Estes pequenos efeitos reforçam a perceção de sucesso ou erro.

Adicionar sons ao jogo

Podemos usar áudio HTML simples.

HTML:

jQuery:

O acesso [0] é necessário porque jQuery devolve um objeto, e precisamos do elemento DOM real.

Destacar zonas quando um item é arrastado

Podemos usar a opção hoverClass do droppable():

CSS:

Agora, quando um item passa por cima da zona correta, esta reage visualmente.

Melhorar usabilidade com cursor e transições

CSS recomendado:

Pequenos detalhes como este aumentam a perceção de qualidade.

Ecrã de vitória personalizado

Em vez de apenas mostrar texto, podemos criar um painel final.

HTML:

jQuery:

Pequena melhoria avançada — impedir scroll acidental

Durante o arrasto, por vezes a página pode mover-se. Podemos limitar isso com CSS:

(Usar apenas se o layout permitir.)

Exemplo combinado de melhoria

Agora o jogo tem comportamento muito mais envolvente.

Exercício 1 — Melhorias visuais

Implementa no teu jogo:

• Efeito bounce ao acertar

• Efeito shake ao errar

• Classe hoverClass nas zonas

Exercício 2 — Experiência completa

Adiciona:

• Sons de acerto e erro

• Painel final animado

• Pelo menos uma melhoria estética (CSS)