Added Gamified Calculator (#1230)

Rakesh9100 · Jun 11, 2024 · 9297f14 · 9297f14
1 parent f601e93
commit 9297f14
Show file tree

Hide file tree

Showing 7 changed files with 278 additions and 0 deletions.
diff --git a/Calculators/Gamified-Calculator/README.md b/Calculators/Gamified-Calculator/README.md
@@ -0,0 +1,36 @@
+# <p align="center">Gamified Calculator</p>
+
+## Description :-
+
+This calculator turns math problems into a game, rewarding correct answers with points or achievements and providing hints or challenges for incorrect answers. It makes learning and practicing math more engaging and fun.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Features :-
+
+- Dynamic expression input field using a `textarea`.
+- Real-time calculation and feedback.
+- Points and level system.
+- Timer to add a sense of urgency.
+- Lives system to increase difficulty.
+- Achievements for reaching milestones.
+- Leaderboard to track high scores.
+- Sound effects for correct and incorrect answers.
+
+## Usage :-
+
+1. Enter your mathematical expression in the provided `textarea`.
+2. Click the "Calculate" button to see the result.
+3. Earn points for correct answers and level up as you progress.
+4. Lose lives for incorrect answers but get helpful hints.
+5. Keep an eye on the timer to manage your time efficiently.
+6. Track your progress and achievements.
+7. Compare your scores on the leaderboard.
+
+## Screenshots :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/c62e357a-7601-4d83-b79b-75add9473afd)
diff --git a/Calculators/Gamified-Calculator/assets/correct.mp3 b/Calculators/Gamified-Calculator/assets/correct.mp3
diff --git a/Calculators/Gamified-Calculator/assets/incorrect.mp3 b/Calculators/Gamified-Calculator/assets/incorrect.mp3
diff --git a/Calculators/Gamified-Calculator/index.html b/Calculators/Gamified-Calculator/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Gamified Calculator</title>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Gamified Calculator</h1>
+        <div class="calculator">
+            <textarea id="expression" rows="2" placeholder="Enter calculation"></textarea>
+            <button id="calculate">Calculate</button>
+        </div>
+        <div class="game-info">
+            <p id="message"></p>
+            <p id="level">Level: 1</p>
+            <p id="timer">Time: 10</p>
+            <p id="points">Points: 0</p>
+            <p id="lives">Lives: 3</p>
+            <p id="achievements"></p>
+        </div>
+        <div class="leaderboard">
+            <h2>Leaderboard</h2>
+            <ol id="leaderboard-list"></ol>
+        </div>
+    </div>
+    <audio id="correct-sound" src="assets/correct.mp3"></audio>
+    <audio id="incorrect-sound" src="assets/incorrect.mp3"></audio>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Calculators/Gamified-Calculator/script.js b/Calculators/Gamified-Calculator/script.js
@@ -0,0 +1,120 @@
+let points = 0;
+let lives = 3;
+let level = 1;
+let timer;
+let timeLeft = 10;
+let achievements = [];
+
+document.getElementById('calculate').addEventListener('click', () => {
+    const expression = document.getElementById('expression').value;
+    console.log(expression);
+    if (expression) {
+        console.log("not empty");
+        try {
+            const result = eval(expression);
+            document.getElementById('message').textContent = `Correct! The result is ${result}.`;
+            points += 10 * level;
+            playSound('correct');
+            levelUp();
+        } catch (error) {
+            document.getElementById('message').textContent = 'Incorrect! Try again.';
+            playSound('incorrect');
+            lives--;
+            document.getElementById('lives').textContent = `Lives: ${lives}`;
+            if (lives === 0) {
+                gameOver();
+            } else {
+                document.getElementById('message').textContent += ' Hint: Check your operators and parentheses.';
+            }
+        }
+        updateGameInfo();
+    }
+    else {
+        alert("Expression can not be empty!");
+        window.location.reload();
+    }
+});
+
+function updateGameInfo() {
+    document.getElementById('points').textContent = `Points: ${points}`;
+    document.getElementById('level').textContent = `Level: ${level}`;
+    document.getElementById('timer').textContent = `Time: ${timeLeft}`;
+    checkAchievements();
+}
+
+function levelUp() {
+    level++;
+    timeLeft += 1; // Add extra time for each level up
+    clearInterval(timer);
+    startTimer();
+}
+
+function startTimer() {
+    timer = setInterval(() => {
+        timeLeft--;
+        document.getElementById('timer').textContent = `Time: ${timeLeft}`;
+        if (timeLeft <= 0) {
+            clearInterval(timer);
+            gameOver();
+        }
+    }, 1000);
+}
+
+function gameOver() {
+    clearInterval(timer);
+    document.getElementById('message').textContent = 'Game Over! Try again.';
+    saveScore();
+    resetGame();
+}
+
+function resetGame() {
+    console.log(lives);
+    points = 0;
+    lives--;
+    if (lives == 0) {
+        points = 0;
+        lives = 3;
+        level = 1;
+        timeLeft = 10;
+        updateGameInfo();
+    }
+    level = 1;
+    timeLeft = 10;
+    updateGameInfo();
+}
+
+function saveScore() {
+    const leaderboard = document.getElementById('leaderboard-list');
+    const scoreItem = document.createElement('li');
+    scoreItem.textContent = `Score: ${points} (Level: ${level})`;
+    leaderboard.appendChild(scoreItem);
+}
+
+function checkAchievements() {
+    if (points >= 50 && !achievements.includes('First 50 Points')) {
+        achievements.push('First 50 Points');
+        document.getElementById('achievements').innerHTML += `<h2> Achievement unlocked </h2>: 
+        1 . First 50 Points! `;
+    }
+    if (points >= 100 && !achievements.includes('Congrats for 100 points')) {
+        achievements.push('Congrats for 100 points');
+        document.getElementById('achievements').innerHTML += `
+        <br>
+        2 . Congrats for 100 points
+        `;
+    }
+    if (points >= 200 && !achievements.includes('Math Master!')) {
+        achievements.push('Math Master!');
+        document.getElementById('achievements').innerHTML += `
+        <br>
+        3 . Math Master!
+        `;
+    }
+}
+
+function playSound(type) {
+    const sound = document.getElementById(`${type}-sound`);
+    sound.play();
+}
+
+startTimer();
diff --git a/Calculators/Gamified-Calculator/style.css b/Calculators/Gamified-Calculator/style.css
@@ -0,0 +1,72 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 20rem;
+}
+
+h1 {
+    margin-bottom: 20px;
+}
+
+.calculator {
+    margin-bottom: 20px;
+}
+
+input {
+    width: 200px;
+    padding: 10px;
+    margin-right: 10px;
+    overflow-x: auto;
+}
+
+textarea {
+    width: 100%;
+    max-width: 300px;
+    padding: 10px;
+    margin-bottom: 10px;
+    resize: none;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+button {
+    padding: 10px 20px;
+}
+
+.game-info {
+    margin-top: 20px;
+}
+
+#message {
+    margin-bottom: 10px;
+}
+
+.leaderboard {
+    margin-top: 30px;
+}
+
+#leaderboard-list {
+    list-style-type: none;
+    padding: 0;
+}
+
+#leaderboard-list li {
+    background-color: #ececec;
+    margin: 5px 0;
+    padding: 10px;
+    border-radius: 5px;
+}
diff --git a/index.html b/index.html
@@ -1338,6 +1338,20 @@ <h3>Calculates the Goods and Service tax of any product in rupees and dollars.</
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Gamified Calculator</h2>
+                <h3>Calculator that turns math problems into a game.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Gamified-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Gamified-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>General Root Calculator</h2>