Merge branch 'main' into main

kunjgit · Jul 27, 2024 · 3870e32 · 3870e32
2 parents 5537a9d + f64e004
commit 3870e32
Show file tree

Hide file tree

Showing 65 changed files with 2,125 additions and 4 deletions.
diff --git a/Games/Balloon_Popup/Balloon_Popup.png b/Games/Balloon_Popup/Balloon_Popup.png
diff --git a/Games/Balloon_Popup/Readme.md b/Games/Balloon_Popup/Readme.md
@@ -0,0 +1,50 @@
+# **Balloon Popper Game**
+
+---
+
+<br>
+
+## **Description 📃**
+
+- The Balloon Popper Game is a fun and interactive game where players need to pop balloons of different colors and sizes as they float up the screen. Built using HTML, CSS, and JavaScript, this game provides an engaging and enjoyable experience for all ages.
+
+## **Functionalities 🎮**
+
+- Colorful balloons that float up the screen.
+- Click to pop the balloons and score points.
+- Different balloon sizes to add variety.
+- Timer to challenge the player.
+- Score tracking to keep track of your performance.
+
+<br>
+
+## **How to Play? 🕹️**
+
+- Open the game in your web browser.
+- Balloons will start floating up the screen.
+- Click on the balloons to pop them and score points.
+- The game ends when the timer runs out.
+- Try to score as many points as possible before the time runs out!
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+<!-- add your screenshots like this -->
+<!-- ![image](url) -->
+<img width="752" alt="Screenshot 2023-07-09 235520" src="balloon_Popup.png">
+<br>
+
+
+<br>
+
+## **Getting Started**
+
+To get a local copy of the game up and running, follow these simple steps.
+
+### Prerequisites
+
+Make sure you have a web browser installed on your computer.
+
diff --git a/Games/Balloon_Popup/app.js b/Games/Balloon_Popup/app.js
@@ -0,0 +1,29 @@
+let popped = 0;
+
+document.addEventListener('mouseover', function(e){
+
+    if (e.target.className === "balloon"){
+
+                e.target.style.backgroundColor = "#ededed";
+                e.target.textContent = "POP!";
+                popped++;
+                removeEvent(e);
+                checkAllPopped();
+    }   
+});
+
+function removeEvent(e){
+    e.target.removeEventListener('mouseover', function(){
+
+    })
+};
+
+function checkAllPopped(){
+    if (popped === 24){
+        console.log('all popped!');
+        let gallery = document.querySelector('#balloon-gallery');
+        let message = document.querySelector('#yay-no-balloons');
+        gallery.innerHTML = '';
+        message.style.display = 'block';
+    }
+};
diff --git a/Games/Balloon_Popup/index.html b/Games/Balloon_Popup/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <title>Pop the Ballons</title>
+</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>
+        <div id="balloon-gallery">
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+            <div class="balloon"></div>
+        </div>
+
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Games/Balloon_Popup/style.css b/Games/Balloon_Popup/style.css
@@ -0,0 +1,74 @@
+body{
+    font-family:sans-serif;
+    padding: 30px;
+    background:#ededed;
+}
+
+.wrapper{
+    max-width: 690px;
+    margin: 0 auto;
+}
+
+.blue {
+    color:#3f7abe;
+}
+
+h1{
+    margin: auto;
+    margin-top: 50px;
+    margin-bottom: 50px;
+    color: #08a3d9;
+    text-transform: uppercase;
+    font-size: 30px;
+    color: #000380;
+}
+
+#balloon-gallery div{
+    background: #ff3300;
+    height: 121px;
+    width: 119px;
+    text-align: center;
+    color: #ff3300;
+    font-size: 40px;
+    font-family: sans-serif, arial;
+    border-radius: 100%;
+    margin-top: 20px;
+    display: inline-block;
+    /* float: left; */
+    margin: 2.5px 5 px 2.5px 0px;
+}
+
+#balloon-gallery div:nth-child(3n){
+    background: #ffce00;
+    color: #ffce00;
+}
+
+#balloon-gallery div:nth-child(3n-1){
+    background:#3f7abe;
+    color:#3f7abe;
+}
+
+#balloon-gallery div:nth-child(5n){
+    background:#8e7a8e;
+    color:#8e7a8e;
+}
+
+#balloon-gallery div:nth-child(13){
+    background:#8e7a8e;
+    color:#8e7a8e;
+}
+
+#balloon-gallery div:nth-child(10n){
+    background:#ff3300;
+    color: #ff3300;
+}
+
+#balloon-gallery div:nth-child(4n){
+    clear:right;
+}
+
+#yay-no-balloons {
+    display:none;
+    color:#ff3300;
+    font-size:100px;
+}
diff --git a/Games/DNA_Sequencer/README.md b/Games/DNA_Sequencer/README.md
@@ -0,0 +1,32 @@
+# **DNA Sequencer Game**
+
+---
+
+<br> 
+
+## **Description 📃**
+DNA Sequencer is an interactive puzzle game where players must arrange DNA bases (A, T, C, G) in the correct order within a given time limit.
+
+## **Functionalities 🎮**
+- Control the sequence by dragging and dropping the DNA bases.
+- Shuffle the sequence for added difficulty.
+- Timer-based challenge with a 120-second countdown.
+- Immediate feedback on the correctness of the arranged sequence.
+- Responsive design for easy play on different devices.
+- Option to restart the game after the timer runs out or sequence is completed.
+
+## **How to Play? 🕹️**
+- Arrange the DNA bases in the correct order by dragging and dropping them into place.
+- Shuffle the sequence using the "Shuffle" button for a new challenge.
+- Check your sequence with the "Check Sequence" button to see if it's correct.
+- Aim to complete the sequence within the 120-second time limit.
+- The game ends when the timer runs out or the correct sequence is achieved.
+- Your final result will be displayed on the screen, indicating if the sequence is correct or not.
+
+## **Screenshots 📸**
+![image](../../assets/DNA_Sequencer.png)
+
+<br>
+
+---
+
diff --git a/Games/DNA_Sequencer/index.html b/Games/DNA_Sequencer/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DNA Sequencer Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>DNA Sequencer</h1>
+        <p>Guess the DNA Sequence order by shuffling 
+            <br>(You can shuffle manually as well)!</p>
+        <div class="dna-container">
+            <div id="dna-sequence" class="dna-sequence"></div>
+        </div>
+        <div class="controls">
+            <button id="shuffle">Shuffle</button>
+            <button id="check">Check Sequence</button>
+            <button id="play-again">Play Again</button> 
+        </div>
+        <div id="timer" class="timer">Time: 00:00</div>
+        <div id="result" class="result"></div>
+        <br>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/DNA_Sequencer/script.js b/Games/DNA_Sequencer/script.js
@@ -0,0 +1,117 @@
+document.addEventListener('DOMContentLoaded', function() {
+    let dnaSequence = generateRandomDnaSequence(8);
+    let currentSequence = [...dnaSequence];
+    let timeLimit = 120;
+    let timer;
+
+    function shuffleArray(array) {
+        for (let i = array.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [array[i], array[j]] = [array[j], array[i]];
+        }
+    }
+
+    function generateRandomDnaSequence() {
+        let sequence = ["A", "A", "T", "T", "C", "C", "G", "G"];
+        for (let i = sequence.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [sequence[i], sequence[j]] = [sequence[j], sequence[i]]; 
+        }
+        return sequence;
+    }
+
+    function renderSequence() {
+        const sequenceContainer = document.getElementById('dna-sequence');
+        sequenceContainer.innerHTML = ''; 
+        currentSequence.forEach((base, index) => {
+            const baseElement = document.createElement('div');
+            baseElement.textContent = base;
+            baseElement.className = 'base';
+            baseElement.draggable = true;
+            baseElement.setAttribute('data-index', index);
+            baseElement.addEventListener('dragstart', dragStart);
+            sequenceContainer.appendChild(baseElement);
+        });
+    }
+
+    function dragStart(e) {
+        e.dataTransfer.setData('text/plain', e.target.getAttribute('data-index'));
+    }
+
+    function dragOver(e) {
+        e.preventDefault();
+    }
+
+    function drop(e) {
+        e.preventDefault();
+        const originIndex = e.dataTransfer.getData('text');
+        const targetIndex = e.target.getAttribute('data-index');
+        if (targetIndex) {
+            [currentSequence[originIndex], currentSequence[targetIndex]] = [currentSequence[targetIndex], currentSequence[originIndex]];
+            renderSequence();
+        }
+    }
+
+    function startLevel() {
+        shuffleArray(currentSequence);
+        renderSequence();
+        startTimer();
+    }
+
+
+    function startTimer() {
+        const timerElement = document.getElementById('timer');
+        timerElement.textContent = `Time: ${timeLimit}s`;
+        timer = setInterval(() => {
+            timeLimit--;
+            timerElement.textContent = `Time: ${timeLimit}s`;
+            if (timeLimit <= 0) {
+                clearInterval(timer);
+                const resultElement = document.getElementById('result');
+                resultElement.textContent = dnaSequence.join('');
+                resultElement.style.color = 'red'; 
+                alert('Time is up! Try again.');
+                resetGame();
+            }
+        }, 1000);
+    }
+
+    function resetGame() {
+        clearInterval(timer);
+        timeLimit = 120;
+        dnaSequence = generateRandomDnaSequence(); 
+        currentSequence = [...dnaSequence];
+        startLevel();
+    }
+
+    document.getElementById('dna-sequence').addEventListener('dragover', dragOver);
+    document.getElementById('dna-sequence').addEventListener('drop', drop);
+    document.getElementById('shuffle').addEventListener('click', () => {
+        shuffleArray(currentSequence);
+        renderSequence();
+    });
+    document.getElementById('check').addEventListener('click', () => {
+        console.log(currentSequence);
+        console.log(dnaSequence);
+        const resultElement = document.getElementById('result');
+        if (JSON.stringify(currentSequence) === JSON.stringify(dnaSequence)) {
+            resultElement.textContent = 'Correct sequence! Well done.';
+            resultElement.style.color = 'green';
+            clearInterval(timer);
+            updateScore(true);
+            currentSequence = generateSequence(dnaSequence.length + 2); 
+            startLevel();
+        } else {
+            resultElement.textContent = 'Incorrect sequence. Try again.';
+            resultElement.style.color = 'red';
+            updateScore(false);
+        }
+    });
+    const playAgainButton = document.getElementById('play-again');
+    playAgainButton.addEventListener('click', () => {
+        document.getElementById('result').textContent = ''; 
+        resetGame(); 
+    });
+
+    startLevel();
+});