Passo 2: Embaralhar e virar
Os símbolos entram em cena, sorteados a cada partida, e cada carta passa a responder ao clique virando-se.
Estudar esta lição interativa →Cada carta vira um objeto { id, valor, virada }: valor é o símbolo (uma fruta, aqui), e virada é um booleano que diz se ela está mostrando a frente ou o verso. O array simbolos tem cada fruta duas vezes (um par), e a função embaralhar() reorganiza essa ordem aleatoriamente antes de cada partida, com o algoritmo de Fisher-Yates: percorre a lista do fim para o começo e, em cada posição i, sorteia uma posição j entre 0 e i e troca as duas de lugar. Como a cada passo o sorteio considera exatamente as posições que ainda não foram fixadas, toda ordem possível tem a mesma chance de sair.
A função renderizar() reconstrói o tabuleiro inteiro a partir do array cartas, exatamente como você já fez no projeto da lista de compras: o array é a verdade, a tela é só o reflexo dele. Clicar numa carta só alterna carta.virada e chama renderizar() de novo.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Clique nas cartas para virá-las. Ainda não há regra de comparação de par.
Você vai encontrar, em muito código e tutorial, lista.sort(() => Math.random() - 0.5) como "jeito rápido de embaralhar". Parece justo, mas não é: o sort espera uma regra de comparação consistente, e um número aleatório a cada comparação não é uma regra. Medido com 8 itens, o primeiro elemento fica na própria posição em cerca de 22% das vezes, quando um embaralhamento justo daria 12,5% (1 em 8). Para um jogo casual passaria, mas é o tipo de atalho que vira bug de verdade em sorteios e rifas. Use Fisher-Yates.
Fisher-Yates é como embaralhar um baralho físico de trás para frente: você pega a última carta e a troca com uma carta sorteada de qualquer lugar do baralho (inclusive ela mesma), depois repete com a penúltima, e assim por diante. Ao chegar na primeira, o baralho está justamente embaralhado.