MathGame/script.js at main · Natithorn/MathGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
const questionElement = document.querySelector('.question');
const optionsElement = document.querySelector('.options');
const timerElement = document.getElementById('time');
const startButton = document.getElementById('start-button');
let timeLeft = 30;
let interval;

function startGame() {
  generateQuestion();
  interval = setInterval(() => {
    timeLeft--;
    timerElement.textContent = timeLeft;
    if (timeLeft <= 0) {
      clearInterval(interval);
      showGameOverPopup();
    }
  }, 1000);
}

function resetGame() {
  timeLeft = 30;
  timerElement.textContent = timeLeft;
  startButton.disabled = false;
  clearInterval(interval);
  optionsElement.innerHTML = '';
  questionElement.textContent = '';
}

function generateQuestion() {
  const num1 = Math.floor(Math.random() * 10) + 1;
  const num2 = Math.floor(Math.random() * 10) + 1;
  const operators = ['+', '-', '*', '/'];
  const operator = operators[Math.floor(Math.random() * operators.length)];
  let correctAnswer;
  switch (operator) {
    case '+':
      correctAnswer = num1 + num2;
      break;
    case '-':
      correctAnswer = num1 - num2;
      break;
    case '*':
      correctAnswer = num1 * num2;
      break;
    case '/':
      correctAnswer = parseFloat((num1 / num2).toFixed(2));
      break;
  }
  questionElement.textContent = `${num1} ${operator} ${num2} = ?`;
  const answers = [correctAnswer];
  while (answers.length < 4) {
    const wrongAnswer = Math.floor(Math.random() * 100) - 50;
    if (!answers.includes(wrongAnswer)) {
      answers.push(wrongAnswer);
    }
  }
  answers.sort(() => Math.random() - 0.5);
  optionsElement.innerHTML = '';
  answers.forEach(answer => {
    const button = document.createElement('button');
    button.textContent = answer;
    button.classList.add('option');
    button.addEventListener('click', () => checkAnswer(answer, correctAnswer));
    optionsElement.appendChild(button);
  });
}

function checkAnswer(selected, correct) {
  const buttons = document.querySelectorAll('.option');
  buttons.forEach(button => {
    if (parseFloat(button.textContent) === correct) {
      button.style.backgroundColor = 'green';
    } else if (parseFloat(button.textContent) === selected) {
      button.style.backgroundColor = 'red';
    }
    button.disabled = true;
  });
  setTimeout(() => {
    buttons.forEach(button => {
      button.style.backgroundColor = '';
      button.disabled = false;
    });
    if (selected === correct) {
      timeLeft += 5;
    } else {
      timeLeft -= 5;
    }
    timerElement.textContent = timeLeft;
    generateQuestion();
  }, 1000);
}

function showGameOverPopup() {
  const popup = document.createElement('div');
  popup.style.position = 'fixed';
  popup.style.top = '50%';
  popup.style.left = '50%';
  popup.style.transform = 'translate(-50%, -50%)';
  popup.style.padding = '20px';
  popup.style.backgroundColor = '#fff';
  popup.style.borderRadius = '10px';
  popup.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
  popup.style.textAlign = 'center';
  popup.innerHTML = `
    <img src="https://img.icons8.com/external-tulpahn-outline-color-tulpahn/64/external-game-over-video-game-tulpahn-outline-color-tulpahn.png" alt="Game Over Icon" style="margin-bottom: 10px;">
    <h2>Game Over</h2>
    <p>You ran out of time!</p>
    <button id="restart-button" style="display: flex; align-items: center; gap: 8px;">
      <img src="https://via.placeholder.com/20" alt="Restart Icon" style="width: 20px; height: 20px;">
      Restart Game
    </button>`;
  document.body.appendChild(popup);
  const restartButton = document.getElementById('restart-button');
  restartButton.addEventListener('click', () => {
    popup.remove();
    resetGame();
  });
}

startButton.addEventListener('click', () => {
  startButton.disabled = true;
  startGame();
});