DS & II

🎮 P05: Quiz Gamer: O Teste de Conhecimento

Leitura de 3 min

🎮 P05: Quiz Gamer: O Teste de Conhecimento

Agora você vai criar um app interativo! O objetivo é um Quiz de 5 perguntas sobre o mundo dos games. Você aprenderá como o app “se lembra” da pontuação e como mudar de tela quando o jogo acabar.

🎯 Objetivo do Projeto

Criar um jogo de perguntas e respostas. Se o jogador acertar, ganha pontos; se errar, perde vida. No final, o app deve mostrar uma tela de “Vitória” ou “Game Over” baseada na pontuação.

📖 Dicionário do Projeto

  • State (Estado): É a “memória” do app. Usamos remember { mutableStateOf(0) } para o app não esquecer a pontuação quando a tela for atualizada.

  • Navigation: É o sistema de trilhos que leva o jogador da “Tela de Pergunta” para a “Tela de Resultado”.

  • Recomposition: É o nome chique para quando a tela “pisca” e se atualiza sozinha porque um valor (como a pontuação) mudou.

🏗️ Passo a Passo (Wizard do Android Studio)

  1. Template: Empty Compose Activity.

  2. Name: AppQuizGamer_SeuNome.

  3. Package Name: br.com.curso.quizgamer.

🎨 Parte 1: Gerenciando o Jogo (Estado)

No Compose, para o número na tela mudar quando você clica em um botão, você deve usar o Estado Reativo.

 
// 1. Criando o estado
 
var pontuacao by remember { mutableStateOf(0) }
 
var perguntaAtual by remember { mutableStateOf(0) }
 
// 2. Usando na tela
 
Text(text = "Pontuação: $pontuacao")
 
// 3. Mudando o valor
 
Button(onClick = { pontuacao += 10 }) {
 
    Text("Acertar Resposta")
 
}

⚙️ Parte 2: A Navegação por Estado

Em apps simples, não precisamos de um sistema de rotas complexo. Podemos usar uma variável de estado para controlar qual tela mostrar!

var telaAtual by remember { mutableStateOf("quiz") }
 
when (telaAtual) {
    "quiz" -> TelaDeQuiz(onFinish = { telaAtual = "resultado" })
    "resultado" -> TelaDeResultado()
}

✅ Gabarito Comentado (Lógica do Quiz)

@Composable
fun QuizGame() {
    val perguntas = listOf(
        "Qual o nome do protagonista de Zelda?",
        "Qual console foi lançado em 1994?"
    )
    var indice by remember { mutableStateOf(0) }
    var telaAtual by remember { mutableStateOf("quiz") }
 
    if (telaAtual == "quiz") {
        Column {
            Text(text = "Pergunta ${indice + 1}: ${perguntas[indice]}")
            
            Button(onClick = {
                if (indice < perguntas.size - 1) {
                    indice++
                } else {
                    telaAtual = "resultado"
                }
            }) {
                Text("Próxima Pergunta")
            }
        }
    } else {
        // Tela de Resultado
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            Text("🏆 PARABÉNS!", fontSize = 24.sp, fontWeight = FontWeight.Bold)
            Text("Você concluiu o quiz!")
        }
    }
}

📂 Organização de Pastas

br.com.curso.quizgamer.ui.screens → QuizScreen.kt, ResultScreen.kt.

br.com.curso.quizgamer.navigation → AppNavigation.kt.

📐 Desenho no Draw.io

Desenhe o fluxo das perguntas:

Pergunta 1 -> Acertou? -> Próxima -> Fim da Lista? -> Tela de Vitória.

??? Requisitos de Configuração e Solução de Problemas

Se você encontrar erros ao tentar rodar este projeto, verifique os pontos abaixo:

1. Sintaxe do XML (Para projetos com XML)

No Android, dimensões não aceitam pontos decimais.

  • ? Errado: android:padding=“16.dp”

  • ? Correto: android:padding=“16dp”

2. Suporte ao AndroidX

O arquivo gradle.properties na raiz do projeto deve conter:

android.useAndroidX=true

android.enableJetifier=true

3. Estrutura de Pastas

O código fonte deve estar dentro de um módulo chamado app:

NomeDoProjeto/app/src/main/…

4. Recursos Obrigatórios

Certifique-se de ter os arquivos em res/values: colors.xml, strings.xml, themes.xml.

5. Configuração do Gradle

O arquivo settings.gradle na raiz deve conter include ‘:app’.

Visão de gráfico