Merge pull request #2570 from Shantnu-singh/master

Added Elemental Flux Game
Sulagna-Dutta-Roy · Jul 31, 2024 · 2192b76 · 2192b76
2 parents 56d51b4 + 2ae1f1d
commit 2192b76
Show file tree

Hide file tree

Showing 16 changed files with 349 additions and 0 deletions.
diff --git a/Elemental Flux Game/Gameplay/Game_1.png b/Elemental Flux Game/Gameplay/Game_1.png
diff --git a/Elemental Flux Game/Gameplay/Game_2.png b/Elemental Flux Game/Gameplay/Game_2.png
diff --git a/Elemental Flux Game/Gameplay/Game_3.png b/Elemental Flux Game/Gameplay/Game_3.png
diff --git a/Elemental Flux Game/images/coal.jpeg b/Elemental Flux Game/images/coal.jpeg
diff --git a/Elemental Flux Game/images/gas.jpeg b/Elemental Flux Game/images/gas.jpeg
diff --git a/Elemental Flux Game/images/geo.jpeg b/Elemental Flux Game/images/geo.jpeg
diff --git a/Elemental Flux Game/images/hydro.jpeg b/Elemental Flux Game/images/hydro.jpeg
diff --git a/Elemental Flux Game/images/nuclear.jpeg b/Elemental Flux Game/images/nuclear.jpeg
diff --git a/Elemental Flux Game/images/oil.jpeg b/Elemental Flux Game/images/oil.jpeg
diff --git a/Elemental Flux Game/images/solor.jpeg b/Elemental Flux Game/images/solor.jpeg
diff --git a/Elemental Flux Game/images/wind.jpeg b/Elemental Flux Game/images/wind.jpeg
diff --git a/Elemental Flux Game/index.html b/Elemental Flux Game/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Energy Sources Drag & Drop Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Energy Sources: Renewable vs. Non-Renewable</h1>
+        <div class="score">Score: <span id="score">0</span></div>
+        <div class="game-area">
+            <div class="dropzone" id="renewable">
+                <h2>Renewable</h2>
+            </div>
+            <div class="dropzone" id="non-renewable">
+                <h2>Non-Renewable</h2>
+            </div>
+            <div class="cards-container">
+                <div class="card" draggable="true" data-type="renewable">
+                    <img src="images/solor.jpeg" alt="Solar">
+                    <p>Solar</p>
+                </div>
+                <div class="card" draggable="true" data-type="non-renewable">
+                    <img src="images/coal.jpeg" alt="Coal">
+                    <p>Coal</p>
+                </div>
+                <div class="card" draggable="true" data-type="renewable">
+                    <img src="images/wind.jpeg" alt="Wind">
+                    <p>Wind</p>
+                </div>
+                <div class="card" draggable="true" data-type="non-renewable">
+                    <img src="images/gas.jpeg" alt="Natural Gas">
+                    <p>Natural Gas</p>
+                </div>
+                <div class="card" draggable="true" data-type="renewable">
+                    <img src="images/hydro.jpeg" alt="Hydroelectric">
+                    <p>Hydroelectric</p>
+                </div>
+                <div class="card" draggable="true" data-type="non-renewable">
+                    <img src="images/oil.jpeg" alt="Oil">
+                    <p>Oil</p>
+                </div>
+            </div>
+        </div>
+        <button id="continue-btn" style="display: none;">Continue</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Elemental Flux Game/manifest.json b/Elemental Flux Game/manifest.json
@@ -0,0 +1,10 @@
+{
+    "name": "Elemental Flux game",
+    "short_name": "Elemental Flux",
+    "description": "An interactive game to drag and drops renweable source of energy and raise awareness about energy conservation.",
+    "start_url": "/index.html",
+    "display": "standalone",
+    "background_color": "#4682B4",
+    "theme_color": "#87CEEB",
+    "orientation": "portrait"
+  }
diff --git a/Elemental Flux Game/readme.md b/Elemental Flux Game/readme.md
@@ -0,0 +1,49 @@
+
+# Elemental Flux: Renewable vs. Non-Renewable Showdown
+
+## 🌍 Description
+
+Elemental Flux is an engaging and educational drag-and-drop card game that challenges players to distinguish between renewable and non-renewable energy sources. In this visually stunning showdown, players must correctly categorize various energy sources, learning about sustainability and resource management in the process.
+
+## ✨ Features
+
+- Intuitive drag-and-drop gameplay
+- Beautifully designed cards representing different energy sources
+- Dynamic scoring system
+- Educational content about renewable and non-renewable energy
+- Sleek, modern user interface
+- Responsive design for both desktop and mobile play
+
+## 🎮 How to Play
+
+1. Start the game to see a mix of energy source cards.
+2. Drag each card to either the "Renewable" or "Non-Renewable" category.
+3. Release the card to place it:
+   - Correct placement: Card stays and you earn points!
+   - Incorrect placement: Card returns to its original position.
+4. Continue until all cards are correctly categorized.
+5. Aim for a high score and quick completion time!
+
+
+## 🛠 Technologies Used
+
+- HTML5 for structure
+- CSS3 for styling and animations
+- JavaScript for game logic and interactivity
+
+## 🎨 Customization
+
+Feel free to expand the game by editing `script.js`:
+
+- Add more energy source cards
+- Adjust scoring system
+- Modify game difficulty
+
+
+## 🚀 Installation
+
+1. Clone this repository .
+```bash
+  clone git https://github.com/Sulagna-Dutta-Roy/GGExtensions/tree/master/Elemenatal Flux Game
+```
+2. Open the `index.html` file in a web browser to start the game.
diff --git a/Elemental Flux Game/script.js b/Elemental Flux Game/script.js
@@ -0,0 +1,109 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const cards = document.querySelectorAll('.card');
+    const dropzones = document.querySelectorAll('.dropzone');
+    const cardsContainer = document.querySelector('.cards-container');
+    const scoreElement = document.getElementById('score');
+    const continueBtn = document.getElementById('continue-btn');
+    let score = 0;
+
+    function initGame() {
+        cards.forEach(card => {
+            card.addEventListener('dragstart', dragStart);
+            card.addEventListener('dragend', dragEnd);
+            cardsContainer.appendChild(card);
+        });
+
+        dropzones.forEach(dropzone => {
+            dropzone.addEventListener('dragover', dragOver);
+            dropzone.addEventListener('dragenter', dragEnter);
+            dropzone.addEventListener('dragleave', dragLeave);
+            dropzone.addEventListener('drop', drop);
+        });
+
+        score = 0;
+        updateScore();
+        continueBtn.style.display = 'none';
+    }
+
+    function dragStart() {
+        this.classList.add('dragging');
+    }
+
+    function dragEnd() {
+        this.classList.remove('dragging');
+    }
+
+    function dragOver(e) {
+        e.preventDefault();
+    }
+
+    function dragEnter(e) {
+        e.preventDefault();
+        this.classList.add('highlight');
+    }
+
+    function dragLeave() {
+        this.classList.remove('highlight');
+    }
+
+    function drop() {
+        this.classList.remove('highlight');
+        const card = document.querySelector('.dragging');
+        const cardType = card.getAttribute('data-type');
+        const dropzoneType = this.id;
+
+        if (cardType === dropzoneType) {
+            this.appendChild(card);
+            card.style.transform = 'none';
+            card.style.position = 'static';
+            card.style.margin = '0';
+            score += 5;
+            updateScore();
+            checkGameEnd();
+        } else {
+            returnCardToOriginalPosition(card);
+        }
+    }
+
+    function returnCardToOriginalPosition(card) {
+        const originalPosition = card.getBoundingClientRect();
+        const cardClone = card.cloneNode(true);
+
+        cardClone.style.position = 'fixed';
+        cardClone.style.top = `${originalPosition.top}px`;
+        cardClone.style.left = `${originalPosition.left}px`;
+        cardClone.style.margin = '0';
+        cardClone.style.zIndex = '1000';
+        cardClone.style.transition = 'all 0.5s ease';
+
+        document.body.appendChild(cardClone);
+
+        cardsContainer.appendChild(card);
+        card.style.opacity = '0';
+
+        setTimeout(() => {
+            const newPosition = card.getBoundingClientRect();
+            cardClone.style.top = `${newPosition.top}px`;
+            cardClone.style.left = `${newPosition.left}px`;
+        }, 0);
+
+        setTimeout(() => {
+            card.style.opacity = '1';
+            document.body.removeChild(cardClone);
+        }, 500);
+    }
+
+    function updateScore() {
+        scoreElement.textContent = score;
+    }
+
+    function checkGameEnd() {
+        if (cardsContainer.children.length === 0) {
+            continueBtn.style.display = 'block';
+        }
+    }
+
+    continueBtn.addEventListener('click', initGame);
+
+    initGame();
+});
diff --git a/Elemental Flux Game/style.css b/Elemental Flux Game/style.css
@@ -0,0 +1,130 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.container {
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
+    max-width: 600px;
+    width: 100%;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 1rem;
+    color: #333;
+    font-size: 1.5rem;
+}
+
+.score {
+    text-align: center;
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+    color: #666;
+}
+
+.game-area {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+}
+
+.dropzone {
+    border: 3px dashed #ccc;
+    border-radius: 10px;
+    padding: 0.5rem;
+    min-height: 200px;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    gap: 0.5rem;
+    align-content: start;
+    transition: background-color 0.3s ease;
+}
+
+.dropzone h2 {
+    margin-bottom: 0.5rem;
+    color: #666;
+    grid-column: 1 / -1;
+    font-size: 1rem;
+}
+
+.dropzone.highlight {
+    background-color: #e6f7ff;
+    border-color: #1890ff;
+}
+
+.cards-container {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    gap: 0.5rem;
+    margin-top: 1rem;
+}
+
+.card {
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 0.5rem;
+    text-align: center;
+    cursor: move;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+.card img {
+    width: 100%;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+}
+
+.card p {
+    font-weight: bold;
+    color: #333;
+    font-size: 0.8rem;
+}
+
+.card.dragging {
+    opacity: 0.5;
+}
+
+#continue-btn {
+    display: block;
+    margin: 1rem auto 0;
+    padding: 0.5rem 1rem;
+    background-color: #1890ff;
+    color: #fff;
+    border: none;
+    border-radius: 4px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#continue-btn:hover {
+    background-color: #40a9ff;
+}