Até agora, os elementos arrastáveis aparecem sempre na mesma ordem. Vamos alterar isso através de um sistema de shuffle automático, que reorganiza os elementos de forma aleatória sempre que o jogo começa.

Embaralhar elementos (Shuffle)

HTML:

Função para embaralhar:

No document.ready():

Sempre que o jogo começar, os elementos aparecem numa ordem diferente.

Criar Níveis de Dificuldade

Podemos controlar a dificuldade através de:

• Redução do tempo

• Aumento do número de elementos

• Maior complexidade das associações

Exemplo simples com tempo variável:

Isto permite controlar a dificuldade apenas alterando o valor da variável nivel.

Botão para mudar de nível

HTML:

jQuery:

Numa versão mais avançada, poderíamos evitar o reload e apenas reiniciar variáveis internas.

Desafio adicional — Embaralhar posições no ecrã

Se os itens estiverem com position: absolute, podemos alterar a posição inicial aleatoriamente:

Agora o jogo já não depende apenas da ordem, mas também da posição visual.

Exemplo estruturado (início do jogo)

Exercício 1 — Shuffle funcional

Adiciona ao jogo:

• Embaralhamento automático

• Verifica se a ordem muda sempre que a página é recarregada

Exercício 2 — Sistema de níveis

Cria três níveis:

• Fácil (mais tempo)

• Médio (tempo intermédio)

• Difícil (menos tempo)

Testa o comportamento do temporizador em cada nível.