Math Stacker - Educational Block Stacking Game
Prompt
MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Math Stacker". Please read the following detailed game design requirements first, and then generate the code accordingly:
### 1. Assets & Environment
* **Visual Style:** Create a vibrant, "Edutainment" aesthetic using a bright, high-saturation color palette (Cyan, Magenta, Yellow, Lime Green). The look should be clean and cartoonish.
* **Block Models:** Generate 3D rounded cubes (BoxGeometry with beveled edges). Crucially, map textures onto the front face of these blocks featuring **"funny facial expressions"** (e.g., googly eyes, smiling mouths, surprised looks) to give them personality.
* **Background:** A soft, non-distracting gradient background (e.g., dark blue to purple) with floating, low-opacity 3D mathematical symbols (+, -, ×, ÷, %) rotating slowly in the distance to reinforce the theme.
* **Particle Effects:** When blocks are matched and destroyed, spawn a burst of colorful confetti particles or smaller geometric shapes that match the block's color.
* **Mobile Optimization:** Use `InstancedMesh` if block count exceeds 100 to reduce draw calls. Ensure textures are compressed and lighting is baked or simple (AmbientLight + one DirectionalLight).
### 2. Audio Requirements
* **BGM:** A cheerful, looping synth-pop track. It should have two variations: an "Action Mode" version (slightly faster tempo) for the stacking phase, and a "Thinking Mode" version (calmer, stripped-back instrumentation) for the math quiz phase.
* **Sound Effects (SFX):**
* **Block Landing:** A soft "thud" or "click".
* **Block Clear:** A satisfying "pop" or bubble-wrap sound.
* **Math Correct:** A bright "ding" or chime.
* **Math Incorrect:** A comical "buzz" or low-pitch wobble.
* **Game Over:** A descending whistle or "sad trombone" effect.
### 3. Gameplay Loop
The game consists of two alternating phases: **Stacking Phase** and **Math Phase**.
* **Phase 1: Stacker (Action)**
* **Mechanism:** Blocks spawn from the top of the screen and fall into a grid (e.g., 6 columns x 10 rows).
* **Match Mechanic:** Players must tap on a group of **3 or more** adjacent blocks of the same color. Upon clicking, these blocks vanish (particle effect), and blocks above them fall down to fill the gap (gravity tweening).
* **Fail Condition:** If the blocks stack up to the top "Danger Line" of the screen, it's Game Over.
* **Progression:** After surviving for a set time or clearing a specific number of blocks, the game pauses and transitions to Phase 2.
* **Phase 2: Math Quiz (Educational)**
* **Mechanism:** The 3D scene blurs or is covered by a semi-transparent overlay. A math question appears (options: Addition, Subtraction, Multiplication, Division, Fractions).
* **Goal:** The player must answer **5 questions correctly** to return to the Stacker phase.
* **Difficulty:** Questions should scale in difficulty based on the level reached.
* **Reward:** Answering correctly clears a few rows of blocks from the stacker grid (helping the player survive) and resumes the action.
### 4. Mobile Controls & Interaction
* **Camera:** Fixed Orthographic Camera positioned to view the grid head-on (2.5D view), ensuring the entire playing field fits within a vertical mobile screen (Portrait Mode).
* **Touch Controls (Raycaster):**
* Implement a Three.js `Raycaster` mapped to `touchstart` events.
* **Tap:** Detects which block was tapped in the 3D grid to trigger the match logic.
* **UI & HUD:**
* **Score/Level:** Top corners, large readable font.
* **Math Interface:** During Phase 2, display the question and 4 large, tappable answer buttons. These buttons must be at least **48x48px** visible area for accessibility.
* **Feedback:**
* **Visual:** When a player touches a block group, briefly highlight the selection before destroying it.
* **Haptic:** Trigger `navigator.vibrate(50)` on a successful block clear and `navigator.vibrate([50, 50, 50])` on a wrong math answer.
Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.
Game Introduction
About the Game
Math Stacker is a unique educational action game that perfectly blends entertainment with learning. Rated 4.00/5 by players, this innovative game eliminates the need to choose between fun and studying by combining both in one engaging experience. The game features colorful blocks with amusing facial expressions that fall from the sky, creating an entertaining visual experience while you practice essential math skills.
Core Features
Dual Gaming Experience
Math Stacker offers two interconnected gameplay modes that work together seamlessly:
- Block Stacking Action : Fast-paced matching gameplay with falling colorful blocks
- Math Practice Sessions : Comprehensive skill-building exercises covering multiple math concepts
- Progressive Unlocking System : Successfully answer math questions to unlock new stacking sessions
- Visual Learning : Blocks feature funny facial expressions that make learning more engaging
Comprehensive Math Skills Coverage
The educational component covers essential mathematical concepts:
- Fractions : Master fraction operations and comparisons
- Multiplication : Practice times tables and multi-digit multiplication
- Addition : Build proficiency in basic and advanced addition
- Division : Develop division skills from basic to complex problems
- Decimals : Learn decimal operations and place value understanding
Accessibility and Convenience
- Completely Free : No payment required to access all features and content
- Browser-Based : Play instantly without downloads using HTML5 technology
- Mobile Optimized : Perfect performance on smartphones and tablets
- Cross-Platform : Compatible with all modern devices and operating systems
- Age-Appropriate : Suitable for all ages with content rating for everyone
Gameplay Mechanics
Block Stacking Rules
The stacking component follows intuitive matching mechanics:
- Colorful blocks fall continuously from the top of the screen
- Match groups of 3 or more blocks of the same color
- Blocks can be matched side-by-side or stacked vertically
- Prevent blocks from stacking too high to avoid losing
- Higher match combinations result in better scores
Math Challenge System
The educational progression works through a structured approach:
- Select your appropriate grade level to start
- Choose specific math skills you want to practice
- Answer 5 math questions correctly to unlock the next stacking session
- Questions adapt to your selected skill level and grade
- Multiple math topics available for comprehensive learning
Operation Guide
Getting Started
- Select Grade Level : Choose the appropriate academic level
- Pick Math Skill : Select from fractions, multiplication, addition, division, or decimals
- Complete Math Section : Answer 5 questions correctly
- Unlock Stacking Game : Proceed to the block matching gameplay
Stacking Controls
- Mouse Click : Click on groups of 3+ same-colored blocks to make them disappear
- Strategic Planning : Look for the largest possible matches for higher scores
- Height Management : Keep blocks from reaching the top of the screen
- Quick Reactions : Fast matching prevents dangerous stack buildup
Math Section Navigation
- Answer Input : Use keyboard or touch input for math solutions
- Progress Tracking : Monitor correct answers toward the 5-question goal
- Skill Selection : Switch between different math topics as desired
Why Play Math Stacker
Educational Benefits
Math Stacker transforms traditional math practice into an engaging experience. Instead of boring worksheets, students practice essential skills through gameplay rewards. The immediate feedback and progression system motivate continued learning while the stacking game provides mental breaks that actually enhance focus.
Entertainment Value
The colorful blocks with personality create a visually appealing environment that holds attention. The fast-paced matching gameplay provides excitement and challenge, while the scoring system encourages improvement and replay value.
Perfect Balance
This game solves the common conflict between screen time and study time. Parents can feel good about gaming sessions that actually build academic skills, while students enjoy learning without realizing they're studying.
Flexible Learning
The grade and skill selection system allows personalized learning experiences. Whether you need basic addition practice or advanced fraction work, Math Stacker adapts to individual needs and academic levels.
Frequently Asked Questions (FAQ)
Is Math Stacker completely free to play?
+
Yes! Math Stacker is completely free with no hidden costs. You can access all math skills, grade levels, and stacking gameplay without any payment.
What math skills can I practice in Math Stacker?
+
The game covers five essential math areas: fractions, multiplication, addition, division, and decimals. You can select specific skills based on your learning needs.
Do I need to download anything to play?
+
No downloads required! Math Stacker is an HTML5 browser game that runs directly in your web browser on any device.
Can I play Math Stacker on my phone or tablet?
+
Absolutely! The game is fully optimized for mobile devices including smartphones and tablets, working perfectly on both iOS and Android.
How many math questions do I need to answer?
+
You need to answer 5 math questions correctly to unlock each stacking game session. This creates a good balance between learning and entertainment.
What grade levels does Math Stacker support?
+
The game allows you to select your grade level when starting, adapting the math difficulty to match your academic level and ensuring appropriate challenge.
How do I match blocks in the stacking game?
+
Click on groups of 3 or more blocks of the same color that are touching each other, either side-by-side or stacked on top of each other.
What happens if the blocks stack too high?
+
If blocks reach the top of the screen, you lose that stacking session. The goal is to keep matching blocks to prevent them from stacking too high.