Skip to content

Commit b4fda3f

Browse files
swapnilsparshswapnilsparsh
authored
Merge pull request #1940 from ktungl/master
Add: 127 - Flower Garden Game
2 parents ba49754 + d69dd49 commit b4fda3f

6 files changed

Lines changed: 394 additions & 1 deletion

File tree

‎data.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -628,5 +628,11 @@
628628
"id": 126,
629629
"name": "Arcade Game",
630630
"description": "Play a variety of arcade-style games with simple controls and gameplay."
631-
}
631+
},
632+
{
633+
"id": 127,
634+
"name": "Flower Garden Game",
635+
"description": "Plant flowers and avoid mushrooms in this fun timer-based game."
636+
}
637+
632638
]

‎projects/flower-garden-game/README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
## 🌸 Flower Garden Game
2+
3+
### Description
4+
An interactive flower planting game where players race against time to plant as many flowers as possible while avoiding mushrooms. Built with vanilla JavaScript and HTML5 Canvas.
5+
6+
### Features
7+
- ⏱️ 60-second countdown timer
8+
- ❤️ Lives system (3 hearts)
9+
- 🍄 Randomly spawning mushrooms as obstacles
10+
- 🌼 Multiple colorful flower varieties
11+
- 🎮 Real-time score tracking
12+
- 🔄 Restart functionality
13+
- 📱 Responsive design
14+
15+
### How to Play
16+
- Click anywhere on the canvas to plant a flower (+1 point)
17+
- Avoid clicking on mushrooms (-1 life)
18+
- Try to get the highest score within 60 seconds!
19+
20+
### Technologies
21+
- HTML5
22+
- CSS3
23+
- Vanilla JavaScript
24+
- Canvas API
25+
26+
### Screenshots
27+
![Gameplay](Screenshot/screenshot.png)
28+
29+
---
30+
31+
**Note:** This is a JavaScript adaptation of my original Python game, showcasing canvas manipulation, event handling, and game logic implementation.

‎projects/flower-garden-game/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Flower Garden Game</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="game-container">
11+
<h1>🌸 Flower Garden Game 🌸</h1>
12+
<p class="instructions">
13+
Plant as many flowers as you can within 60 seconds!<br>
14+
<strong>Avoid the mushrooms</strong> - clicking them costs a life! ❤️
15+
</p>
16+
17+
<div class="game-info">
18+
<div class="info-item">
19+
🌼 Score: <span id="score">0</span>
20+
</div>
21+
<div class="info-item hearts">
22+
❤️ Lives: <span id="lives">3</span>
23+
</div>
24+
<div class="info-item">
25+
⏱️ Time: <span id="time">60</span>s
26+
</div>
27+
</div>
28+
29+
<canvas id="gameCanvas" width="400" height="400"></canvas>
30+
31+
<div id="gameOverScreen" class="game-over">
32+
<div id="finalMessage">Time's Up!</div>
33+
<div style="font-size: 18px; margin-top: 10px;">
34+
Final Score: <span id="finalScore">0</span>
35+
</div>
36+
<button class="restart-btn" onclick="restartGame()">Play Again</button>
37+
</div>
38+
</div>
39+
40+
<script src="script.js"></script>
41+
</body>
42+
</html>

‎projects/flower-garden-game/script.js‎

Lines changed: 219 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
const canvas = document.getElementById('gameCanvas');
2+
const ctx = canvas.getContext('2d');
3+
4+
// Game state
5+
let score = 0;
6+
let lives = 3;
7+
let timeRemaining = 60;
8+
let gameOver = false;
9+
let mushrooms = [];
10+
let flowers = [];
11+
let character = { x: 200, y: 200, size: 10 };
12+
13+
// Colors
14+
const flowerColors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE'];
15+
const mushroomColors = { cap: '#E74C3C', stem: '#F5DEB3' };
16+
17+
// Initialize mushrooms
18+
function initMushrooms() {
19+
mushrooms = [];
20+
for (let i = 0; i < 5; i++) {
21+
mushrooms.push({
22+
x: Math.random() * (canvas.width - 60) + 30,
23+
y: Math.random() * (canvas.height - 60) + 30
24+
});
25+
}
26+
}
27+
28+
// Draw mushroom
29+
function drawMushroom(x, y) {
30+
// Cap
31+
ctx.fillStyle = mushroomColors.cap;
32+
ctx.beginPath();
33+
ctx.ellipse(x, y - 10, 15, 15, 0, 0, Math.PI * 2);
34+
ctx.fill();
35+
36+
// White spots
37+
ctx.fillStyle = 'white';
38+
ctx.beginPath();
39+
ctx.arc(x - 5, y - 12, 3, 0, Math.PI * 2);
40+
ctx.arc(x + 5, y - 8, 2, 0, Math.PI * 2);
41+
ctx.fill();
42+
43+
// Stem
44+
ctx.fillStyle = mushroomColors.stem;
45+
ctx.fillRect(x - 5, y, 10, 20);
46+
}
47+
48+
// Draw flower
49+
function drawFlower(x, y) {
50+
const color = flowerColors[Math.floor(Math.random() * flowerColors.length)];
51+
52+
// Petals
53+
ctx.fillStyle = color;
54+
for (let i = 0; i < 8; i++) {
55+
const angle = (Math.PI * 2 * i) / 8;
56+
const petalX = x + Math.cos(angle) * 8;
57+
const petalY = y + Math.sin(angle) * 8;
58+
ctx.beginPath();
59+
ctx.arc(petalX, petalY, 5, 0, Math.PI * 2);
60+
ctx.fill();
61+
}
62+
63+
// Center
64+
ctx.fillStyle = '#FFD700';
65+
ctx.beginPath();
66+
ctx.arc(x, y, 4, 0, Math.PI * 2);
67+
ctx.fill();
68+
69+
// Stem
70+
ctx.strokeStyle = '#2E7D32';
71+
ctx.lineWidth = 2;
72+
ctx.beginPath();
73+
ctx.moveTo(x, y);
74+
ctx.lineTo(x, y + 15);
75+
ctx.stroke();
76+
}
77+
78+
// Draw character
79+
function drawCharacter() {
80+
ctx.fillStyle = '#3498db';
81+
ctx.beginPath();
82+
ctx.arc(character.x, character.y, character.size / 2, 0, Math.PI * 2);
83+
ctx.fill();
84+
85+
// Outline
86+
ctx.strokeStyle = '#2980b9';
87+
ctx.lineWidth = 2;
88+
ctx.stroke();
89+
}
90+
91+
// Check collision between character and mushroom
92+
function checkCollision(mouseX, mouseY, mushroom) {
93+
const distance = Math.sqrt(
94+
Math.pow(mouseX - mushroom.x, 2) +
95+
Math.pow(mouseY - mushroom.y, 2)
96+
);
97+
return distance < 20; // Collision radius
98+
}
99+
100+
// Draw everything
101+
function draw() {
102+
// Clear canvas
103+
ctx.clearRect(0, 0, canvas.width, canvas.height);
104+
105+
// Draw flowers
106+
flowers.forEach(flower => {
107+
drawFlower(flower.x, flower.y);
108+
});
109+
110+
// Draw mushrooms
111+
mushrooms.forEach(mushroom => {
112+
drawMushroom(mushroom.x, mushroom.y);
113+
});
114+
115+
// Draw character
116+
drawCharacter();
117+
}
118+
119+
// Update UI
120+
function updateUI() {
121+
document.getElementById('score').textContent = score;
122+
document.getElementById('lives').textContent = lives;
123+
document.getElementById('time').textContent = timeRemaining;
124+
}
125+
126+
// Handle click
127+
canvas.addEventListener('click', (e) => {
128+
if (gameOver) return;
129+
130+
const rect = canvas.getBoundingClientRect();
131+
const x = e.clientX - rect.left;
132+
const y = e.clientY - rect.top;
133+
134+
// Move character
135+
character.x = x;
136+
character.y = y;
137+
138+
// Check mushroom collision
139+
let hitMushroom = false;
140+
mushrooms = mushrooms.filter(mushroom => {
141+
if (checkCollision(x, y, mushroom)) {
142+
lives--;
143+
updateUI();
144+
hitMushroom = true;
145+
146+
if (lives <= 0) {
147+
endGame('Game Over! 💀');
148+
}
149+
return false;
150+
}
151+
return true;
152+
});
153+
154+
// If didn't hit mushroom, plant flower
155+
if (!hitMushroom) {
156+
flowers.push({ x, y });
157+
score++;
158+
updateUI();
159+
}
160+
161+
// Respawn mushrooms
162+
if (mushrooms.length < 5) {
163+
mushrooms.push({
164+
x: Math.random() * (canvas.width - 60) + 30,
165+
y: Math.random() * (canvas.height - 60) + 30
166+
});
167+
}
168+
169+
draw();
170+
});
171+
172+
// Timer
173+
function startTimer() {
174+
const timer = setInterval(() => {
175+
if (gameOver) {
176+
clearInterval(timer);
177+
return;
178+
}
179+
180+
timeRemaining--;
181+
updateUI();
182+
183+
if (timeRemaining <= 0) {
184+
clearInterval(timer);
185+
endGame("Time's Up! ⏰");
186+
}
187+
}, 1000);
188+
}
189+
190+
// End game
191+
function endGame(message) {
192+
gameOver = true;
193+
document.getElementById('finalMessage').textContent = message;
194+
document.getElementById('finalScore').textContent = score;
195+
document.getElementById('gameOverScreen').style.display = 'block';
196+
}
197+
198+
// Restart game
199+
function restartGame() {
200+
score = 0;
201+
lives = 3;
202+
timeRemaining = 60;
203+
gameOver = false;
204+
flowers = [];
205+
character = { x: 200, y: 200, size: 10 };
206+
207+
document.getElementById('gameOverScreen').style.display = 'none';
208+
209+
initMushrooms();
210+
updateUI();
211+
draw();
212+
startTimer();
213+
}
214+
215+
// Initialize game
216+
initMushrooms();
217+
draw();
218+
updateUI();
219+
startTimer();

0 commit comments

Comments
 (0)