Como criar um jogo (estilo quiz) para aparelhos móveis

Boa noite, gostaria de desenvolver um projeto de inovação na faculdade criando um jogo (estilo quiz) relacionado a agronomia. Seu funcionamento seria bastante simples. Na interface primeira do jogo seria escolhido qual quiz você gostaria de jogar.

Durante o quiz, essa seria a apresentação do jogo.

Perdão pelo péssimo croqui, fiz no celular :sweat_smile:

Não é pra ser algo muito complexo nem elaborado. E eu estou precisando do “roadmap” de onde começar pra chegar a um jogo nesse estilo.

3 curtidas

Primeiro de tudo você tem que conhecer uma linguagem de programação que tenha suporte para desenvolvimento mobile, exemplos:

  • C# (.NET MAUI);
  • Dart (Flutter);
  • JavaScript (React Native);
  • Java/Kotlin (nativo para Android);
  • Swift (nativo para IOS);
1 curtida

Acho que minha principal dúvida era essa, eu fiquei em dúvida se qualquer linguagem atenderia a meu problema, se alguma em específico era reclmendada ou até mesmo se um godot, construtor 2, android Studio poderia facilitar o processo.

tem vários sites que criar quiz, só pesquisa: site para criar quiz

Eu recomendo React Native em conjunção com o Vercel,mas no caso,o desenvolvimento tem de ser feito via notebook e com celular, é a minha prática pessoal.

Esse mini projeto abaixo,eu tenho guardado a meses,em HTML CSS e Javascript,para transformar o código para a sintaxe do React Native.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Game</title>
    <style>
        body {
            background-color: black;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .quiz-container {
            background-color: #333;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            width: 90%;
            max-width: 600px;
        }
        .quiz-question {
            font-size: 1.5em;
            margin-bottom: 20px;
            color: #a39ad7;
        }
        .quiz-options button {
            background-color: #a39ad7;
            color: black;
            border: none;
            padding: 10px 20px;
            margin: 10px 0;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            width: 100%;
            max-width: 200px;
        }
        .quiz-options button:hover {
            background-color: #8e85b4;
        }
        #result-message {
            color: #a39ad7;
            margin-bottom: 20px;
            font-size: 1.5em;
        }
        #result button {
            background-color: #a39ad7;
            color: black;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
        }
        #result button:hover {
            background-color: #8e85b4;
        }
    </style>
</head>
<body>
    <div class="quiz-container">
        <div id="quiz">
            <div class="quiz-question" id="question">Question text</div>
            <div class="quiz-options">
                <button onclick="selectOption(0)">Option 1</button>
                <button onclick="selectOption(1)">Option 2</button>
                <button onclick="selectOption(2)">Option 3</button>
                <button onclick="selectOption(3)">Option 4</button>
            </div>
        </div>
        <div id="result" style="display: none;">
            <div id="result-message">You scored X out of Y!</div>
            <button onclick="restartQuiz()">Restart Quiz</button>
        </div>
    </div>

    <script>
        const questions = [
            {
                question: "What is the capital of France?",
                options: ["Berlin", "Madrid", "Paris", "Lisbon"],
                answer: 2
            },
            {
                question: "Who wrote 'To Kill a Mockingbird'?",
                options: ["Harper Lee", "Mark Twain", "J.K. Rowling", "Ernest Hemingway"],
                answer: 0
            },
            {
                question: "What is the largest planet in our solar system?",
                options: ["Earth", "Mars", "Jupiter", "Saturn"],
                answer: 2
            }
        ];

        let currentQuestionIndex = 0;
        let score = 0;

        function loadQuestion() {
            const currentQuestion = questions[currentQuestionIndex];
            document.getElementById('question').textContent = currentQuestion.question;
            const options = document.querySelectorAll('.quiz-options button');
            options.forEach((button, index) => {
                button.textContent = currentQuestion.options[index];
            });
        }

        function selectOption(selectedIndex) {
            const currentQuestion = questions[currentQuestionIndex];
            if (selectedIndex === currentQuestion.answer) {
                score++;
            }
            currentQuestionIndex++;
            if (currentQuestionIndex < questions.length) {
                loadQuestion();
            } else {
                showResult();
            }
        }

        function showResult() {
            document.getElementById('quiz').style.display = 'none';
            document.getElementById('result').style.display = 'block';
            document.getElementById('result-message').textContent = `You scored ${score} out of ${questions.length}!`;
        }

        function restartQuiz() {
            currentQuestionIndex = 0;
            score = 0;
            document.getElementById('quiz').style.display = 'block';
            document.getElementById('result').style.display = 'none';
            loadQuestion();
        }

        loadQuestion();
    </script>
</body>
</html>

Se quiser @RamonVSBR , veja este modelo em uma IDE em seu celular, coloquei tudo em um só corpo HTML para facilitar para você,com uso de div nesse projeto, caso queira adicionar fotos, fica a seu critério,se quiser, claro.

Como Javascript foi minha primeira linguagem de desenvolvimento que aprendi,eu recomendo React Native com a plataforma Vercel para a finalização total do seu app.

É só uma sujestão a mais.:crossed_fingers::bulb::coffee:

1 curtida

Parabéns pela ideia do seu projeto de faculdade!

Ao desenvolver um projeto de tecnologia para usuários gerais, alguns problemas comuns surgem:

  • Será necessário que seu público instale o projeto? Se não, considerar um site ou webapp é uma boa opção.
  • Seu público tem interesse em jogos? Se sim, é importante determinar se preferem jogos em modo horizontal ou vertical, pois isso influencia na mecânica básica e na narrativa.
  • Sua equipe possui o conhecimento técnico necessário? Desenvolver um site requer habilidades de front-end e back-end, enquanto jogos exigem programadores, designers gráficos e de som.

Após coletar essas informações, você pode escolher o segmento adequado, ferramentas e métodos de produção.

Recomendo considerar o Godot e sua linguagem de programação própria. Com mudanças no mercado impulsionadas pela Unity Game Engine, o Godot tem se destacado por sua semelhança com Python e interface intuitiva.

Caso opte por criar um site, você pode usar o Wix ou programar do zero com o framework Angular. Desenvolver um site demanda um nível de conhecimento mais avançado em comparação à criação de jogos.

1 curtida

É, tem esse lance também,@Saulo_Ferro_Maciel,se colocou bem nas observações, você.

1 curtida

Tem o AppInventor tem algumas demos e tutoriais sobre, faz exatamente o mesmo que sua sketch, vale apena dar uma olhada