Fashion Battle - Ultimate Runway Showdown

Seele01-Flash
By
Fashion Battle is the ultimate runway showdown where you compete to create the perfect look. Dress your model to match themed challenges, impress judges, and claim victory on the catwalk in this exciting 3D fashion competition.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**Fashion Catwalk Battle**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Adopt a "Hyper-Casual" aesthetic. Use bright, saturated colors (pinks, purples, blues) with a clean, low-poly look. The lighting should be flat-shaded or toon-shaded to look good on mobile screens. * **The Runway**: Create a long, straight platform (the catwalk) extending into the Z-axis. The floor should be a glossy gray with white lane markings. * **Background**: A simplified, low-poly city skyline silhouette in soft pastel blue/purple gradients. * **Characters**: * **Player Model**: A stylized 3D female character (use assembled geometric primitives like Capsules and Cylinders if external models are unavailable) positioned on the left lane. * **Rival Model**: A similar AI character on the right lane. * **Outfit Elements**: Represent outfit changes visually by changing the color/texture of the character's body parts (e.g., turning the legs "blue" to represent jeans, or "pink" for a skirt). * **Performance**: Use `THREE.BoxGeometry` or `THREE.CylinderGeometry` with shared materials to minimize draw calls. Ensure the renderer creates a high pixel ratio for sharp text on mobile. ### 2. Audio Requirements * **BGM**: An energetic, upbeat "Runway House" or "Pop" loop (120-128 BPM) to drive the walking rhythm. * **SFX**: * **Select**: A crisp "Pop" or "Snap" sound when the player selects an item. * **Camera**: A "Shutter" sound effect when the character poses at the end. * **Win/Loss**: A cheer for victory and a comedic "womp-womp" for defeat. ### 3. Gameplay Loop * **Phase 1: The Brief**: At the start, display a random theme text (e.g., "Sporty", "Red Carpet", "Winter Casual"). * **Phase 2: The Walk**: The camera moves backward (or the world moves forward) automatically. The characters "walk" down the runway. * **Phase 3: The Choice Gates**: Every few seconds, the game pauses slightly or slows down, and 3 floating UI icons appear (Left, Center, Right) representing outfit choices (e.g., Heels, Sneakers, Boots). * **Logic**: One item matches the theme perfectly (+100 pts), one is okay (+50 pts), one is wrong (-50 pts). * **Visual Feedback**: Upon selection, particle confetti explodes, and the character's appearance updates immediately. * **Phase 4: The Showdown**: At the end of the runway, both characters stop. The scores are tallied. The character with the higher score plays a "Dance/Pose" animation; the loser plays a "Crying/Head Down" animation. ### 4. Mobile Controls & Interaction * **Orientation**: **Portrait Mode** (Vertical) design. * **Controls**: * No character movement steering is required (on-rails movement). * **Interaction**: Large, tappable HTML overlay buttons for the outfit choices. * **UI/UX**: * Buttons must be at least 44x44px for touch targets. * Place the Choice UI in the lower third of the screen for easy thumb reach. * Display a "Style Meter" bar at the top comparing Player vs. Rival scores. * **Feedback**: Implement `window.navigator.vibrate(50)` (if supported) when an outfit is selected to provide haptic feedback. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About Fashion Battle

Fashion Battle is a thrilling 3D fashion competition game that puts you in the spotlight of the runway world. Step into the glamorous universe of high fashion where creativity meets competition, and every outfit choice could make or break your chances of victory. This free-to-play beauty and dress-up game challenges players to create stunning looks while racing against rivals in fast-paced fashion showdowns.

With its vibrant 3D graphics and intuitive gameplay, Fashion Battle offers an immersive fashion experience that appeals to style enthusiasts of all ages. The game combines strategic thinking with creative flair, making every runway walk an exciting battle for fashion supremacy.

Core Features

Dynamic Theme-Based Challenges

Every fashion battle begins with a unique theme that sets the stage for your styling decisions. From nightclub chic and sporty vibes to red-carpet elegance, each theme demands a different approach to fashion. Success depends on your ability to interpret themes correctly and select outfits that perfectly capture the required aesthetic.

Real-Time Competitive Gameplay

Experience the thrill of head-to-head fashion competitions as your model walks alongside rivals down stunning runways. The pressure is on as you make split-second decisions about outfit selections, with only three choices available at each styling station. This real-time element adds excitement and urgency to every fashion battle.

Progressive Outfit Building

Start with a basic swimsuit and transform your model into a fashion icon as you progress down the runway. Each styling station offers opportunities to add new pieces, building a complete look from head to toe. Strategic planning is essential - miss a station or make poor choices, and your model may end up incomplete.

Stunning 3D Visuals and Environments

Immerse yourself in beautifully rendered 3D environments featuring diverse runway settings and backdrops. The game's visual appeal enhances the fashion experience, making every catwalk moment feel like a genuine high-fashion event.

Free-to-Play Accessibility

Enjoy complete access to Fashion Battle without any upfront costs. The game runs directly in web browsers, requiring no downloads or installations. This accessibility makes it perfect for quick fashion fixes or extended styling sessions.

Gameplay Mechanics

Strategic Outfit Selection

Success in Fashion Battle requires more than just good taste - it demands strategic thinking. With only three outfit options at each station, players must carefully consider which pieces best match the theme while creating a cohesive overall look. Poor choices or missed opportunities can result in an incomplete ensemble that fails to impress the judges.

Theme Interpretation Skills

Mastering Fashion Battle means developing an eye for theme interpretation. A sporty challenge demands athletic wear and comfortable shoes, while a formal event calls for elegant dresses and sophisticated accessories. Understanding these nuances is crucial for consistent victory.

Judge Evaluation System

Your styled model faces scrutiny from discerning judges who evaluate how well your outfit matches the given theme. Complete, well-coordinated looks that perfectly capture the theme's essence earn higher scores, while incomplete or mismatched outfits may lead to elimination.

Operation Guide

Basic Controls

Fashion Battle features intuitive point-and-click controls optimized for both desktop and mobile play:

  • Mouse/Touch : Click or tap clothing icons to select outfits for your model
  • Quick Selection : Choose from three available options at each styling station
  • Real-Time Decisions : Make choices quickly as your model moves down the runway

Winning Strategies

  • Stay Theme-Focused : Always prioritize outfit pieces that match the current theme
  • Plan Ahead : Consider how early choices will work with later styling options
  • Complete the Look : Ensure your model has all necessary clothing pieces by the runway's end
  • Speed Matters : Make decisions quickly to avoid missing styling opportunities

Why Play Fashion Battle

Perfect for Fashion Enthusiasts

Fashion Battle appeals to anyone with an interest in style, beauty, and creative expression. The game provides a risk-free environment to experiment with different fashion combinations and develop styling skills.

Accessible Entertainment

As a free browser-based game, Fashion Battle offers instant entertainment without barriers. No downloads, registrations, or payments required - simply open your browser and start styling.

Skill Development

Beyond entertainment, the game helps develop quick decision-making abilities, aesthetic judgment, and strategic thinking. These skills translate well beyond the virtual runway.

Cross-Platform Compatibility

Whether you prefer playing on desktop, tablet, or smartphone, Fashion Battle adapts seamlessly to different devices and screen sizes, ensuring a consistent experience across platforms.

Competitive Edge

The game's competitive nature adds excitement to the fashion experience, making victories feel genuinely rewarding and encouraging improvement through practice.

Frequently Asked Questions (FAQ)