---
title: "Tiny Garden"
url: "https://aigamehub.app/en/games/tiny-garden-899983"
source: "https://github.com/afiaanjumpreety/tiny-garden"
source_type: "github"
play_url: "https://afiaanjumpreety.github.io/tiny-garden/"
platform: "both"
login_required: false
pricing: "free"
origin: "original"
ai_tools: []
game_languages: ["en"]
author: "afiaanjumpreety"
author_handle: "afiaanjumpreety"
category: "Action"
categories: ["action", "casual"]
tags: ["cozy", "mobile-friendly", "pixel-art", "pixijs", "single-screen"]
added: "2026-10-27T02:54:36.829Z"
updated: "2026-10-27T02:54:36.830Z"
locale: "en"
content_locale: "en"
---

# Tiny Garden

A cozy one-screen browser game where you catch falling water and sunlight, dodge hungry bugs, and grow a potted plant through five pixel-art stages to full bloom.

## Description

Move with the arrow keys or A/D, drag across the canvas, or use the on-screen arrow buttons on mobile. Water drops score 10 points and sunbeams 15; bugs and three missed resources each cost one health leaf. Reach 400 points to fully bloom. Pace and bug frequency increase over time, and high scores plus the sound setting are stored in localStorage. Pause with P, Escape or the pause button. The game is built with TypeScript, PixiJS 8, Vite and plain CSS, with all artwork, particles, animation and sound generated in code; it runs in the browser or locally via npm install and npm run dev.

## Original post

a cozy catch-and-grow browser game built with TypeScript and PixiJS

Topics: browser-game, cozy-game, pixi-js, pixijs, vibe-coding

# Tiny Garden 🌱 A cozy, one-screen browser game about helping a tiny potted plant reach full bloom. Catch falling water and sunlight, dodge hungry bugs, and grow through five pastel pixel-art stages as the sky shifts from day to night. Built as a portfolio project with **TypeScript**, **PixiJS 8**, **Vite**, and plain CSS. All artwork, particles, animation, and sound are generated in code, so there are no external image or audio assets to manage. I created this project through **vibe coding**, directing the game concept, pixel-art style, mechanics, and iterative refinements while using AI-assisted development to bring it to life. **Play online:** [https://afiaanjumpreety.github.io/tiny-garden/](https://afiaanjumpreety.github.io/tiny-garden/) ## Screenshots ### Start your tiny garden ![Tiny Garden starting screen](docs/screenshots/start-view.png) ### Catch, dodge, and grow ![Tiny Garden gameplay with falling water, sunlight, and bugs](docs/screenshots/gameplay-view.png) ### Reach full bloom <p align="center"> <img src="docs/screenshots/full-bloom-view.png" alt="Tiny Garden fully bloomed victory screen" width="720" /> </p> ## Play ```bash npm install npm run dev ``` Then open the local URL printed by Vite. ## Controls - Move with `←` / `→` or `A` / `D` - Drag across the game canvas on a mouse or touchscreen - Use the on-screen arrow buttons on mobile - Pause with `P`, `Escape`, or the pause button ## Rules - Water drops are worth 10 points - Sunbeams are worth 15 points - Bugs remove one health leaf - Every three missed resources wilts one health leaf - Reach 400 points to fully bloom The pace and bug frequency increase over time. High scores and the sound preference are saved in `localStorage`. ## Highlights - Custom game loop, collision detection, spawning, difficulty, and state management - Five animated pixel-art plant growth stages drawn with PixiJS primitives - Responsive keyboard, pointer, and mobile touch input - Procedural particles, screen shake, drifting clouds, and a day/sunset/night transition - Web Audio API sound effects with a persistent mute control - Pause, restart, victory, and game-over flows - Accessible DOM menus, focus states, live status messaging, and reduced-motion support ## Scripts ```bash npm run dev # Start the development server npm run typecheck # Run strict TypeScript checks npm run build # Create a production build in dist/ npm run preview # Preview the production build ``` ## Project structure ```text . ├── index.html # DOM interface and accessible menus ├── src/ │ ├── components/ │ │ ├── background.ts # Sky, clouds, stars, hills, and atmosphere │ │ ├── characters.ts # Player, falling items, and particles │ │ └── leaderboard.ts # HUD, results, settings, and high scores │ ├── game/ │ │ └── config.ts # Shared types, colors, stages, and helpers │ ├── main.ts # Game state, input, audio, and orchestration │ └── style.css # Responsive UI and presentation ├── package.json └── tsconfig.json ```