TypeRacer - Global Typing Competition

Seele01-Flash
By
TypeRacer is the world's premier online typing competition where players race against opponents globally in real-time typing battles. Perfect for improving typing skills while having competitive fun.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "**Typeracer 3D: Velocity Words**". Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style**: Use a **Low-Poly / Voxel Art style** with a retro-modern palette (Cyan, Vibrant Orange, Bright Yellow) inspired by the provided logo. * **Main Character (Car)**: A stylized low-poly race car (resembling a Formula 1 car or a retro coupe) that sits in the center lane. It should have a "typewriter" aesthetic element (e.g., a roller on the back). * **Environment**: An infinite scrolling highway with retro stripes on the ground. The background (Skybox) should feature horizontal bands of Blue, Yellow, and Orange. Add low-poly decorations like street lamps or floating 3D letters passing by to convey speed. * **Opponents**: Create 2-3 "Ghost Cars" (translucent or different colors) that race alongside the player to simulate multiplayer competition. * **Optimization**: Use simple geometry (BoxGeometry, CylinderGeometry) with basic materials to ensure 60FPS on mobile devices. Avoid complex shadows; use baked vertex colors or ambient lighting. ### 2. Audio Requirements * **BGM**: A fast-paced, upbeat **Synthwave / Chiptune track** that loops. * **Sound Effects**: * **Typing**: Distinct, satisfying "Mechanical Keyboard" click sound for every correct letter typed. * **Error**: A buzzer or "clunk" sound for typos. * **Engine**: A continuous engine hum that increases in pitch as the player's WPM (Words Per Minute) increases. * **Finish**: A cheering crowd sound and a checkered flag jingle upon completing the text. ### 3. Gameplay Loop * **The Core Mechanic**: A target sentence (randomly selected from a list of educational/fun quotes) is displayed clearly at the top of the 3D view. The player must type this sentence exactly. * **Movement Logic**: The car's forward speed is directly tied to the typing speed. * Type correct character -> Car accelerates instantly. * Stop typing -> Car slowly decelerates (friction). * Typo -> Car stalls briefly (red visual flash). * **The Race**: The "Ghost Cars" (Bots) move at fixed constant speeds (e.g., one at 30 WPM, one at 60 WPM). The goal is to finish the sentence before they cross the finish line distance. * **Win/Loss**: Reaching the end of the text triggers the finish line crossing. Display a "WPM Score" and "Rank" (1st, 2nd, etc.) at the end. ### 4. Mobile Controls & Interaction * **Screen Orientation**: **Portrait Mode** is mandatory. This allows the 3D race view to occupy the top 50% of the screen, while the bottom 50% is reserved for the native mobile keyboard or a custom HTML virtual keyboard. * **Input Method**: * Implement an invisible HTML `<input>` field that automatically focuses when the game starts to trigger the mobile keyboard. * Alternatively, render a custom on-screen keyboard (QWERTY layout) using HTML/CSS overlay at the bottom if native keyboard integration is too jittery for the 3D canvas. * **UI Feedback**: * **Text Highlight**: The target text should verify input character-by-character. Correct letters turn Green, current target letter is Underlined, pending letters are White. * **Haptic Feedback**: Trigger `window.navigator.vibrate(10)` on every keypress, and a longer vibration `vibrate(50)` on errors. * **Start Button**: Large, thumb-friendly "Start Race" button (min 60px height) centered on screen before the race begins. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

TypeRacer stands as the ultimate global typing competition, bringing together millions of players from around the world in exciting real-time typing races. This classic browser game has been perfecting the art of competitive typing, combining educational value with thrilling multiplayer racing action.

With a solid 3.89/5 rating from the community, TypeRacer offers an engaging platform where speed, accuracy, and competition merge into one addictive gaming experience. Whether you're a beginner learning to type or an expert looking to sharpen your skills, this game provides the perfect environment for improvement.

Core Features

Global Multiplayer Competition

Race against real players from every corner of the globe in intense typing battles. The game's advanced matchmaking system ensures you're paired with opponents of similar skill levels, keeping every race challenging yet fair.

Skill-Based Matchmaking

After your first race, TypeRacer calculates your typing skill level and matches you with players of comparable abilities. This intelligent system ensures balanced, competitive races that help you progressively improve your typing speed and accuracy.

Customizable Race Cars

Personalize your racing experience by customizing your virtual race car. Choose from various designs and colors to represent your unique style as you speed through typing challenges.

Educational Value

Perfect for all ages, TypeRacer serves as an excellent tool for learning and improving typing skills. The game makes typing practice enjoyable and motivating through its competitive racing format.

Real-Time Racing Action

Experience the thrill of live competition as you type passages against other players simultaneously. Watch your car advance on the track as you type faster and more accurately than your opponents.

Game Mechanics

TypeRacer transforms traditional typing practice into an exciting racing experience. Players compete by typing displayed text passages as quickly and accurately as possible. Your typing speed directly translates to your car's speed on the virtual race track.

The game features various text passages of different difficulties, ensuring that both beginners and advanced typists find appropriate challenges. As you complete races, your statistics are tracked, allowing you to monitor your improvement over time.

Operation Guide

Getting Started

  • Click "Enter a Typing Race" to join your first competition
  • Use your keyboard to type the displayed text as accurately and quickly as possible
  • Watch your progress as your race car moves forward with each correctly typed word
  • Complete the passage to finish the race and see your results

Tips for Success

  • Focus on accuracy first - mistakes slow you down more than careful typing
  • Keep your eyes on the text, not your keyboard
  • Use proper finger positioning for maximum efficiency
  • Practice regularly to improve your words-per-minute (WPM) score

Why Play TypeRacer

Skill Development

TypeRacer offers one of the most effective ways to improve typing speed and accuracy. The competitive environment naturally motivates players to push their limits and achieve better performance.

Social Competition

Connect with a global community of typing enthusiasts. Challenge friends, compete for high scores, and climb the leaderboards while improving a valuable real-world skill.

Accessibility and Convenience

As an HTML5 browser game, TypeRacer requires no downloads or installations. Simply open your web browser and start racing immediately on any device with internet access.

Perfect for Everyone

Suitable for teens and adults, students and professionals, TypeRacer adapts to all skill levels. Whether you're learning to type for the first time or aiming to become a typing speed demon, the game provides appropriate challenges.

Free Entertainment

Enjoy hours of competitive entertainment without any cost. TypeRacer provides premium gaming experience accessible to everyone with an internet connection.

Frequently Asked Questions (FAQ)