diff --git a/Games/DNA_Sequencer/README.md b/Games/DNA_Sequencer/README.md new file mode 100644 index 0000000000..ff53dec530 --- /dev/null +++ b/Games/DNA_Sequencer/README.md @@ -0,0 +1,32 @@ +# **DNA Sequencer Game** + +--- + +
+ +## **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) + +
+ +--- + diff --git a/Games/DNA_Sequencer/index.html b/Games/DNA_Sequencer/index.html new file mode 100644 index 0000000000..1551a8874f --- /dev/null +++ b/Games/DNA_Sequencer/index.html @@ -0,0 +1,28 @@ + + + + + + DNA Sequencer Game + + + +
+

DNA Sequencer

+

Guess the DNA Sequence order by shuffling +
(You can shuffle manually as well)!

+
+
+
+
+ + + +
+
Time: 00:00
+
+
+
+ + + \ No newline at end of file diff --git a/Games/DNA_Sequencer/script.js b/Games/DNA_Sequencer/script.js new file mode 100644 index 0000000000..23cdb95ed6 --- /dev/null +++ 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(); +}); \ No newline at end of file diff --git a/Games/DNA_Sequencer/style.css b/Games/DNA_Sequencer/style.css new file mode 100644 index 0000000000..faf5bdc1a5 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/README.md b/README.md index 7a1cf1b4f5..4af5585ce9 100644 --- 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) |] | Game | Game | Game | Game | Game | diff --git a/assets/images/DNA_Sequencer.png b/assets/images/DNA_Sequencer.png new file mode 100644 index 0000000000..f497c46e3f Binary files /dev/null and b/assets/images/DNA_Sequencer.png differ