Merge branch 'main' into main

kunjgit · Aug 4, 2024 · 5f9ffd0 · 5f9ffd0
2 parents 56fb092 + 41d7292
commit 5f9ffd0
Show file tree

Hide file tree

Showing 45 changed files with 932 additions and 175 deletions.
diff --git a/Games/Balloon_Popup/Balloon_Popup.png b/Games/Balloon_Popup/Balloon_Popup.png
diff --git a/Games/Balloon_Popup/app.js b/Games/Balloon_Popup/app.js
@@ -4,7 +4,7 @@ document.addEventListener('mouseover', function(e){
 
     if (e.target.className === "balloon"){
 
-                e.target.style.backgroundColor = "#ededed";
+                e.target.style.backgroundColor = "rgb(227, 107, 163)";
                 e.target.textContent = "POP!";
                 popped++;
                 removeEvent(e);

diff --git a/Games/Balloon_Popup/ballon.png b/Games/Balloon_Popup/ballon.png
diff --git a/Games/Balloon_Popup/balloon_pop.png b/Games/Balloon_Popup/balloon_pop.png
diff --git a/Games/Balloon_Popup/index.html b/Games/Balloon_Popup/index.html
@@ -9,8 +9,8 @@
 </head>
 <body>
     <div class="wrapper">
-        <h1>Pop the balloons by moving</br>your mouse over them</h1>
-        <div id="yay-no-balloons"><span class="blue">Wow!</span> All balloons popped!</div>
+        <img src="pop.png"; style="height: 200px;width: 250px;background-color:rgb(227, 107, 163) ;margin-left: 220px;"><h1>Pop the balloons by moving<br> your mouse over the them !!  </h1>
+        <div id="yay-no-balloons"><img src="ballon.png"; style="height: 200px;width: 200px;"><span class="blue">!!Wow!!<img src="ballon.png"; style="height: 200px;width: 200px;"><br></span> All balloons popped!</div>
         <div id="balloon-gallery">
             <div class="balloon"></div>
             <div class="balloon"></div>
@@ -36,6 +36,7 @@ <h1>Pop the balloons by moving</br>your mouse over them</h1>
             <div class="balloon"></div>
             <div class="balloon"></div>
             <div class="balloon"></div>
+
         </div>
 
     </div>

diff --git a/Games/Balloon_Popup/pop.png b/Games/Balloon_Popup/pop.png
diff --git a/Games/Balloon_Popup/style.css b/Games/Balloon_Popup/style.css
@@ -1,26 +1,30 @@
 body{
     font-family:sans-serif;
-    padding: 30px;
-    background:#ededed;
+    padding: 50px;
+    background:rgb(227, 107, 163);
 }
 
 .wrapper{
-    max-width: 690px;
-    margin: 0 auto;
+    max-width: 800px;
+    margin-left: 180px;
 }
 
 .blue {
-    color:#3f7abe;
+    color:#b53811;
+    margin-left: 10px;
+   font-size: larger;
 }
 
 h1{
     margin: auto;
-    margin-top: 50px;
+    margin-top: 10px;
     margin-bottom: 50px;
-    color: #08a3d9;
+    margin-left: 120px;
     text-transform: uppercase;
     font-size: 30px;
-    color: #000380;
+    color: #050648;
+    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight:bolder;
 }
 
 #balloon-gallery div{
@@ -39,23 +43,23 @@ h1{
 }
 
 #balloon-gallery div:nth-child(3n){
-    background: #ffce00;
-    color: #ffce00;
+    background: #6c0c65;
+    color: #6c0c65;
 }
 
 #balloon-gallery div:nth-child(3n-1){
-    background:#3f7abe;
-    color:#3f7abe;
+    background:#059434;
+    color:#059434;
 }
 
 #balloon-gallery div:nth-child(5n){
-    background:#8e7a8e;
-    color:#8e7a8e;
+    background:#3d1ee8;
+    color: #3d1ee8;
 }
 
 #balloon-gallery div:nth-child(13){
-    background:#8e7a8e;
-    color:#8e7a8e;
+    background:#3d1ee8;
+    color: #3d1ee8;
 }
 
 #balloon-gallery div:nth-child(10n){
@@ -64,11 +68,13 @@ h1{
 }
 
 #balloon-gallery div:nth-child(4n){
+    background:#cdb010;
+    color: #cdb010;
     clear:right;
 }
 
 #yay-no-balloons {
     display:none;
