A browser-based multiplayer Curve Fever (Achtung die Kurve) game with real-time support for up to 10 players. Built with Node.js, Socket.io, and HTML5 Canvas.
- Real-time Multiplayer: Support for 2-10 players simultaneously
- Modern UI: Clean, card-based design with Telekom Magenta theme
- Smooth Gameplay: 60 FPS server-authoritative game loop
- Responsive Controls: Multiple keyboard layouts for different players
- Score Tracking: Round-based scoring with persistent leaderboard
- Visual Polish: Glow effects, smooth animations, and glassmorphism UI
- Each player controls a continuously moving line that leaves a trail
- Players can only turn left or right using their assigned keys
- Periodic gaps appear in the trails
- Power-ups spawn randomly on the map, providing temporary effects like speed boosts or slowdowns
- Collision with any trail (including your own) eliminates you
- Last player surviving wins the round
- First player to reach 10 wins ends the match
- Scores persist across rounds
- Backend: Node.js, Express, Socket.io
- Frontend: Vanilla JavaScript, HTML5 Canvas, CSS3
- Real-time Communication: WebSockets via Socket.io
-
Clone or download this repository
-
Install dependencies:
npm install- Start the server:
npm start- Open your browser and navigate to:
http://localhost:3000
- Open
http://localhost:3000in your browser - Enter your player name
- Click "Join Lobby"
- Wait for other players to join (minimum 2 players required)
- Click "Ready to Play" when you're ready
- Game starts when all players are ready
To test with multiple players on the same computer:
- Open multiple browser windows or tabs
- Navigate to
http://localhost:3000in each - Join with different names in each window
Each player is assigned a unique control scheme:
- Player 1: ← (left) / → (right)
- Player 2: A (left) / D (right)
- Player 3: J (left) / L (right)
- Player 4: Z (left) / C (right)
- Player 5: 4 (left) / 6 (right)
- Player 6: F (left) / H (right)
- Player 7: Q (left) / E (right)
- Player 8: U (left) / O (right)
- Player 9: V (left) / N (right)
- Player 10: 7 (left) / 9 (right)
Your assigned controls are displayed in the lobby and in the game HUD.
- Movement: Your line moves continuously forward
- Turning: Use your left/right keys to turn
- Trails: Your line leaves a colored trail behind it
- Gaps: Periodic gaps appear in your trail (safe to pass through)
- Power-ups: Collect power-ups for temporary effects (e.g., speed changes)
- Collision: Hitting any trail eliminates you
- Winning: Be the last player alive to win the round
- Scoring: Winner gets 1 point per round
- Match End: First player to reach 5 points wins the match
You can modify these constants in server.js:
const PORT = 3000; // Server port
const CANVAS_WIDTH = 1200; // Game arena width
const CANVAS_HEIGHT = 700; // Game arena height
const PLAYER_SPEED = 2; // Player movement speed
const TURN_SPEED = 0.05; // Turning speed
const TRAIL_WIDTH = 4; // Trail thickness
const GAP_INTERVAL = 100; // Frames between gaps
const GAP_LENGTH = 15; // Frames of gap duration
const FPS = 60; // Server tick rate
const MAX_SCORE = 5; // Points needed to win match/
├── server.js # Node.js server with game logic
├── package.json # Dependencies and scripts
├── README.md # This file
└── public/
├── index.html # Game UI structure
├── styles.css # Telekom Magenta theme styling
└── game.js # Client-side rendering and input
- Authoritative Server: All game logic runs on the server to prevent cheating
- Client Rendering: Clients receive game state and render it locally
- Input Handling: Clients send input commands, server validates and processes
- State Synchronization: Server broadcasts game state at 60 FPS
- Lobby: Players join and ready up
- Countdown: 3-second countdown with animation
- Playing: Active gameplay until one player remains
- Round End: Winner announcement and score update
- Auto-restart: New round begins after 3 seconds
- Primary: #E20074 (Telekom Magenta)
- Primary Dark: #A4005C
- Secondary: #9E9E9E
- Background: #1A1A1A
- Surface: #2A2A2A
- Success: #00D68F
- Error: #FF4444
- Modern, minimal design with ample whitespace
- Card-based layouts with soft shadows
- Glassmorphism effects (backdrop blur)
- Smooth transitions and animations
- Responsive design for different screen sizes
npm run dev- Start the server with
npm start - Open multiple browser windows
- Navigate each to
http://localhost:3000 - Join with different player names
- Test gameplay, collision detection, and scoring
Players can't connect:
- Ensure the server is running (
npm start) - Check that port 3000 is not in use
- Try accessing via
http://localhost:3000
Game won't start:
- Ensure at least 2 players have joined
- All players must click "Ready to Play"
Lag or stuttering:
- Close other applications
- Ensure stable network connection
- Try reducing FPS in server.js (not recommended below 30)
Controls not working:
- Make sure the game window has focus
- Check that you're using the correct keys for your player slot
- Verify controls in the HUD during gameplay
Potential features to add:
- Power-ups (speed boost, invincibility, etc.)
- Multiple game modes (team mode, time attack, etc.)
- Customizable arena sizes
- Player statistics and rankings
- Sound effects and background music
- Mobile touch controls
- Replay system
- Tournament mode
MIT License - Feel free to use and modify this project.
Inspired by the classic Curve Fever (Achtung die Kurve) game.
Built with modern web technologies and the Telekom Magenta design system.