Click here for free DL of the app version that can save data.

No:20879

←

Prev Next

→

Crie um jogo matemático
Developer User9013｜Date and time 23/10/11 20:20:22
Build time 96.661 sec｜Game capacity 3.749KB｜

Script

Jogo Matemático

Pontuação: 0

4 + 5

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jogo Matemático</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        h1 {
            margin-bottom: 20px;
        }
        
        #score {
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        #question {
            font-size: 48px;
            margin-bottom: 20px;
        }
        
        #options {
            display: flex;
            justify-content: center;
        }
        
        .option {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100px;
            height: 100px;
            margin: 0 10px;
            border: 2px solid black;
            font-size: 24px;
            cursor: pointer;
        }
        
        .option:hover {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <h1>Jogo Matemático</h1>
    <div id="score">Pontuação: 0</div>
    <div id="question">4 + 5</div>
    <div id="options">
        <div class="option">8</div>
        <div class="option">9</div>
        <div class="option">10</div>
    </div>
    
    <script>
        var score = 0;
        var questionIndex = 0;
        var questions = [
            {
                question: "4 + 5",
                correctAnswer: 9
            },
            {
                question: "6 - 3",
                correctAnswer: 3
            },
            {
                question: "2 * 4",
                correctAnswer: 8
            },
            {
                question: "10 / 2",
                correctAnswer: 5
            }
        ];
        
        var options = document.getElementsByClassName("option");
        
        function startGame() {
            updateScore();
            displayQuestion();
            addClickListeners();
        }
        
        function updateScore() {
            document.getElementById("score").textContent = "Pontuação: " + score;
        }
        
        function displayQuestion() {
            document.getElementById("question").textContent = questions[questionIndex].question;
        }
        
        function addClickListeners() {
            for (var i = 0; i < options.length; i++) {
                options[i].addEventListener("click", checkAnswer);
            }
        }
        
        function removeClickListeners() {
            for (var i = 0; i < options.length; i++) {
                options[i].removeEventListener("click", checkAnswer);
            }
        }
        
        function checkAnswer(event) {
            var selectedOption = event.target;
            var selectedAnswer = parseInt(selectedOption.textContent);
            
            if (selectedAnswer === questions[questionIndex].correctAnswer) {
                score++;
                updateScore();
                selectedOption.style.backgroundColor = "green";
            } else {
                selectedOption.style.backgroundColor = "red";
            }
            
            removeClickListeners();
            setTimeout(nextQuestion, 1000);
        }
        
        function nextQuestion() {
            questionIndex++;
            
            if (questionIndex >= questions.length) {
                endGame();
            } else {
                displayQuestion();
                addClickListeners();
            }
        }
        
        function endGame() {
            document.getElementById("question").textContent = "Fim do jogo!";
            document.getElementById("options").style.display = "none";
        }
        
        startGame();
    </script>
</body>
</html>