diff --git a/Games/Elemental_Flux/Gameplay/Game_1.png b/Games/Elemental_Flux/Gameplay/Game_1.png new file mode 100644 index 0000000000..de80c619e1 Binary files /dev/null and b/Games/Elemental_Flux/Gameplay/Game_1.png differ diff --git a/Games/Elemental_Flux/Gameplay/Game_2.png b/Games/Elemental_Flux/Gameplay/Game_2.png new file mode 100644 index 0000000000..85a1db6a8a Binary files /dev/null and b/Games/Elemental_Flux/Gameplay/Game_2.png differ diff --git a/Games/Elemental_Flux/Gameplay/Game_3.png b/Games/Elemental_Flux/Gameplay/Game_3.png new file mode 100644 index 0000000000..2a3229876d Binary files /dev/null and b/Games/Elemental_Flux/Gameplay/Game_3.png differ diff --git a/Games/Elemental_Flux/Gameplay/desktop.ini b/Games/Elemental_Flux/Gameplay/desktop.ini new file mode 100644 index 0000000000..83495c9c05 --- /dev/null +++ b/Games/Elemental_Flux/Gameplay/desktop.ini @@ -0,0 +1,4 @@ +[LocalizedFileNames] +Screenshot 2024-07-31 101153.png=@Screenshot 2024-07-31 101153,0 +Screenshot 2024-07-31 101134.png=@Screenshot 2024-07-31 101134,0 +Screenshot 2024-07-31 101122.png=@Screenshot 2024-07-31 101122,0 diff --git a/Games/Elemental_Flux/images/coal.jpeg b/Games/Elemental_Flux/images/coal.jpeg new file mode 100644 index 0000000000..bab652c611 Binary files /dev/null and b/Games/Elemental_Flux/images/coal.jpeg differ diff --git a/Games/Elemental_Flux/images/gas.jpeg b/Games/Elemental_Flux/images/gas.jpeg new file mode 100644 index 0000000000..cc26feb587 Binary files /dev/null and b/Games/Elemental_Flux/images/gas.jpeg differ diff --git a/Games/Elemental_Flux/images/geo.jpeg b/Games/Elemental_Flux/images/geo.jpeg new file mode 100644 index 0000000000..c935923ea0 Binary files /dev/null and b/Games/Elemental_Flux/images/geo.jpeg differ diff --git a/Games/Elemental_Flux/images/hydro.jpeg b/Games/Elemental_Flux/images/hydro.jpeg new file mode 100644 index 0000000000..50263bcb1b Binary files /dev/null and b/Games/Elemental_Flux/images/hydro.jpeg differ diff --git a/Games/Elemental_Flux/images/nuclear.jpeg b/Games/Elemental_Flux/images/nuclear.jpeg new file mode 100644 index 0000000000..4cffc57bb9 Binary files /dev/null and b/Games/Elemental_Flux/images/nuclear.jpeg differ diff --git a/Games/Elemental_Flux/images/oil.jpeg b/Games/Elemental_Flux/images/oil.jpeg new file mode 100644 index 0000000000..a52def9e3b Binary files /dev/null and b/Games/Elemental_Flux/images/oil.jpeg differ diff --git a/Games/Elemental_Flux/images/solor.jpeg b/Games/Elemental_Flux/images/solor.jpeg new file mode 100644 index 0000000000..ad3a208b85 Binary files /dev/null and b/Games/Elemental_Flux/images/solor.jpeg differ diff --git a/Games/Elemental_Flux/images/wind.jpeg b/Games/Elemental_Flux/images/wind.jpeg new file mode 100644 index 0000000000..b4a7ab6859 Binary files /dev/null and b/Games/Elemental_Flux/images/wind.jpeg differ diff --git a/Games/Elemental_Flux/index.html b/Games/Elemental_Flux/index.html new file mode 100644 index 0000000000..697bd3874c --- /dev/null +++ b/Games/Elemental_Flux/index.html @@ -0,0 +1,51 @@ + + + + + + Energy Sources Drag & Drop Game + + + +
+

Energy Sources: Renewable vs. Non-Renewable

+
Score: 0
+
+
+

Renewable

+
+
+

Non-Renewable

+
+
+
+ Solar +

Solar

+
+
+ Coal +

Coal

+
+
+ Wind +

Wind

+
+
+ Natural Gas +

Natural Gas

+
+
+ Hydroelectric +

Hydroelectric

+
+
+ Oil +

Oil

+
+
+
+ +
+ + + \ No newline at end of file diff --git a/Games/Elemental_Flux/readme.md b/Games/Elemental_Flux/readme.md new file mode 100644 index 0000000000..5bbfdd4958 --- /dev/null +++ b/Games/Elemental_Flux/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/kunjgit/GameZone/tree/main/Games/Elemenatal_Flux +``` +2. Open the `index.html` file in a web browser to start the game. \ No newline at end of file diff --git a/Games/Elemental_Flux/script.js b/Games/Elemental_Flux/script.js new file mode 100644 index 0000000000..27905bcb9e --- /dev/null +++ b/Games/Elemental_Flux/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(); +}); \ No newline at end of file diff --git a/Games/Elemental_Flux/style.css b/Games/Elemental_Flux/style.css new file mode 100644 index 0000000000..c799c9f079 --- /dev/null +++ b/Games/Elemental_Flux/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; +} \ No newline at end of file diff --git a/README.md b/README.md index 951489dce1..64b6af5c3e 100644 --- a/README.md +++ b/README.md @@ -357,6 +357,8 @@ This repository also provides one such platforms where contributers come over an | [Modulo_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Modulo_Game) | | [Airhockey_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Airhockey_Game) | +| [Elemental Flux Game](https://github.com/kunjgit/GameZone/tree/main/Games/Elemental_Flux)| + | [Am_I_the_number](https://github.com/kunjgit/GameZone/tree/main/Games/Am_I_the_number) | |[Gem_Cruncher](https://github.com/kunjgit/GameZone/tree/main/Games/Gem_Cruncher)|