-
Notifications
You must be signed in to change notification settings - Fork 0
/
MathGame.js
107 lines (93 loc) · 3.45 KB
/
MathGame.js
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
let operators = ["+", "-", "*"];
const startBtn = document.getElementById("start-btn");
const question = document.getElementById("question");
const controls = document.querySelector(".controls-container");
const result = document.getElementById("result");
const submitBtn = document.getElementById("submit-btn");
const errorMessage = document.getElementById("error-msg");
const img1 = document.getElementById("my-img1");
const img = document.getElementById("my-img");
let answerValue;
let operatorQuestion;
//Random Value Generator
const randomValue = (min, max) => Math.floor(Math.random() * (max - min)) + min;
const questionGenerator = () => {
//Two random values between 1 and 20
let [num1, num2] = [randomValue(1, 20), randomValue(1, 20)];
//For getting random operator
let randomOperator = operators[Math.floor(Math.random() * operators.length)];
if (randomOperator == "-" && num2 > num1) {
[num1, num2] = [num2, num1];
}
//Solve equation
let solution = eval(`${num1}${randomOperator}${num2}`);
//For placing the input at random position
//(1 for num1, 2 for num2, 3 for operator, anything else(4) for solution)
let randomVar = randomValue(1, 5);
if (randomVar == 1) {
answerValue = num1;
question.innerHTML = `<input type="number" id="inputValue" placeholder="?"\> ${randomOperator} ${num2} = ${solution}`;
} else if (randomVar == 2) {
answerValue = num2;
question.innerHTML = `${num1} ${randomOperator}<input type="number" id="inputValue" placeholder="?"\> = ${solution}`;
} else if (randomVar == 3) {
answerValue = randomOperator;
operatorQuestion = true;
question.innerHTML = `${num1} <input type="text" id="inputValue" placeholder="?"\> ${num2} = ${solution}`;
} else {
answerValue = solution;
question.innerHTML = `${num1} ${randomOperator} ${num2} = <input type="number" id="inputValue" placeholder="?"\>`;
}
//User Input Check
submitBtn.addEventListener("click", () => {
errorMessage.classList.add("hide");
let userInput = document.getElementById("inputValue").value;
//If user input is not empty
if (userInput) {
//If the user guessed correct answer
if (userInput == answerValue) {
stopGame(`Yippie!! <span>Correct</span> Answer`);
img.style.display="block";
img.play();
}
//If user inputs operator other than +,-,*
else if (operatorQuestion && !operators.includes(userInput)) {
errorMessage.classList.remove("hide");
errorMessage.innerHTML = "Please enter a valid operator";
}
//If user guessed wrong answer
else {
stopGame(`Opps!! <span>Wrong</span> Answer`);
img1.style.display="block";
img1.play();
}
}
//If user input is empty
else {
errorMessage.classList.remove("hide");
errorMessage.innerHTML = "Input Cannot Be Empty";
}
});
};
//Start Game
startBtn.addEventListener("click", () => {
operatorQuestion = false;
answerValue = "";
errorMessage.innerHTML = "";
errorMessage.classList.add("hide");
//Controls and buttons visibility
controls.classList.add("hide");
startBtn.classList.add("hide");
questionGenerator();
});
//Stop Game
const stopGame = (resultText) => {
result.innerHTML = resultText;
startBtn.innerText = "Restart";
controls.classList.remove("hide");
startBtn.classList.remove("hide");
startBtn.addEventListener("click",()=>{
img.style.display="none";
img1.style.display="none";
})
};