--- title: "Tiny Garden" url: "https://aigamehub.app/zh-tw/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: "動作" 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: "zh-tw" content_locale: "zh-tw" --- # Tiny Garden 一款溫馨的單畫面瀏覽器遊戲，你要接住掉落的水和陽光、閃避飢餓的蟲子，並讓盆栽植物歷經五個像素藝術階段成長到完全綻放。 ## Description 使用方向鍵或 A/D 移動，在畫布上拖曳，或在行動裝置上使用螢幕上的方向按鈕。水滴可得 10 分，陽光可得 15 分；每隻蟲子和每三次漏接的資源各會扣一片生命葉片。達到 400 分即可完全綻放。節奏和蟲子出現頻率會隨時間增加，最高分與音效設定會儲存在 localStorage。按 P、Escape 或暫停按鈕即可暫停。這款遊戲使用 TypeScript、PixiJS 8、Vite 和純 CSS 打造，所有美術、粒子、動畫和音效皆由程式碼生成；它可在瀏覽器中執行，或透過 npm install 和 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

Tiny Garden fully bloomed victory screen

## 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 ```