はじめに
Xをウロウロしていたら、YouWareで収益化できたみたいなポストを見かけました
ナニソレ？ってなって、実際に試してみたので、その感想を書こうと思います
YouWare とは
AIを用いてノーコードで、Webサイト、ブラウザゲームを作ることができるサービスです
ユーザー登録は必要ですが、無料プランで500クレジットあります
クレジットは、AIに命令を出すたびに減っていくようです
実際に試してみました
ログインした状態で、YouWareにアクセスすると、チャット形式の入力欄が表示されます
以下のような文章を入力しました
16ｘ16のマス目のダンジョンがあります
迷路のようになっていますが、スタートから
ゴールには必ず辿り着けます
スタート地点は、左上から右1マス、下1マスのところ
ゴールは、右下付近です
キャラクターをバーチャルキーボードで上下左右に動かしてゴールまで導きます
キャラクターのまわり1マスぶんだけ見えるようになっていて、壁にぶつかった回数をカウントしていきます
できるだけ壁にぶつかった回数を競うゲームです
ニューゲームのたびにダンジョンは作り変えられます
YouWareが作ったプロンプト
入力した内容をもとに、YouWareが作成したプロンプトも出力されていました
足りない点を補ってくれていることがわかります
# Dungeon Maze Game - React Development Guide
A 16x16 randomly generated dungeon maze game where players navigate with limited visibility and compete for the lowest wall collision count.
## Project Status
- **Project Type**: React + TypeScript Interactive Game
- **Entry Point**: `src/main.tsx` (React application entry)
- **Build System**: Vite 7.0.0 (Fast development and build)
- **Styling System**: Tailwind CSS 3.4.17 (Atomic CSS framework)
## Key Features Implemented
### Game Mechanics
- **16x16 Grid Dungeon**: Randomly generated maze using recursive backtracking algorithm
- **Limited Visibility**: Player can only see 1 square in each direction (3x3 view)
- **Wall Collision Tracking**: Counts attempts to move into walls
- **Multiple Control Methods**: Arrow keys or WASD keyboard support, plus virtual button controls
- **Dynamic Goal Placement**: Goal placed near bottom-right corner (14, 14)
- **Win Condition**: Navigate to goal position to complete the level
- **Replayability**: New randomly generated maze for each game
### Game Components
- `DungeonGame.tsx`: Main game logic, state management, keyboard input handling
- `GameView.tsx`: Displays 3x3 visible grid around player with visual representation
- `Controls.tsx`: Virtual on-screen button controls plus keyboard instructions
- `Stats.tsx`: Displays wall collision counter and game status
- `mazeGenerator.ts`: Recursive backtracking algorithm for maze generation
## Game Architecture
### State Management
- **DungeonGame.tsx** manages core game state:
- `maze`: 2D boolean array (true = wall, false = path)
- `playerX`, `playerY`: Current player position (starts at 1, 1)
- `goalX`, `goalY`: Goal position (14, 14)
- `wallHits`: Counter for wall collisions
- `gameWon`: Boolean flag for win state
### Maze Generation Algorithm
- **Recursive Backtracking**: Creates a perfect maze (one path from any point to any other)
- **Grid Size**: 16x16 with walls and paths
- **Start Position**: (1, 1) - one square right, one square down from top-left
- **Goal Position**: (14, 14) - near bottom-right corner
- **Algorithm Details**: Carves paths through walls by moving 2 cells at a time, ensuring all paths are connected
### Game Loop
1. Generate maze on component mount
2. Player moves using keyboard (arrow keys/WASD) or virtual buttons
3. Collision detection with walls increments counter
4. Goal detection triggers win state
5. New game regenerates maze with same starting conditions
### Visibility System
- Player sees a 3x3 grid (current position + 1 in each direction)
- Cells outside grid bounds show as dark/unknown
- Visual elements: 🧙 (player), 🧱 (wall), ⭐ (goal), empty floor
## Project Architecture
### Directory Structure
```
project-root/
├── index.html # Main HTML template
├── package.json # Node.js dependencies and scripts
├── package-lock.json # Lock file for npm dependencies
├── README.md # Project documentation
├── YOUWARE.md # Development guide and template documentation
├── yw_manifest.json # Project manifest file
├── vite.config.ts # Vite build tool configuration
├── tsconfig.json # TypeScript configuration (main)
├── tsconfig.app.json # TypeScript configuration for app
├── tsconfig.node.json # TypeScript configuration for Node.js
├── tailwind.config.js # Tailwind CSS configuration
├── postcss.config.js # PostCSS configuration
├── dist/ # Build output directory (generated)
└── src/ # Source code directory
├── App.tsx # Main application component
├── main.tsx # Application entry point
├── index.css # Global styles and Tailwind CSS imports
├── vite-env.d.ts # Vite type definitions
├── api/ # API related code
├── assets/ # Static assets
├── components/ # Reusable components
├── layouts/ # Layout components
├── pages/ # Page components
├── store/ # State management
├── styles/ # Style files
└── types/ # TypeScript type definitions
```
### Code Organization Principles
- Write semantic React components with clear component hierarchy
- Use TypeScript interfaces and types to ensure type safety
- Create modular components with clear separation of concerns
- Prioritize maintainability and readability
## Tech Stack
### Core Framework
- **React**: 18.3.1 - Declarative UI library
- **TypeScript**: 5.8.3 - Type-safe JavaScript superset
- **Vite**: 7.0.0 - Next generation frontend build tool
- **Tailwind CSS**: 3.4.17 - Atomic CSS framework
### Routing and State Management
- **React Router DOM**: 6.30.1 - Client-side routing
- **Zustand**: 4.4.7 - Lightweight state management
### Internationalization Support
- **i18next**: 23.10.1 - Internationalization core library
- **react-i18next**: 14.1.0 - React integration for i18next
- **i18next-browser-languagedetector**: 7.2.0 - Browser language detection
### UI and Styling
- **Lucide React**: Beautiful icon library
- **Headless UI**: 1.7.18 - Unstyled UI components
- **Framer Motion**: 11.0.8 - Powerful animation library
- **GSAP**: 3.13.0 - High-performance professional animation library
- **clsx**: 2.1.0 - Conditional className utility
### 3D Graphics and Physics
- **Three.js**: 0.179.1 - JavaScript 3D graphics library
- **Cannon-es**: Modern TypeScript-enabled 3D physics engine
- **Matter.js**: 0.20.0 - 2D physics engine for web
## Technical Standards
### React Component Development Methodology
- Use functional components and React Hooks
- Implement single responsibility principle for components
- Create reusable and composable component architecture
- Use TypeScript for strict type checking
### Styling and Design System
- Use Tailwind CSS design token system
- Apply mobile-first responsive design approach
- Leverage modern layout techniques (Grid, Flexbox)
- Implement thoughtful animations and transitions through Framer Motion and GSAP
- Create immersive 3D visual experiences with Three.js
- Add realistic physics interactions using Cannon-es and Matter.js
### CSS Import Order Rules
**CRITICAL**: `@import` statements must come BEFORE all other CSS statements to avoid PostCSS warnings.
### State Management Approach
- Use Zustand for global state management
- Prioritize React built-in Hooks for local state
- Implement clear data flow and state update patterns
- Ensure state predictability and debugging capabilities
### Performance Optimization Requirements
- Use React.memo and useMemo for component optimization
- Implement code splitting and lazy loading
- Optimize resource loading and caching strategies
- Ensure all interactions work on both touch and pointer devices
## Development Commands
- **Install dependencies**: `npm install`
- **Build project**: `npm run build`
## Game Controls
### Keyboard Input
- **Arrow Keys**: Move in four directions (up, down, left, right)
- **WASD Keys**: Alternative movement controls (W=up, A=left, S=down, D=right)
### Virtual Controls
- On-screen arrow buttons for mouse/touch input
- Hover effects provide visual feedback
- Active state provides tactile feedback on button press
## Extending the Game
### Adding Difficulty Levels
- Modify `VISION_RANGE` in `GameView.tsx` (0 = totally blind, 2 = wider visibility)
- Adjust `GRID_SIZE` in `DungeonGame.tsx` for larger mazes (must be even number)
- Add timer mechanics for speedrun challenges
### Customizing Visuals
- Game icons are emojis (easily replaceable in GameView.tsx)
- Color scheme uses Tailwind classes (modify Colors in Controls, GameView, Stats)
- Adjust cell size by changing `w-20 h-20` classes in GameView.tsx
### Adding Features
- Leaderboard tracking with localStorage or backend
- Multiple game modes (speed run, limited moves)
- Enemy AI that hunts the player
- Power-ups or collectible items
## Build and Deployment
The project uses Vite build system:
- **Development server**: `http://127.0.0.1:5173`
- **Build output**: `dist/` directory
- **Supports HMR**: Hot Module Replacement
- **Optimized production build**: Automatic code splitting and optimization
## Configuration Files
- `vite.config.ts` - Vite configuration
- `tsconfig.json` - TypeScript configuration
- `tailwind.config.js` - Tailwind CSS configuration
- `postcss.config.js` - PostCSS configuration
- `yw_manifest.json` - Project manifest file
Boost してみた
この時点で、結構高い完成度のものができあがっていましたが、Boostというのがあったので選択してみました
プロンプトで Boostというのが実行されて、デザイン、エフェクトなどのプロンプトの指示が追加されて再構築されていました
実際にできたもの
結構、あそべるものが出来ています
さいごに
素直に、文章で作りたいのをざっくり伝えるだけで、ここまで作ってくれるのに驚きました
こういうのが作りたいとおもったときの、プロトタイプなどや、イメージを固めたりするのに使えそうだなと感じましたし、ノーコードでも十分に使えるものが作れそうだと思いました
YouWare上で公開されている、他の人のを閲覧することもできますし、
そのプロジェクトを Remix というので、拡張することもできるようです
またコンテスト？みたいなのも開かれているようなので、もう少し調べてみようと思います