Add all the files

kunjgit · Jun 13, 2024 · f3f3fd3 · f3f3fd3
1 parent a1593f4
commit f3f3fd3
Show file tree

Hide file tree

Showing 8 changed files with 260 additions and 0 deletions.
diff --git a/Games/Math_Race_Game/README.md b/Games/Math_Race_Game/README.md
@@ -0,0 +1,23 @@
+# **Math Race Game** 
+
+---
+
+<br>
+
+## **Description 📃**
+- The game is between the player and the computer.
+- Player have to answer math related questions.
+- Each play consists of 10 questions.
+- If player answers wrong the playes' car will not move forward.
+- If player answers correctly, the playes' car moves forward.
+- For each question computer's car moves forward randomly.
+- After 10 question the game declares the winner based on the distance both cars moved.
+- Player can use replay button to start a new game.
+
+<br>
+
+## **Screenshots 📸**
+
+<br><img src="./images/image_01.png" alt="Image Description">
+<br>
+<img src="./images/image_02.png" alt="Image Description">
diff --git a/Games/Math_Race_Game/images/computer.png b/Games/Math_Race_Game/images/computer.png
diff --git a/Games/Math_Race_Game/images/image_01.png b/Games/Math_Race_Game/images/image_01.png
diff --git a/Games/Math_Race_Game/images/image_02.png b/Games/Math_Race_Game/images/image_02.png
diff --git a/Games/Math_Race_Game/images/player.png b/Games/Math_Race_Game/images/player.png
diff --git a/Games/Math_Race_Game/index.html b/Games/Math_Race_Game/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">
+    <title>Math Race Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <div class="game-container">
+        <h1>Math Race Game</h1>
+        <div class="info">
+            <div class="row"><img src="./images/player.png" alt="" height="25px" width="35px"> - You</div>
+            <div class="row"><img src="./images/computer.png" alt="" height="25px" width="35px"> - Computer</div>
+        </div>
+        <div class="race-track">
+            <div id="player" class="character"><img src="./images/player.png" alt="" height="35px" width="45px"></div>
+            <div id="computer" class="character"><img src="./images/computer.png" alt="" height="35px" width="45px">
+            </div>
+        </div>
+
+        <div id="question"></div>
+        <input type="number" id="answer" placeholder="Your answer">
+        <button onclick="checkAnswer()" id="submit">Submit</button>
+        <div id="result"></div>
+        <div id="final-result" style="display: none;"></div>
+        <button id="replay-button" onclick="resetGame()" style="display: none;">Replay</button>
+
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/Games/Math_Race_Game/script.js b/Games/Math_Race_Game/script.js
@@ -0,0 +1,84 @@
+// script.js
+let playerPosition = 0;
+let computerPosition = 0;
+let num1, num2, operation, correctAnswer;
+let questionCount = 0;
+const totalQuestions = 10;
+const operations = ['+', '-', '*', '/']
+
+function generateQuestion() {
+    if (questionCount < totalQuestions) {
+        num1 = Math.floor(Math.random() * 10) + 1;
+        num2 = Math.floor(Math.random() * 10) + 1;
+        operation = operations[parseInt(Math.random() * 100 % 4)]
+        console.log(parseInt(Math.random()*100%4))
+        correctAnswer = parseInt(eval(`${num1} ${operation} ${num2}`));
+        document.getElementById('question').innerText = `${questionCount + 1}. What is ${num1} ${operation} ${num2}?`;
+    } else {
+        endGame();
+    }
+}
+
+function checkAnswer() {
+    const userAnswer = parseInt(document.getElementById('answer').value);
+    if (userAnswer === correctAnswer) {
+        playerPosition += 10;
+        if (Math.random() > 0.2) {
+            computerPosition += 10;
+        }
+        document.getElementById('result').innerText = 'Correct!';
+        document.getElementById('result').style.color = 'green';
+    } else {
+        computerPosition+=10;
+        document.getElementById('result').innerText = 'Incorrect. Try again!';
+        document.getElementById('result').style.color = 'red';
+    }
+    moveCharacter('player', playerPosition);
+    moveCharacter('computer', computerPosition);
+    document.getElementById('answer').value = '';
+    questionCount++;
+    generateQuestion();
+}
+
+function moveCharacter(character, position) {
+    document.getElementById(character).style.bottom = position + 'px';
+}
+
+function checkWinner() {
+    if (playerPosition > computerPosition) {
+        return `You wins! You win by ${playerPosition-computerPosition} points.`;
+    } else if (computerPosition > playerPosition) {
+        return `Computer wins! You loss by ${computerPosition-playerPosition} points.`;
+    } else {
+        return "It's a tie!";
+    }
+}
+
+function endGame() {
+    document.getElementById('question').style.display = 'none';
+    document.getElementById('answer').style.display = 'none';
+    document.getElementById('result').style.display = 'none';
+    document.getElementById('replay-button').style.display = 'block';
+    document.getElementById('final-result').innerText = checkWinner();
+    document.getElementById('final-result').style.display = 'block';
+    document.getElementById('submit').style.display = 'none';
+}
+
+function resetGame() {
+    playerPosition = 0;
+    computerPosition = 0;
+    questionCount = 0;
+    moveCharacter('player', playerPosition);
+    moveCharacter('computer', computerPosition);
+    document.getElementById('question').style.display = 'block';
+    document.getElementById('answer').style.display = 'block';
+    document.getElementById('result').style.display = 'block';
+    document.getElementById('result').textContent = '';
+    document.getElementById('replay-button').style.display = 'none';
+    document.getElementById('final-result').style.display = 'none';
+    document.getElementById('submit').style.display = 'block';
+    generateQuestion();
+}
+
+// Initialize the game
+generateQuestion();
diff --git a/Games/Math_Race_Game/styles.css b/Games/Math_Race_Game/styles.css
@@ -0,0 +1,117 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    outline: none;
+    font-family:Verdana, Geneva, Tahoma, sans-serif;
+}
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #ed7373;
+}
+.game-container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    width: 100%;
+    max-width: 400px;
+}
+h1{
+    margin-bottom: 20px;
+    color: #ed7373;
+}
+
+.race-track {
+    position: relative;
+    width: 100%;
+    height: 200px;
+    background-color: #ffe8e8;
+    margin-bottom: 20px;
+    border: 2px solid #ed7373;
+}
+.race-track:after {
+    position: absolute;
+    content: "";
+    width: 1.8px;
+    height: 100%;
+    bottom: 0;
+    left: 50%;
+    background-color: #ed7373;
+}
+
+.character {
+    position: absolute;
+    bottom: 0;
+    font-size: 2em;
+    transition: 0.3s;
+}
+
+#player {
+    left: 20%;
+}
+
+#computer {
+    right: 20%;
+}
+
+#question {
+    font-size: 24px;
+    margin-bottom: 10px;
+}
+
+#answer {
+    padding: 10px;
+    font-size: 16px;
+    margin: 15px 0;
+    width: 100%;
+    display: block;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    width: 100%;
+    display: block;
+    background-color: #ed7373;
+    border: none;
+    color: white;
+    border-radius: 4px;
+}
+button:hover {
+    background-color: #ff5656;
+}
+
+#result {
+    margin-top: 10px;
+    font-size: 18px;
+}
+
+#final-result {
+    margin-top: 20px;
+    font-size: 24px;
+    font-weight: bold;
+}
+
+#replay-button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+.info {
+    display: flex;
+    margin-bottom: 15px;
+    justify-content: center;
+    gap: 15px;
+}
+.row {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+}