-    color:#ff3300;
-    font-size:100px;
-}
+    color:#0f0f10;
+    font-size:80px;
+}
diff --git a/Games/Language_Learner_Adventure/README.md b/Games/Language_Learner_Adventure/README.md
@@ -0,0 +1,51 @@
+# ** Language Learner Adventure ** 
+
+
+<br>
+
+## **Description 📃**
+
+The goal of the game is to help players learn new vocabulary by matching words with their correct translations. Players answer multiple-choice questions and receive feedback on their answers. A scoring system tracks their progress.
+
+
+## **functionalities 🎮**
+
+- The game displays a word in the target language.
+- Players choose the correct translation from multiple options.
+- Feedback is given for each answer, indicating whether it was correct or incorrect.
+- The score increases with each correct answer.
+- The game continues until all questions have been answered.
+- The final score is displayed at the end.
+
+
+<br>
+
+## **How to play? 🕹️**
+
+- Initialization:
+    - Load the first question.
+    - Initialize the score to 0.
+    - Display the question and answer options.
+
+- Answer Selection:
+    - When a player selects an answer, check if it is correct.
+    - Update the score if the answer is correct.
+    - Provide feedback based on the correctness of the answer.
+
+- Next Question:
+    - Move to the next question when the player clicks the "Next" button.
+    - If there are no more questions, display the final score and end the game.
+
+- End of Game:
+    - Display a message indicating the game is complete.
+    - Show the player's final score.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+![image](../../assets/images/Language_Learner_Adventure.png)
+
+<br>
diff --git a/Games/Language_Learner_Adventure/index.html b/Games/Language_Learner_Adventure/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Language Learner Adventure</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="game-container">
+        <h1>Language Learner Adventure</h1>
+        <div id="score-container">Score: <span id="score">0</span></div>
+        <div id="question-container">
+            <p id="question">Translate the word: <span id="word"></span></p>
+            <div id="options"></div>
+        </div>
+        <button id="next-button" class="game-button">Next</button>
+        <p id="feedback"></p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Language_Learner_Adventure/script.js b/Games/Language_Learner_Adventure/script.js
@@ -0,0 +1,52 @@
+const questions = [
+    { word: 'apple', correct: 'manzana', options: ['manzana', 'pera', 'plátano', 'uva'] },
+    { word: 'dog', correct: 'perro', options: ['gato', 'caballo', 'perro', 'ratón'] },
+    { word: 'house', correct: 'casa', options: ['edificio', 'casa', 'escuela', 'tienda'] },
+    { word: 'book', correct: 'libro', options: ['revista', 'periódico', 'libro', 'cuaderno'] },
+    { word: 'car', correct: 'coche', options: ['bicicleta', 'coche', 'avión', 'barco'] }
+];
+
+let currentQuestionIndex = 0;
+let score = 0;
+
+document.getElementById('next-button').addEventListener('click', nextQuestion);
+
+function loadQuestion() {
+    const question = questions[currentQuestionIndex];
+    document.getElementById('word').innerText = question.word;
+    const optionsContainer = document.getElementById('options');
+    optionsContainer.innerHTML = '';
+    question.options.forEach(option => {
+        const button = document.createElement('button');
+        button.className = 'option-button';
+        button.innerText = option;
+        button.addEventListener('click', () => checkAnswer(option));
+        optionsContainer.appendChild(button);
+    });
+    document.getElementById('feedback').innerText = '';
+}
+
+function checkAnswer(selected) {
+    const question = questions[currentQuestionIndex];
+    if (selected === question.correct) {
+        score++;
+        document.getElementById('feedback').innerText = 'Correct!';
+    } else {
+        document.getElementById('feedback').innerText = `Incorrect! The correct answer is ${question.correct}.`;
+    }
+    document.getElementById('score').innerText = score;
+}
+
+function nextQuestion() {
+    currentQuestionIndex++;
+    if (currentQuestionIndex < questions.length) {
+        loadQuestion();
+    } else {
+        document.getElementById('question-container').innerHTML = '<p>You have completed the quiz!</p>';
+        document.getElementById('next-button').style.display = 'none';
+        document.getElementById('feedback').innerText = `Final Score: ${score}`;
+    }
+}
+
+// Initialize the first question
+loadQuestion();
diff --git a/Games/Language_Learner_Adventure/styles.css b/Games/Language_Learner_Adventure/styles.css
@@ -0,0 +1,62 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+    color: #333;
+    text-align: center;
+    margin: 0;
+    padding: 20px;
+}
+
+#game-container {
+    width: 80%;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+}
+
+#question-container {
+    margin-bottom: 20px;
+}
+
+.game-button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    background-color: #4CAF50;
+    color: white;
+    border-radius: 5px;
+}
+
+#options {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.option-button {
+    padding: 10px 20px;
+    margin: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    border: none;
+    background-color: #f0f0f0;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.option-button:hover {
+    background-color: #e0e0e0;
+}
+
+#feedback {
+    margin-top: 20px;
+    font-size: 18px;
+}
+
+#score-container {
+    font-size: 20px;
+    margin-bottom: 20px;
+}
diff --git a/Games/Sky_Jumper/README.md b/Games/Sky_Jumper/README.md
@@ -0,0 +1,31 @@
+# Sky Jumper Game
+
+A simple 2D platformer game where the player jumps between platforms in a sky-themed environment. This game is built using HTML, CSS, and JavaScript.
+
+## Overview
+
+Sky Jumper is a basic web-based game where the player controls a character that can jump between floating platforms. It features:
+- Gravity and jumping mechanics
+- Basic platform collision detection
+- Simple controls using arrow keys and the space bar
+
+## Features
+
+- **Player Movement**: Move left and right using arrow keys.
+- **Jumping**: Jump using the space bar.
+- **Platforms**: Jump between floating platforms in the sky.
+- **Responsive Canvas**: Adjusts to the window size.
+
+## Getting Started
+
+### Prerequisites
+
+No additional software is required other than a modern web browser.
+
+### Setup
+
+1. **Clone the Repository**
+
+   ```bash
+   git clone <repository-url>
+   cd sky-jumper