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

No:2557

6691

←

Prev Next

→

Math games
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time unknown sec｜Game capacity 5.722KB｜

Script

em HTML usando JavaScript

Jogos de Matemática

Pontuação: 0

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

em HTML usando JavaScript

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Jogos de Matemática</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      font-size: 18px;
      margin: 0;
      padding: 0;
    }

h1 {
      text-align: center;
      font-size: 36px;
      margin: 20px 0;
    }

.game-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }

.score {
      text-align: center;
      margin-bottom: 20px;
    }

.question-container {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
    }

.question {
      font-size: 48px;
      margin: 0 10px;
    }

.answer-container {
      display: flex;
      justify-content: space-around;
    }

.answer {
      font-size: 36px;
      margin: 0 10px;
      padding: 10px;
      border: none;
      border-radius: 10px;
      background-color: #eee;
      cursor: pointer;
    }

.answer:hover {
      background-color: #ddd;
    }

.correct-answer {
      background-color: #5cb85c;
      color: #fff;
    }

.wrong-answer {
      background-color: #d9534f;
      color: #fff;
    }

.game-over {
      font-size: 24px;
      text-align: center;
      margin-bottom: 20px;
    }

.restart {
      font-size: 36px;
      padding: 10px;
      border: none;
      border-radius: 10px;
      background-color: #5cb85c;
      color: #fff;
      cursor: pointer;
    }

.restart:hover {
      background-color: #4cae4c;
    }
  </style>
</head>

<body>
  <h1>Jogos de Matemática</h1>

<div class="game-container">
    <div class="score">Pontuação: <span id="score">0</span></div>
    <div class="question-container">
      <div class="question" id="question"></div>
    </div>
    <div class="answer-container">
      <button class="answer" id="answer1"></button>
      <button class="answer" id="answer2"></button>
      <button class="answer" id="answer3"></button>
      <button class="answer" id="answer4"></button>
    </div>
    <div class="game-over" id="gameOver"></div>
    <button class="restart" id="restart">Reiniciar</button>
  </div>

let currentQuestionIndex = 0;
    let score = 0;
    let gameStarted = false;

const questionElement = document.getElementById('question');
    const answerElements = document.querySelectorAll('.answer');
    const scoreElement = document.getElementById('score');
    const gameOverElement = document.getElementById('gameOver');
    const restartElement = document.getElementById('restart');

answerElements.forEach(answerElement => {
      answerElement.addEventListener('click', () => {
        if (gameStarted) {
          const selectedAnswer = answerElement.textContent;
          const correctAnswer = questions[currentQuestionIndex].ca;

if (selectedAnswer === correctAnswer) {
            answerElement.classList.add('correct-answer');
            score++;
          } else {
            answerElement.classList.add('wrong-answer');
          }

answerElements.forEach(a => {
            if (a.textContent === correctAnswer) {
              a.classList.add('correct-answer');
            }
          });

currentQuestionIndex++;

if (currentQuestionIndex < questions.length) {
            setTimeout(() => {
              setQuestion();
            }, 1000);
          } else {
            gameOver();
          }
        }
      });
    });

restartElement.addEventListener('click', () => {
      restart();
    });

function setQuestion() {
      answerElements.forEach(answerElement => {
        answerElement.classList.remove('correct-answer', 'wrong-answer');
      });

const question = questions[currentQuestionIndex];
      questionElement.textContent = question.q;

const answers = shuffle(question.a);
      answerElements.forEach((answerElement, i) => {
        answerElement.textContent = answers[i];
      });

scoreElement.textContent = score;
    }

function shuffle(array) {
      let currentIndex = array.length;
      let temporaryValue, randomIndex;

while (currentIndex !== 0) {
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;
        temporaryValue = array[currentIndex];
        array[currentIndex] = array[randomIndex];
        array[randomIndex] = temporaryValue;
      }

return array;
    }

function gameOver() {
      gameStarted = false;
      gameOverElement.textContent = `Fim de jogo! Sua pontuação final é ${score}.`;
      restartElement.style.display = 'block';
    }

function restart() {
      currentQuestionIndex = 0;
      score = 0;
      gameStarted = true;

gameOverElement.textContent = '';
      restartElement.style.display = 'none';

setQuestion();
    }

restart();
  </script>
</body>

</html>