forked from Sulagna-Dutta-Roy/GGExtensions
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a3fef68
commit 276d035
Showing
16 changed files
with
343 additions
and
0 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |