swapnilsparsh · swapnilsparsh · Oct 13, 2025 · Oct 11, 2025 · Oct 11, 2025 · Oct 11, 2025
diff --git a/data.json b/data.json
@@ -628,5 +628,11 @@
     "id": 126,
     "name": "Arcade Game",
     "description": "Play a variety of arcade-style games with simple controls and gameplay."
-  }
+  },
+{
+  "id": 127,
+    "name": "Flower Garden Game",
+    "description": "Plant flowers and avoid mushrooms in this fun timer-based game."
+}
+
 ]
diff --git a/projects/flower-garden-game/README.md b/projects/flower-garden-game/README.md
@@ -0,0 +1,31 @@
+## 🌸 Flower Garden Game
+
+### Description
+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.
+
+### Features
+- ⏱️ 60-second countdown timer
+- ❤️ Lives system (3 hearts)
+- 🍄 Randomly spawning mushrooms as obstacles
+- 🌼 Multiple colorful flower varieties
+- 🎮 Real-time score tracking
+- 🔄 Restart functionality
+- 📱 Responsive design
+
+### How to Play
+- Click anywhere on the canvas to plant a flower (+1 point)
+- Avoid clicking on mushrooms (-1 life)
+- Try to get the highest score within 60 seconds!
+
+### Technologies
+- HTML5
+- CSS3
+- Vanilla JavaScript
+- Canvas API
+
+### Screenshots
+![Gameplay](Screenshot/screenshot.png)
+
+---
+
+**Note:** This is a JavaScript adaptation of my original Python game, showcasing canvas manipulation, event handling, and game logic implementation.
diff --git a/projects/flower-garden-game/index.html b/projects/flower-garden-game/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flower Garden Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="game-container">
+        <h1>🌸 Flower Garden Game 🌸</h1>
+        <p class="instructions">
+            Plant as many flowers as you can within 60 seconds!<br>
+            <strong>Avoid the mushrooms</strong> - clicking them costs a life! ❤️
+        </p>
+
+        <div class="game-info">
+            <div class="info-item">
+                🌼 Score: <span id="score">0</span>
+            </div>
+            <div class="info-item hearts">
+                ❤️ Lives: <span id="lives">3</span>
+            </div>
+            <div class="info-item">
+                ⏱️ Time: <span id="time">60</span>s
+            </div>
+        </div>
+
+        <canvas id="gameCanvas" width="400" height="400"></canvas>
+
+        <div id="gameOverScreen" class="game-over">
+            <div id="finalMessage">Time's Up!</div>
+            <div style="font-size: 18px; margin-top: 10px;">
+                Final Score: <span id="finalScore">0</span>
+            </div>
+            <button class="restart-btn" onclick="restartGame()">Play Again</button>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/projects/flower-garden-game/script.js b/projects/flower-garden-game/script.js
@@ -0,0 +1,219 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+// Game state
+let score = 0;
+let lives = 3;
+let timeRemaining = 60;
+let gameOver = false;
+let mushrooms = [];
+let flowers = [];
+let character = { x: 200, y: 200, size: 10 };
+
+// Colors
+const flowerColors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE'];
+const mushroomColors = { cap: '#E74C3C', stem: '#F5DEB3' };
+
+// Initialize mushrooms
+function initMushrooms() {
+    mushrooms = [];
+    for (let i = 0; i < 5; i++) {
+        mushrooms.push({
+            x: Math.random() * (canvas.width - 60) + 30,
+            y: Math.random() * (canvas.height - 60) + 30
+        });
+    }
+}
+
+// Draw mushroom
+function drawMushroom(x, y) {
+    // Cap
+    ctx.fillStyle = mushroomColors.cap;
+    ctx.beginPath();
+    ctx.ellipse(x, y - 10, 15, 15, 0, 0, Math.PI * 2);
+    ctx.fill();
+
+    // White spots
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.arc(x - 5, y - 12, 3, 0, Math.PI * 2);
+    ctx.arc(x + 5, y - 8, 2, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Stem
+    ctx.fillStyle = mushroomColors.stem;
+    ctx.fillRect(x - 5, y, 10, 20);
+}
+
+// Draw flower
+function drawFlower(x, y) {
+    const color = flowerColors[Math.floor(Math.random() * flowerColors.length)];
+
+    // Petals
+    ctx.fillStyle = color;
+    for (let i = 0; i < 8; i++) {
+        const angle = (Math.PI * 2 * i) / 8;
+        const petalX = x + Math.cos(angle) * 8;
+        const petalY = y + Math.sin(angle) * 8;
+        ctx.beginPath();
+        ctx.arc(petalX, petalY, 5, 0, Math.PI * 2);
+        ctx.fill();
+    }
+
+    // Center
+    ctx.fillStyle = '#FFD700';
+    ctx.beginPath();
+    ctx.arc(x, y, 4, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Stem
+    ctx.strokeStyle = '#2E7D32';
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(x, y);
+    ctx.lineTo(x, y + 15);
+    ctx.stroke();
+}
+
+// Draw character
+function drawCharacter() {
+    ctx.fillStyle = '#3498db';
+    ctx.beginPath();
+    ctx.arc(character.x, character.y, character.size / 2, 0, Math.PI * 2);
+    ctx.fill();
+
+    // Outline
+    ctx.strokeStyle = '#2980b9';
+    ctx.lineWidth = 2;
+    ctx.stroke();
+}
+
+// Check collision between character and mushroom
+function checkCollision(mouseX, mouseY, mushroom) {
+    const distance = Math.sqrt(
+        Math.pow(mouseX - mushroom.x, 2) + 
+        Math.pow(mouseY - mushroom.y, 2)
+    );
+    return distance < 20; // Collision radius
+}
+
+// Draw everything
+function draw() {
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw flowers
+    flowers.forEach(flower => {
+        drawFlower(flower.x, flower.y);
+    });
+
+    // Draw mushrooms
+    mushrooms.forEach(mushroom => {
+        drawMushroom(mushroom.x, mushroom.y);
+    });
+
+    // Draw character
+    drawCharacter();
+}
+
+// Update UI
+function updateUI() {
+    document.getElementById('score').textContent = score;
+    document.getElementById('lives').textContent = lives;
+    document.getElementById('time').textContent = timeRemaining;
+}
+
+// Handle click
+canvas.addEventListener('click', (e) => {
+    if (gameOver) return;
+
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    // Move character
+    character.x = x;
+    character.y = y;
+
+    // Check mushroom collision
+    let hitMushroom = false;
+    mushrooms = mushrooms.filter(mushroom => {
+        if (checkCollision(x, y, mushroom)) {
+            lives--;
+            updateUI();
+            hitMushroom = true;
+
+            if (lives <= 0) {
+                endGame('Game Over! 💀');
+            }
+            return false;
+        }
+        return true;
+    });
+
+    // If didn't hit mushroom, plant flower
+    if (!hitMushroom) {
+        flowers.push({ x, y });
+        score++;
+        updateUI();
+    }
+
+    // Respawn mushrooms
+    if (mushrooms.length < 5) {
+        mushrooms.push({
+            x: Math.random() * (canvas.width - 60) + 30,
+            y: Math.random() * (canvas.height - 60) + 30
+        });
+    }
+
+    draw();
+});
+
+// Timer
+function startTimer() {
+    const timer = setInterval(() => {
+        if (gameOver) {
+            clearInterval(timer);
+            return;
+        }
+
+        timeRemaining--;
+        updateUI();
+
+        if (timeRemaining <= 0) {
+            clearInterval(timer);
+            endGame("Time's Up! ⏰");
+        }
+    }, 1000);
+}
+
+// End game
+function endGame(message) {
+    gameOver = true;
+    document.getElementById('finalMessage').textContent = message;
+    document.getElementById('finalScore').textContent = score;
+    document.getElementById('gameOverScreen').style.display = 'block';
+}
+
+// Restart game
+function restartGame() {
+    score = 0;
+    lives = 3;
+    timeRemaining = 60;
+    gameOver = false;
+    flowers = [];
+    character = { x: 200, y: 200, size: 10 };
+
+    document.getElementById('gameOverScreen').style.display = 'none';
+
+    initMushrooms();
+    updateUI();
+    draw();
+    startTimer();
+}
+
+// Initialize game
+initMushrooms();
+draw();
+updateUI();
+startTimer();