diff --git a/data.json b/data.json index 2e23e23f..3c60e93c 100644 --- 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 new file mode 100644 index 00000000..3ac83f48 --- /dev/null +++ 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 new file mode 100644 index 00000000..55fdcaab --- /dev/null +++ b/projects/flower-garden-game/index.html @@ -0,0 +1,42 @@ + + + + + + Flower Garden Game + + + +
+

🌸 Flower Garden Game 🌸

+

+ Plant as many flowers as you can within 60 seconds!
+ Avoid the mushrooms - clicking them costs a life! ❤️ +

+ +
+
+ 🌼 Score: 0 +
+
+ ❤️ Lives: 3 +
+
+ ⏱️ Time: 60s +
+
+ + + +
+
Time's Up!
+
+ Final Score: 0 +
+ +
+
+ + + + diff --git a/projects/flower-garden-game/script.js b/projects/flower-garden-game/script.js new file mode 100644 index 00000000..56d3715b --- /dev/null +++ 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(); diff --git a/projects/flower-garden-game/style.css b/projects/flower-garden-game/style.css new file mode 100644 index 00000000..b7fc9b1f --- /dev/null +++ b/projects/flower-garden-game/style.css @@ -0,0 +1,95 @@ + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + body { + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #009393 0%, #764ba2 100%); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + padding: 20px; + } + + .game-container { + background: white; + border-radius: 20px; + padding: 30px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + max-width: 500px; + } + + h1 { + text-align: center; + color: #408080; + margin-bottom: 10px; + } + + .instructions { + text-align: center; + color: #666; + margin-bottom: 20px; + font-size: 14px; + line-height: 1.6; + } + + .game-info { + display: flex; + justify-content: space-between; + margin-bottom: 15px; + font-weight: bold; + color: #333; + } + + .info-item { + display: flex; + align-items: center; + gap: 5px; + } + + #gameCanvas { + border: 3px solid #667eea; + border-radius: 10px; + cursor: crosshair; + display: block; + background: #f0f8ff; + } + + .game-over { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, 0.8); + color: white; + padding: 30px 50px; + border-radius: 15px; + text-align: center; + font-size: 24px; + font-weight: bold; + display: none; + } + + .restart-btn { + margin-top: 20px; + padding: 10px 30px; + background: #667eea; + color: white; + border: none; + border-radius: 10px; + cursor: pointer; + font-size: 16px; + transition: 0.3s; + } + + .restart-btn:hover { + background: #764ba2; + transform: translateY(-2px); + } + + .hearts { + color: #e74c3c; + } diff --git a/public/assets/127.png b/public/assets/127.png new file mode 100644 index 00000000..514f7875 Binary files /dev/null and b/public/assets/127.png differ