Spaces:

furuknap
/

pvzclone

Running

App Files Files Community

furuknap commited on Mar 29, 2025

Commit

ae970f3

verified ·

1 Parent(s): ce0ef5a

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1152 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Pvzclone
-emoji: 🏃
-colorFrom: green
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: pvzclone
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1152 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plants vs Zombies Clone</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background-color: #2c3e50;
+            font-family: 'Press Start 2P', cursive;
+            overflow: hidden;
+            color: #ecf0f1;
+        }
+        #game-container {
+            width: 100vw;
+            height: 100vh;
+            position: relative;
+            background-image: linear-gradient(#5da130, #3b7a1f);
+        }
+        #lawn {
+            width: 100%;
+            height: calc(100% - 120px);
+            position: relative;
+            display: grid;
+            grid-template-columns: repeat(9, 1fr);
+            grid-template-rows: repeat(5, 1fr);
+        }
+        .lawn-cell {
+            border: 1px dashed rgba(255, 255, 255, 0.2);
+            position: relative;
+        }
+        #ui-container {
+            height: 120px;
+            background-color: #4a2512;
+            border-top: 4px solid #6d4724;
+            display: flex;
+            justify-content: space-between;
+            padding: 10px;
+        }
+        #sun-counter {
+            width: 100px;
+            height: 100px;
+            background-color: #f1c40f;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 24px;
+            color: #e67e22;
+            box-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
+            position: relative;
+        }
+        #plant-selection {
+            display: flex;
+            gap: 10px;
+        }
+        .plant-option {
+            width: 80px;
+            height: 100px;
+            background-color: #3498db;
+            border-radius: 10px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+            padding: 5px;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 3px solid transparent;
+        }
+        .plant-option:hover {
+            transform: scale(1.05);
+        }
+        .plant-option.selected {
+            border-color: #f1c40f;
+            box-shadow: 0 0 10px rgba(241, 196, 15, 0.8);
+        }
+        .plant-option .plant-icon {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+        .plant-option .cost {
+            font-size: 12px;
+            color: #f1c40f;
+        }
+        /* Plant elements */
+        .plant {
+            width: 80%;
+            height: 80%;
+            position: absolute;
+            top: 10%;
+            left: 10%;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            z-index: 10;
+        }
+        .sunflower .plant {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="yellow"/><circle cx="25" cy="25" r="10" fill="orange"/><path d="M10,25 Q25,10 40,25 Q25,40 10,25" fill="yellow"/><path d="M25,10 Q40,25 25,40 Q10,25 25,10" fill="yellow"/></svg>');
+        }
+        .peashooter .plant {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><ellipse cx="25" cy="30" rx="15" ry="20" fill="green"/><circle cx="25" cy="15" r="10" fill="lime"/><circle cx="30" cy="12" r="3" fill="black"/></svg>');
+        }
+        .wallnut .plant {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="saddlebrown"/><path d="M15,15 Q25,10 35,15 Q40,25 35,35 Q25,40 15,35 Q10,25 15,15" fill="peru"/></svg>');
+        }
+        /* Projectiles */
+        .pea {
+            width: 15px;
+            height: 15px;
+            background-color: lime;
+            border-radius: 50%;
+            position: absolute;
+            z-index: 20;
+        }
+        /* Zombie elements */
+        .zombie {
+            width: 60px;
+            height: 100px;
+            position: absolute;
+            right: -60px;
+            background-size: contain;
+            background-repeat: no-repeat;
+            background-position: center;
+            z-index: 5;
+            animation: zombie-walk 3s linear infinite;
+        }
+        @keyframes zombie-walk {
+            0% { transform: translateX(0); }
+            50% { transform: translateX(-5px) rotate(2deg); }
+            100% { transform: translateX(0); }
+        }
+        .basic-zombie {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="15" r="10" fill="darkgreen"/><rect x="15" y="25" width="20" height="15" fill="green"/><circle cx="20" cy="12" r="2" fill="black"/><circle cx="30" cy="12" r="2" fill="black"/></svg>');
+        }
+        .conehead-zombie {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path d="M15,5 L35,5 L25,15 Z" fill="gray"/><circle cx="25" cy="15" r="10" fill="darkgreen"/><rect x="15" y="25" width="20" height="15" fill="green"/><circle cx="20" cy="12" r="2" fill="black"/><circle cx="30" cy="12" r="2" fill="black"/></svg>');
+        }
+        .buckethead-zombie {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="15" r="10" fill="darkgreen"/><rect x="20" y="15" width="10" height="10" fill="silver"/><rect x="15" y="25" width="20" height="15" fill="green"/><circle cx="20" cy="12" r="2" fill="black"/><circle cx="30" cy="12" r="2" fill="black"/></svg>');
+        }
+        /* Sun elements */
+        .sun {
+            width: 50px;
+            height: 50px;
+            position: absolute;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><circle cx="25" cy="25" r="15" fill="yellow"/></svg>');
+            background-size: contain;
+            cursor: pointer;
+            z-index: 30;
+            animation: sun-fall 6s linear, sun-spin 2s linear infinite;
+        }
+        @keyframes sun-fall {
+            0% { transform: translateY(-100px); opacity: 0; }
+            10% { opacity: 1; }
+            90% { opacity: 1; }
+            100% { transform: translateY(calc(100vh - 170px)); opacity: 0; }
+        }
+        @keyframes sun-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        /* Game messages */
+        .game-message {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 2rem;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 20px 40px;
+            border-radius: 10px;
+            z-index: 100;
+            display: none;
+        }
+        #start-screen {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 20px;
+        }
+        #start-screen h1 {
+            font-size: 3rem;
+            color: #f1c40f;
+            text-shadow: 5px 5px #e67e22;
+        }
+        #start-button {
+            padding: 15px 30px;
+            background-color: #e74c3c;
+            border: none;
+            border-radius: 10px;
+            font-family: 'Press Start 2P', cursive;
+            font-size: 1.2rem;
+            color: white;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        #start-button:hover {
+            transform: scale(1.1);
+            background-color: #c0392b;
+        }
+        #level-select {
+            display: flex;
+            gap: 20px;
+        }
+        .level-button {
+            padding: 10px 20px;
+            background-color: #3498db;
+            border: none;
+            border-radius: 5px;
+            font-family: 'Press Start 2P', cursive;
+            font-size: 0.8rem;
+            color: white;
+            cursor: pointer;
+        }
+        .level-button:hover {
+            background-color: #2980b9;
+        }
+        /* Progress bars */
+        .health-bar {
+            width: 100%;
+            height: 5px;
+            background-color: #2ecc71;
+            position: absolute;
+            bottom: -10px;
+            left: 0;
+        }
+        #wave-indicator {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            background-color: rgba(0, 0, 0, 0.5);
+            padding: 5px 10px;
+            border-radius: 5px;
+            z-index: 50;
+        }
+        /* Plant cooldown indicator */
+        .cooldown-overlay {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background-color: rgba(0, 0, 0, 0.5);
+            transition: height 0.5s linear;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="start-screen" class="game-message">
+            <h1>PLANTS vs ZOMBIES</h1>
+            <div id="level-select">
+                <button class="level-button" data-level="1">Backyard Day</button>
+                <button class="level-button" data-level="2">Backyard Night</button>
+            </div>
+            <button id="start-button">START GAME</button>
+        </div>
+        <div id="game-over-message" class="game-message">
+            <h2>GAME OVER</h2>
+            <p id="game-over-text"></p>
+            <button id="restart-button">TRY AGAIN</button>
+        </div>
+        <div id="wave-indicator">Wave: 1</div>
+        <div id="lawn"></div>
+        <div id="ui-container">
+            <div id="sun-counter">0</div>
+            <div id="plant-selection">
+                <div class="plant-option" data-plant="sunflower" data-cost="50">
+                    <div class="plant-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"yellow\"/><circle cx=\"25\" cy=\"25\" r=\"10\" fill=\"orange\"/></svg>')"></div>
+                    <div class="cost">50</div>
+                </div>
+                <div class="plant-option" data-plant="peashooter" data-cost="100">
+                    <div class="plant-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><ellipse cx=\"25\" cy=\"30\" rx=\"15\" ry=\"20\" fill=\"green\"/><circle cx=\"25\" cy=\"15\" r=\"10\" fill=\"lime\"/></svg>')"></div>
+                    <div class="cost">100</div>
+                </div>
+                <div class="plant-option" data-plant="wallnut" data-cost="50">
+                    <div class="plant-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 50 50\"><circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"saddlebrown\"/></svg>')"></div>
+                    <div class="cost">50</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game state
+        const gameState = {
+            suns: 50,
+            selectedPlant: null,
+            plants: [],
+            zombies: [],
+            projectiles: [],
+            sunDrops: [],
+            currentWave: 0,
+            totalWaves: 5,
+            gameActive: false,
+            currentLevel: 1,
+            zombieSpeed: 0.5,
+            gameClock: 0,
+            lastSunProduced: 0,
+            lastZombieSpawned: 0,
+            plantCooldowns: {
+                sunflower: 0,
+                peashooter: 0,
+                wallnut: 0
+            },
+            zombiesReachedEnd: 0
+        };
+        // Plant properties
+        const plantProperties = {
+            sunflower: {
+                cost: 50,
+                health: 100,
+                cooldown: 10,
+                produceSunInterval: 10,
+                produceSunAmount: 25
+            },
+            peashooter: {
+                cost: 100,
+                health: 100,
+                cooldown: 7.5,
+                shootInterval: 3,
+                damage: 20
+            },
+            wallnut: {
+                cost: 50,
+                health: 400,
+                cooldown: 30,
+                damage: 0
+            }
+        };
+        // Zombie properties
+        const zombieProperties = {
+            basic: {
+                health: 100,
+                damage: 1,
+                speed: 0.5, // px per frame
+                value: 10
+            },
+            conehead: {
+                health: 200,
+                damage: 1,
+                speed: 0.4,
+                value: 20
+            },
+            buckethead: {
+                health: 300,
+                damage: 2,
+                speed: 0.3,
+                value: 30
+            }
+        };
+        // Level definitions
+        const levels = {
+            1: {
+                name: "Backyard Day",
+                background: "#5da130",
+                zombieTypes: ["basic", "conehead"],
+                waves: [
+                    { delay: 5, zombies: 5, zombieTypeWeights: [0.8, 0.2] },
+                    { delay: 15, zombies: 8, zombieTypeWeights: [0.7, 0.3] },
+                    { delay: 25, zombies: 12, zombieTypeWeights: [0.6, 0.4] },
+                    { delay: 35, zombies: 15, zombieTypeWeights: [0.5, 0.5] },
+                    { delay: 45, zombies: 20, zombieTypeWeights: [0.4, 0.6] }
+                ]
+            },
+            2: {
+                name: "Backyard Night",
+                background: "#1a2330",
+                zombieTypes: ["basic", "conehead", "buckethead"],
+                waves: [
+                    { delay: 5, zombies: 6, zombieTypeWeights: [0.6, 0.3, 0.1] },
+                    { delay: 15, zombies: 10, zombieTypeWeights: [0.5, 0.3, 0.2] },
+                    { delay: 25, zombies: 14, zombieTypeWeights: [0.4, 0.3, 0.3] },
+                    { delay: 35, zombies: 18, zombieTypeWeights: [0.3, 0.3, 0.4] },
+                    { delay: 45, zombies: 25, zombieTypeWeights: [0.2, 0.3, 0.5] }
+                ]
+            }
+        };
+        // DOM elements
+        const gameContainer = document.getElementById('game-container');
+        const lawn = document.getElementById('lawn');
+        const sunCounter = document.getElementById('sun-counter');
+        const plantSelection = document.getElementById('plant-selection');
+        const plantOptions = document.querySelectorAll('.plant-option');
+        const startScreen = document.getElementById('start-screen');
+        const gameOverMessage = document.getElementById('game-over-message');
+        const gameOverText = document.getElementById('game-over-text');
+        const startButton = document.getElementById('start-button');
+        const restartButton = document.getElementById('restart-button');
+        const levelButtons = document.querySelectorAll('.level-button');
+        const waveIndicator = document.getElementById('wave-indicator');
+        // Initialize the game
+        function initLawn() {
+            lawn.innerHTML = '';
+            for (let i = 0; i < 5; i++) {
+                for (let j = 0; j < 9; j++) {
+                    const cell = document.createElement('div');
+                    cell.className = 'lawn-cell';
+                    cell.dataset.row = i;
+                    cell.dataset.col = j;
+                    cell.addEventListener('click', placePlant);
+                    lawn.appendChild(cell);
+                }
+            }
+        }
+        // Initialize event listeners
+        function initEventListeners() {
+            plantOptions.forEach(option => {
+                option.addEventListener('click', () => {
+                    const plantType = option.dataset.plant;
+                    const plantCost = parseInt(option.dataset.cost);
+                    if (gameState.plantCooldowns[plantType] > 0) return;
+                    if (gameState.selectedPlant === plantType) {
+                        gameState.selectedPlant = null;
+                        plantOptions.forEach(opt => opt.classList.remove('selected'));
+                    } else if (gameState.suns >= plantCost) {
+                        gameState.selectedPlant = plantType;
+                        plantOptions.forEach(opt => opt.classList.remove('selected'));
+                        option.classList.add('selected');
+                    }
+                });
+            });
+            document.addEventListener('click', (e) => {
+                if (e.target === gameContainer || e.target === lawn) {
+                    gameState.selectedPlant = null;
+                    plantOptions.forEach(opt => opt.classList.remove('selected'));
+                }
+            });
+            startButton.addEventListener('click', startGame);
+            restartButton.addEventListener('click', resetGame);
+            levelButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    const level = parseInt(button.dataset.level);
+                    selectLevel(level);
+                });
+            });
+        }
+        // Select level
+        function selectLevel(level) {
+            gameState.currentLevel = level;
+            levelButtons.forEach(button => {
+                button.style.backgroundColor = button.dataset.level == level ? '#2980b9' : '#3498db';
+            });
+        }
+        // Start game
+        function startGame() {
+            if (gameState.gameActive) return;
+            gameState.gameActive = true;
+            gameState.suns = 50;
+            gameState.plants = [];
+            gameState.zombies = [];
+            gameState.projectiles = [];
+            gameState.sunDrops = [];
+            gameState.currentWave = 0;
+            gameState.gameClock = 0;
+            gameState.lastSunProduced = 0;
+            gameState.lastZombieSpawned = 0;
+            gameState.zombiesReachedEnd = 0;
+            // Reset plant cooldowns
+            for (const plantType in gameState.plantCooldowns) {
+                gameState.plantCooldowns[plantType] = 0;
+            }
+            // Set background based on level
+            gameContainer.style.backgroundImage = `linear-gradient(${levels[gameState.currentLevel].background}, #3b7a1f)`;
+            // Hide start screen
+            startScreen.style.display = 'none';
+            gameOverMessage.style.display = 'none';
+            // Start game loop
+            gameLoop();
+            // Start random sun drops
+            setInterval(createRandomSun, 10000);
+        }
+        // Reset game
+        function resetGame() {
+            gameState.gameActive = false;
+            // Clear game elements
+            document.querySelectorAll('.plant, .zombie, .pea, .sun').forEach(el => el.remove());
+            // Show start screen
+            startScreen.style.display = 'flex';
+            gameOverMessage.style.display = 'none';
+        }
+        // Place plant
+        function placePlant(e) {
+            if (!gameState.selectedPlant || !gameState.gameActive) return;
+            const row = parseInt(e.currentTarget.dataset.row);
+            const col = parseInt(e.currentTarget.dataset.col);
+            // Check if cell is already occupied
+            const cellOccupied = gameState.plants.some(plant => plant.row === row && plant.col === col);
+            if (cellOccupied) return;
+            const plantType = gameState.selectedPlant;
+            const plantCost = plantProperties[plantType].cost;
+            if (gameState.suns >= plantCost) {
+                // Deduct sun cost
+                gameState.suns -= plantCost;
+                updateSunCounter();
+                // Create plant
+                const plant = {
+                    type: plantType,
+                    row: row,
+                    col: col,
+                    health: plantProperties[plantType].health,
+                    lastActionTime: 0,
+                    element: createPlantElement(plantType, row, col)
+                };
+                gameState.plants.push(plant);
+                // Start cooldown
+                gameState.plantCooldowns[plantType] = plantProperties[plantType].cooldown;
+                updateCooldownDisplay(plantType);
+                // Deselect plant
+                gameState.selectedPlant = null;
+                plantOptions.forEach(opt => opt.classList.remove('selected'));
+            }
+        }
+        // Create plant element
+        function createPlantElement(plantType, row, col) {
+            const plant = document.createElement('div');
+            plant.className = `plant ${plantType}`;
+            // Create health bar
+            const healthBar = document.createElement('div');
+            healthBar.className = 'health-bar';
+            healthBar.style.width = '100%';
+            plant.appendChild(healthBar);
+            // Find the cell and append the plant
+            const cell = document.querySelector(`.lawn-cell[data-row="${row}"][data-col="${col}"]`);
+            cell.appendChild(plant);
+            return plant;
+        }
+        // Create zombie
+        function createZombie(type, row) {
+            const zombie = document.createElement('div');
+            zombie.className = `zombie ${type}-zombie`;
+            // Create health bar
+            const healthBar = document.createElement('div');
+            healthBar.className = 'health-bar';
+            healthBar.style.width = '100%';
+            zombie.appendChild(healthBar);
+            // Position zombie
+            const cellHeight = lawn.clientHeight / 5;
+            zombie.style.top = `${row * cellHeight + cellHeight / 2 - 50}px`;
+            gameContainer.appendChild(zombie);
+            // Add to game state
+            const zombieObj = {
+                type: type,
+                row: row,
+                x: gameContainer.clientWidth,
+                element: zombie,
+                health: zombieProperties[type].health,
+                maxHealth: zombieProperties[type].health,
+                speed: zombieProperties[type].speed * (gameState.currentLevel === 2 ? 0.8 : 1), // Slower at night
+                damage: zombieProperties[type].damage,
+                moving: true
+            };
+            gameState.zombies.push(zombieObj);
+            return zombieObj;
+        }
+        // Create projectile
+        function createProjectile(x, y) {
+            const pea = document.createElement('div');
+            pea.className = 'pea';
+            pea.style.left = `${x}px`;
+            pea.style.top = `${y}px`;
+            gameContainer.appendChild(pea);
+            const projectile = {
+                x: x,
+                y: y,
+                speed: 5,
+                damage: 20,
+                element: pea
+            };
+            gameState.projectiles.push(projectile);
+            return projectile;
+        }
+        // Create sun drop
+        function createSunDrop(x, y, autoCollect = false) {
+            const sun = document.createElement('div');
+            sun.className = 'sun';
+            sun.style.left = `${x}px`;
+            sun.style.top = `${y}px`;
+            if (autoCollect) {
+                // Animation for suns produced by sunflowers
+                sun.style.animation = 'sun-bounce 4s ease-in-out, sun-spin 2s linear infinite';
+            } else {
+                // Regular falling sun animation
+                sun.style.animation = 'sun-fall 6s linear, sun-spin 2s linear infinite';
+            }
+            sun.addEventListener('click', collectSun);
+            gameContainer.appendChild(sun);
+            const sunDrop = {
+                x: x,
+                y: y,
+                element: sun,
+                autoCollect: autoCollect,
+                collected: false,
+                value: 25
+            };
+            gameState.sunDrops.push(sunDrop);
+            if (autoCollect) {
+                // Auto-collect after animation
+                setTimeout(() => {
+                    if (!sunDrop.collected) {
+                        collectSun({ target: sun });
+                    }
+                }, 4000);
+            } else {
+                // Remove if not collected
+                setTimeout(() => {
+                    if (!sunDrop.collected) {
+                        sun.remove();
+                        gameState.sunDrops = gameState.sunDrops.filter(s => s !== sunDrop);
+                    }
+                }, 6000);
+            }
+            return sunDrop;
+        }
+        // Create random sun
+        function createRandomSun() {
+            if (!gameState.gameActive) return;
+            const x = Math.random() * (gameContainer.clientWidth - 100) + 50;
+            createSunDrop(x, -50);
+        }
+        // Collect sun
+        function collectSun(e) {
+            e.stopPropagation();
+            const sunElement = e.target;
+            const sunDrop = gameState.sunDrops.find(sun => sun.element === sunElement);
+            if (sunDrop && !sunDrop.collected) {
+                sunDrop.collected = true;
+                gameState.suns += sunDrop.value;
+                updateSunCounter();
+                // Animate collection
+                sunElement.style.transition = 'all 0.3s ease-out';
+                sunElement.style.transform = 'translateY(-20px) scale(1.5)';
+                sunElement.style.opacity = '0';
+                // Remove after animation
+                setTimeout(() => {
+                    sunElement.remove();
+                    gameState.sunDrops = gameState.sunDrops.filter(s => s !== sunDrop);
+                }, 300);
+            }
+        }
+        // Update sun counter display
+        function updateSunCounter() {
+            sunCounter.textContent = gameState.suns;
+            // Update plant option availability
+            plantOptions.forEach(option => {
+                const plantType = option.dataset.plant;
+                const plantCost = parseInt(option.dataset.cost);
+                if (gameState.suns < plantCost || gameState.plantCooldowns[plantType] > 0) {
+                    option.style.opacity = '0.5';
+                } else {
+                    option.style.opacity = '1';
+                }
+            });
+        }
+        // Update cooldown display
+        function updateCooldownDisplay(plantType) {
+            const option = document.querySelector(`.plant-option[data-plant="${plantType}"]`);
+            if (!option) return;
+            // Remove existing cooldown overlay
+            const existingOverlay = option.querySelector('.cooldown-overlay');
+            if (existingOverlay) existingOverlay.remove();
+            // Create new cooldown overlay
+            const overlay = document.createElement('div');
+            overlay.className = 'cooldown-overlay';
+            overlay.style.height = '100%';
+            option.appendChild(overlay);
+            // Animate cooldown
+            const cooldown = plantProperties[plantType].cooldown;
+            const startTime = Date.now();
+            const animateCooldown = () => {
+                const elapsed = (Date.now() - startTime) / 1000;
+                const remaining = Math.max(0, cooldown - elapsed);
+                overlay.style.height = `${(remaining / cooldown) * 100}%`;
+                if (remaining > 0) {
+                    gameState.plantCooldowns[plantType] = remaining;
+                    requestAnimationFrame(animateCooldown);
+                } else {
+                    gameState.plantCooldowns[plantType] = 0;
+                    overlay.remove();
+                    // Update sun counter to refresh availability
+                    updateSunCounter();
+                }
+            };
+            requestAnimationFrame(animateCooldown);
+        }
+        // Game loop
+        function gameLoop() {
+            if (!gameState.gameActive) return;
+            // Update game clock
+            gameState.gameClock += 0.016; // Assuming 60 FPS
+            // Check for wave completion and spawn new waves
+            checkWaveCompletion();
+            // Update zombies
+            updateZombies();
+            // Update plants
+            updatePlants();
+            // Update projectiles
+            updateProjectiles();
+            // Check game over conditions
+            checkGameOver();
+            // Continue game loop
+            requestAnimationFrame(gameLoop);
+        }
+        // Check wave completion
+        function checkWaveCompletion() {
+            const level = levels[gameState.currentLevel];
+            // Check if we need to start a new wave
+            if (gameState.currentWave < level.waves.length) {
+                const currentWaveData = level.waves[gameState.currentWave];
+                if (gameState.gameClock >= currentWaveData.delay &&
+                    gameState.lastZombieSpawned + 1 < gameState.gameClock &&
+                    gameState.zombies.length < 5 + gameState.currentWave) {
+                    // Spawn zombie
+                    const zombieType = getRandomZombieType(currentWaveData.zombieTypeWeights);
+                    const row = Math.floor(Math.random() * 5);
+                    createZombie(zombieType, row);
+                    // Update last spawned time
+                    gameState.lastZombieSpawned = gameState.gameClock;
+                    // Update wave indicator if this is the first zombie of a new wave
+                    if (gameState.zombies.length === 1) {
+                        waveIndicator.textContent = `Wave: ${gameState.currentWave + 1}/${level.waves.length}`;
+                    }
+                }
+                // Check if we've spawned enough zombies for this wave
+                const zombiesSpawnedThisWave = gameState.zombies.filter(z =>
+                    z.spawnTime >= currentWaveData.delay - 1
+                ).length;
+                if (zombiesSpawnedThisWave >= currentWaveData.zombies &&
+                    gameState.zombies.length === 0 &&
+                    gameState.currentWave < level.waves.length - 1) {
+                    // Move to next wave
+                    gameState.currentWave++;
+                }
+            }
+        }
+        // Get random zombie type based on weights
+        function getRandomZombieType(weights) {
+            const randomValue = Math.random();
+            let cumulativeWeight = 0;
+            for (let i = 0; i < weights.length; i++) {
+                cumulativeWeight += weights[i];
+                if (randomValue < cumulativeWeight) {
+                    return levels[gameState.currentLevel].zombieTypes[i];
+                }
+            }
+            return levels[gameState.currentLevel].zombieTypes[0]; // Fallback
+        }
+        // Update zombies
+        function updateZombies() {
+            const cellWidth = lawn.clientWidth / 9;
+            const cellHeight = lawn.clientHeight / 5;
+            for (let i = gameState.zombies.length - 1; i >= 0; i--) {
+                const zombie = gameState.zombies[i];
+                if (zombie.moving) {
+                    // Move zombie
+                    zombie.x -= zombie.speed;
+                    zombie.element.style.left = `${zombie.x}px`;
+                    // Check if zombie reached left side
+                    if (zombie.x < -zombie.element.clientWidth) {
+                        gameState.zombiesReachedEnd++;
+                        zombie.element.remove();
+                        gameState.zombies.splice(i, 1);
+                        continue;
+                    }
+                    // Check for collision with plants
+                    const zombieRect = {
+                        left: zombie.x,
+                        right: zombie.x + zombie.element.clientWidth,
+                        top: parseInt(zombie.element.style.top),
+                        bottom: parseInt(zombie.element.style.top) + zombie.element.clientHeight
+                    };
+                    // Find plants in the same row
+                    const plantsInRow = gameState.plants.filter(p => p.row === zombie.row);
+                    for (const plant of plantsInRow) {
+                        const cell = document.querySelector(`.lawn-cell[data-row="${plant.row}"][data-col="${plant.col}"]`);
+                        const rect = cell.getBoundingClientRect();
+                        const plantRect = {
+                            left: rect.left - gameContainer.getBoundingClientRect().left,
+                            right: rect.right - gameContainer.getBoundingClientRect().left,
+                            top: rect.top - gameContainer.getBoundingClientRect().top,
+                            bottom: rect.bottom - gameContainer.getBoundingClientRect().top
+                        };
+                        // Simple collision detection
+                        if (zombieRect.right > plantRect.left && zombieRect.left < plantRect.right &&
+                            zombieRect.bottom > plantRect.top && zombieRect.top < plantRect.bottom) {
+                            zombie.moving = false;
+                            // Damage plant
+                            plant.health -= zombie.damage / 60; // Assuming 60 FPS
+                            updatePlantHealth(plant);
+                            // Zombie eats animation
+                            if (Math.random() < 0.02) {
+                                zombie.element.style.transform = 'scaleX(1.1)';
+                                setTimeout(() => {
+                                    if (zombie.element) {
+                                        zombie.element.style.transform = 'scaleX(1)';
+                                    }
+                                }, 100);
+                            }
+                            // Check if plant is dead
+                            if (plant.health <= 0) {
+                                plant.element.remove();
+                                gameState.plants = gameState.plants.filter(p => p !== plant);
+                                zombie.moving = true;
+                            }
+                            break;
+                        }
+                    }
+                }
+                // Update zombie appearance based on health
+                updateZombieHealth(zombie);
+            }
+        }
+        // Update plants
+        function updatePlants() {
+            for (const plant of gameState.plants) {
+                // Sunflower behavior
+                if (plant.type === 'sunflower') {
+                    if (gameState.gameClock - plant.lastActionTime >= plantProperties.sunflower.produceSunInterval) {
+                        plant.lastActionTime = gameState.gameClock;
+                        // Produce sun
+                        const cell = document.querySelector(`.lawn-cell[data-row="${plant.row}"][data-col="${plant.col}"]`);
+                        const rect = cell.getBoundingClientRect();
+                        const x = rect.left - gameContainer.getBoundingClientRect().left + rect.width / 2;
+                        const y = rect.top - gameContainer.getBoundingClientRect().top + rect.height / 2;
+                        createSunDrop(x, y, true);
+                    }
+                }
+                // Peashooter behavior
+                if (plant.type === 'peashooter' && gameState.zombies.some(z => z.row === plant.row)) {
+                    if (gameState.gameClock - plant.lastActionTime >= plantProperties.peashooter.shootInterval) {
+                        plant.lastActionTime = gameState.gameClock;
+                        // Shoot pea
+                        const cell = document.querySelector(`.lawn-cell[data-row="${plant.row}"][data-col="${plant.col}"]`);
+                        const rect = cell.getBoundingClientRect();
+                        const x = rect.right - gameContainer.getBoundingClientRect().left;
+                        const y = rect.top - gameContainer.getBoundingClientRect().top + rect.height / 2;
+                        createProjectile(x, y);
+                    }
+                }
+                // Update plant appearance based on health
+                updatePlantHealth(plant);
+            }
+        }
+        // Update projectiles
+        function updateProjectiles() {
+            for (let i = gameState.projectiles.length - 1; i >= 0; i--) {
+                const projectile = gameState.projectiles[i];
+                // Move projectile
+                projectile.x += projectile.speed;
+                projectile.element.style.left = `${projectile.x}px`;
+                // Remove if off screen
+                if (projectile.x > gameContainer.clientWidth) {
+                    projectile.element.remove();
+                    gameState.projectiles.splice(i, 1);
+                    continue;
+                }
+                // Check for collision with zombies
+                const peaRect = {
+                    left: projectile.x,
+                    right: projectile.x + projectile.element.clientWidth,
+                    top: parseInt(projectile.element.style.top),
+                    bottom: parseInt(projectile.element.style.top) + projectile.element.clientHeight
+                };
+                for (const zombie of gameState.zombies) {
+                    const zombieRect = {
+                        left: zombie.x,
+                        right: zombie.x + zombie.element.clientWidth,
+                        top: parseInt(zombie.element.style.top),
+                        bottom: parseInt(zombie.element.style.top) + zombie.element.clientHeight
+                    };
+                    // Simple collision detection
+                    if (peaRect.right > zombieRect.left && peaRect.left < zombieRect.right &&
+                        peaRect.bottom > zombieRect.top && peaRect.top < zombieRect.bottom) {
+                        // Damage zombie
+                        zombie.health -= projectile.damage;
+                        // Update zombie appearance
+                        updateZombieHealth(zombie);
+                        // Remove projectile
+                        projectile.element.remove();
+                        gameState.projectiles.splice(i, 1);
+                        // Check if zombie is dead
+                        if (zombie.health <= 0) {
+                            // Add suns
+                            gameState.suns += zombieProperties[zombie.type].value;
+                            updateSunCounter();
+                            // Remove zombie
+                            zombie.element.remove();
+                            gameState.zombies = gameState.zombies.filter(z => z !== zombie);
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        // Update plant health display
+        function updatePlantHealth(plant) {
+            const healthPercent = Math.max(0, plant.health / plantProperties[plant.type].health * 100);
+            const healthBar = plant.element.querySelector('.health-bar');
+            if (healthBar) {
+                healthBar.style.width = `${healthPercent}%`;
+                healthBar.style.backgroundColor = healthPercent > 50 ? '#2ecc71' :
+                                                 healthPercent > 25 ? '#f39c12' :
+                                                 '#e74c3c';
+            }
+        }
+        // Update zombie health display
+        function updateZombieHealth(zombie) {
+            const healthPercent = Math.max(0, zombie.health / zombie.maxHealth * 100);
+            const healthBar = zombie.element.querySelector('.health-bar');
+            if (healthBar) {
+                healthBar.style.width = `${healthPercent}%`;
+                // Visual damage effects
+                if (healthPercent < 50) {
+                    zombie.element.style.filter = 'brightness(0.8)';
+                }
+                if (healthPercent < 25) {
+                    zombie.element.style.filter = 'brightness(0.6) hue-rotate(30deg)';
+                }
+            }
+        }
+        // Check game over conditions
+        function checkGameOver() {
+            // Check for too many zombies reaching the end
+            if (gameState.zombiesReachedEnd >= 5) {
+                endGame(false);
+                return;
+            }
+            // Check for level completion
+            const level = levels[gameState.currentLevel];
+            if (gameState.currentWave >= level.waves.length - 1 &&
+                gameState.zombies.length === 0 &&
+                gameState.gameClock - gameState.lastZombieSpawned > 5) {
+                endGame(true);
+                return;
+            }
+        }
+        // End game
+        function endGame(victory) {
+            gameState.gameActive = false;
+            gameOverText.textContent = victory ?
+                `You survived the zombie attack! Final score: ${gameState.suns}` :
+                `The zombies ate your brains! You survived ${gameState.currentWave + 1} waves.`;
+            gameOverMessage.style.display = 'flex';
+        }
+        // Initialize the game
+        function initGame() {
+            initLawn();
+            initEventListeners();
+            // Select first level by default
+            selectLevel(1);
+            // Show start screen
+            startScreen.style.display = 'flex';
+        }
+        // Start the game
+        window.onload = initGame;
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>