--- title: "Tiny Garden" url: "https://aigamehub.app/ja/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: "ja" content_locale: "ja" --- # Tiny Garden 落ちてくる水と日光を受け止め、お腹を空かせた虫をよけ、鉢植えの植物を5つのピクセルアートステージを通して満開まで育てる、居心地のよい1画面ブラウザゲーム。 ## Description 矢印キーまたは A/D で移動し、キャンバス上をドラッグするか、モバイルでは画面上の矢印ボタンを使用します。水滴は10点、日光は15点です。虫と、3回の取り逃した資源はそれぞれ体力の葉を1つ失います。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 ```