kunjgit · kunjgit · Jul 27, 2024 · Jul 19, 2024 · Jul 19, 2024 · Jul 23, 2024
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();
+});
diff --git a/Games/DNA_Sequencer/style.css b/Games/DNA_Sequencer/style.css
@@ -0,0 +1,61 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(135deg, #6e8efb, #a777e3);
+    margin: 0;
+}
+.container {
+    text-align: center;
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+.dna-container {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+}
+.dna-sequence {
+    display: flex;
+    gap: 5px;
+}
+.dna-sequence .base {
+    padding: 10px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    border-radius: 4px;
+    background-color: #eee;
+    transform: perspective(100px) rotateX(10deg) rotateY(10deg);
+    transition: transform 0.3s;
+}
+.dna-sequence .base:hover {
+    transform: perspective(100px) rotateX(0deg) rotateY(0deg);
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+}
+.controls {
+    margin: 20px 0;
+}
+.controls button {
+    padding: 10px 20px;
+    margin: 0 10px;
+    border: none;
+    background-color: #007bff;
+    color: white;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.controls button:hover {
+    background-color: #0056b3;
+}
+.result {
+    margin-top: 20px;
+    font-weight: bold;
+}
+.level {
+    font-size: 20px;
+    margin-top: 10px;
+}
diff --git a/README.md b/README.md
@@ -204,7 +204,8 @@ This repository also provides one such platforms where contributers come over an
 | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder)           | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon) | [TriHand_Tactics](https://github.com/kunjgit/GameZone/tree/main/Games/TriHand_Tactics)         | [Earth_Guardian](https://github.com/kunjgit/GameZone/tree/main/Games/Earth_Guardian)           |  [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall)               |
 | [Candy_Crush_Saga](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Crush_Saga)       |  [numeral-whiz](https://github.com/Ishan-77/GameZone/tree/main/Games/numeral-whiz)                                | [candy_match](https://github.com/kunjgit/GameZone/tree/main/Games/Candy_Match_Saga)                     | [Crossy_Road](https://github.com/tanujbordikar/GameZone/tree/Crossy_Road)                                    | [HueHero](https://github.com/kunjgit/GameZone/tree/main/Games/HueHero)                                             | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner)                          |
 | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder)                             | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon)                | [Guess Who](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_Who)                                   | [Pop My Balloon](https://github.com/kunjgit/GameZone/tree/main/Games/Pop_My_Balloon)                               | [Tower Stack](https://github.com/kunjgit/GameZone/tree/main/Games/Tower_Stack)                                                                                                         | 
-| [Boom_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Boom_Blast) |
+| [DNA_Sequencer](https://github.com/kunjgit/GameZone/tree/main/Games/DNA_Sequencer) | 
+| [Boom_Blast](https://github.com/kunjgit/GameZone/tree/main/Games/Boom_Blast) |]
 </center>
 
 | Game                                                                                                             | Game                                                                                                    | Game                                                                                                         | Game                                                                                                               | Game                                                                                                        |

diff --git a/assets/images/DNA_Sequencer.png b/assets/images/DNA_Sequencer.png