Smileys - Face Recognition Puzzle Game

Seele01-Flash
By
Smileys is an engaging puzzle game that challenges your observation skills. Find the face that doesn't match among countless smiling and frowning expressions in this addictive clicker game.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Smileys". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Minimalist 2D aesthetics rendered in a 3D space (Flat Design). Use a strict color palette: Deep Purple (`#7F00FF`) for the background, and high-contrast White (`#FFFFFF`) for the face outlines. * **Camera**: Use an **OrthographicCamera** to maintain a flat, puzzle-grid look suitable for mobile screens without perspective distortion. * **Models (The Faces)**: Create "Tokens" using `THREE.CylinderGeometry` (short height, looking like coins). * Textures: Procedurally draw textures on canvas for the faces: "Smiley" (upward curve), "Frown" (downward curve + angry eyebrows), "Neutral" (straight line/empty), and "Gem" (Red Diamond shape). * **Animations**: The faces should not be static. Implement a "flip" animation (rotation on X or Y axis) or opacity pulse to simulate the description's "fading in and out of emotions." * **Performance**: Use `THREE.InstancedMesh` for the grid of faces to minimize draw calls, as there will be many identical geometries on screen. ### 2. Audio Requirements * **BGM**: A looping, upbeat, "Cute" electronic track. Think minimal synth-pop with a moderate tempo (100-110 BPM) that helps concentration but feels playful. * **Sound Effects (SFX)**: * **Correct Tap**: A satisfying, high-pitched "Pop" or "Bubble" sound. * **Wrong Tap**: A low-pitched "Buzzer" or "Glass Crack" sound. * **Gem Collect**: A magical "Chime" or "Ding" (Red Diamond pickup). * **Level Transition**: A rapid "Whoosh" slide effect. ### 3. Gameplay Loop * **Core Mechanic**: "Odd One Out". * The game generates a grid (starts 3x3, increases to 5x5 or 6x6). * Logic: The system randomly selects a "Dominant" emotion (e.g., Smiley) and fills $N-1$ slots with it. It selects one "Target" emotion (e.g., Frown) for the remaining slot. * *Twist*: Sometimes the majority are Frowns, and the target is the Smiley. The player must identify the unique face. * **Power-ups**: Occasionally, replace a standard face with a "Red Diamond" (Bonus Score) or "Clock" (Extra Time). * **Progression**: Levels are endless. As the player advances, the grid gets larger, and the "Emotion Flip" animations happen more frequently to distract the eye. * **Win/Loss**: * **Win (Round)**: Clicking the correct unique face clears the grid and spawns the next level immediately. * **Loss**: Clicking a common face (non-target) instantly triggers a Game Over screen with the final score. ### 4. Mobile Controls & Interaction * **Touch Input**: Implement a `Raycaster` linked to `touchstart` events (not just `click`) for zero-latency response on mobile devices. * **Visual Feedback**: * **Juice**: When a face is tapped, apply a quick scale tween (scale down to 0.8, then elastic bounce back to 1.0) to provide tactile feel. * **Particles**: On a correct click, spawn a small burst of white particle confetti at the tap location. * **Screen Shake**: On a wrong click, shake the camera slightly before showing the Game Over UI. * **Orientation**: Lock the game to **Portrait Mode** logic. The grid should resize dynamically to fit the width of the phone screen with padding. * **Haptics**: Trigger `navigator.vibrate(50)` on correct clicks and `navigator.vibrate([100, 50, 100])` on Game Over. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Smileys is a captivating puzzle game that puts your observation skills to the ultimate test. In this unique face recognition challenge, you'll encounter a world where emotions shift constantly between smiles and frowns. Your mission is to identify which face doesn't fit the pattern and click it before time runs out.

With a solid rating of 3.2 out of 5 stars, this brain teaser offers the perfect blend of simplicity and challenge that keeps players coming back for more. The game's minimalist design focuses entirely on the core gameplay mechanic, making it accessible to players of all ages.

Core Features

Completely Free to Play

Enjoy unlimited access to all game content without any payment required. This HTML5 browser game delivers premium puzzle entertainment at no cost.

Cross-Platform Compatibility

Perfectly optimized for both desktop and mobile devices, allowing you to play seamlessly across different platforms. Whether you're on your computer, tablet, or smartphone, the experience remains smooth and responsive.

Instant Play Technology

No downloads or installations needed. Simply open your browser and start playing immediately. The HTML5 technology ensures fast loading times and reliable performance.

Progressive Difficulty System

Start with simple patterns and gradually face more complex arrangements as you advance through endless levels. Each stage introduces new challenges that test different aspects of your visual perception.

Cute and Engaging Design

The charming smiley faces create a friendly, approachable atmosphere that makes the game enjoyable for casual players while maintaining enough depth for serious puzzle enthusiasts.

Gameplay Mechanics

Pattern Recognition Challenge

The core gameplay revolves around identifying facial expressions that don't match the majority. Sometimes you'll need to find a single frown among many smiles, other times it's the opposite.

Dynamic Face Transitions

Faces constantly fade in and out of different emotions, creating a dynamic puzzle environment that requires quick thinking and precise timing.

Click-Based Interaction

Simple mouse clicks or taps are all you need to play. The intuitive control scheme makes the game immediately accessible to new players.

Mistake Consequences

Accuracy is crucial - clicking the wrong face ends the game, adding tension and requiring careful observation before each move.

How to Play

Basic Controls

  • Mouse Click/Tap : Select the face that doesn't match the pattern
  • Observation : Carefully scan the playing area before making your choice
  • Timing : Act quickly but accurately as faces may change expressions

Winning Strategy

  1. Quick Scan : Rapidly survey the entire playing field
  2. Pattern Analysis : Identify the dominant facial expression
  3. Spot the Difference : Locate the face showing a different emotion
  4. Precise Clicking : Click only when you're certain of your choice
  5. Stay Focused : Maintain concentration as difficulty increases

Game Objectives

Your goal is simple yet challenging: find and click the face that displays a different emotion from the majority. Success advances you to the next level with increased complexity.

Why Play Smileys?

Brain Training Benefits

This puzzle game serves as excellent brain training, improving your: - Visual processing speed - Pattern recognition abilities - Attention to detail - Concentration skills - Quick decision-making

Perfect for Short Sessions

Ideal for quick gaming sessions during breaks, commutes, or whenever you need a mental challenge. Each round can be completed in minutes, making it perfect for busy lifestyles.

Stress-Free Entertainment

The cute, friendly design and simple mechanics create a relaxing gaming experience that's both entertaining and mentally stimulating without being overwhelming.

Universal Appeal

Suitable for all age groups, from children developing their observation skills to adults looking for a quick mental workout. The game's simplicity makes it accessible while remaining challenging enough for experienced puzzle gamers.

Frequently Asked Questions (FAQ)