Build and Publish Docker Image / Build and Validate (pull_request) Successful in 8s

Details

Build and Publish Docker Image / Publish to Registry (pull_request) Has been skipped

Details

Enhance mobile user experience with touch controls and UI updates

- Implemented touch event listeners for movement via gestures on mobile devices.
- Updated UI instructions to include new mobile control features.
- Improved CSS for better readability on smaller screens.

2025-11-26 01:28:54 -05:00

5.8 KiB

Raw Blame History

3D Coin Collector Game

A fun and engaging 3D game built with Three.js where you control a player to collect coins while avoiding obstacles. Test your reflexes and see how high you can score!

🎮 Game Overview

Navigate your character (a blue cube) through a 3D arena to collect golden coins while avoiding dangerous red obstacles. Each coin collected increases your score, but colliding with obstacles reduces your health. The game ends when your health reaches zero.

✨ Features

3D Graphics: Beautiful 3D environment with shadows, lighting, and fog effects
Smooth Controls: Responsive keyboard and touch controls
Dynamic Gameplay: Moving obstacles that bounce off boundaries
Animated Coins: Coins rotate and float with smooth animations
Health System: Start with 100 health, lose 1 point per obstacle collision
Score Tracking: Earn 10 points for each coin collected
Camera Follow: Third-person camera that follows your player
Mobile Support: Full touch control support for smartphones and tablets
Responsive Design: Adapts to different screen sizes

🎯 How to Play

Objective: Collect as many yellow coins as possible while avoiding red obstacles
Scoring: Each coin collected gives you 10 points
Health: You start with 100 health. Each collision with a red obstacle reduces health by 1
Game Over: When your health reaches 0, the game ends and displays your final score
Restart: Click "Play Again" to start a new game

🕹️ Controls

Desktop

W or ↑ Arrow Key: Move forward
S or ↓ Arrow Key: Move backward
A or ← Arrow Key: Move left
D or → Arrow Key: Move right

Mobile/Touch Devices

Touch and Drag: Touch anywhere on the screen and drag to move your character
- Drag up to move forward
- Drag down to move backward
- Drag left to move left
- Drag right to move right
- Movement is relative to the center of the screen

🎨 Game Elements

Player

Appearance: Blue cube with metallic material
Behavior: Rotates while moving, stays within arena boundaries
Collision: Pushed back when hitting obstacles

Coins

Appearance: Golden spheres with emissive glow
Behavior: Rotate continuously and float up and down
Value: 10 points each
Respawn: A new coin spawns immediately after collection

Obstacles

Appearance: Red-orange boxes
Behavior: Move randomly and bounce off arena boundaries
Damage: -1 health per collision
Avoidance: Stay away to preserve your health!

🛠️ Technical Details

Built With

Three.js r128: 3D graphics library
Vanilla JavaScript: No frameworks required
HTML5 Canvas: WebGL rendering
CSS3: Modern styling and responsive design

Game Architecture

Object-Oriented Design: Uses ES6 classes with inheritance
GameObject Base Class: Common functionality for all game entities
Modular Classes: Player, Coin, and Obstacle extend GameObject
Game Loop: Smooth 60 FPS animation using requestAnimationFrame

Features Implementation

Shadow Mapping: PCF soft shadows for realistic lighting
Fog Effect: Atmospheric depth with distance fog
Collision Detection: Distance-based collision system
Boundary Constraints: Prevents player and obstacles from leaving the arena
Touch Event Handling: Full support for multi-touch devices

📋 Requirements

Modern web browser with WebGL support (Chrome, Firefox, Safari, Edge)
JavaScript enabled
Internet connection (for Three.js CDN)

🚀 Getting Started

Clone or Download this repository
Open index.html in your web browser
Start Playing immediately - no installation required!

Local Server (Optional)

For best performance, you can run a local server:

# Using Python 3
python -m http.server 8000

# Using Python 2
python -m SimpleHTTPServer 8000

# Using Node.js (with http-server)
npx http-server

Then open http://localhost:8000 in your browser.

📱 Mobile Compatibility

The game is fully optimized for mobile devices:

Touch controls work on all touch-enabled devices
Responsive UI that adapts to screen size
Optimized performance for mobile browsers
No joystick clutter - clean touch interface

🎮 Game Mechanics

Movement

Player moves at a constant speed of 0.15 units per frame
Movement is constrained within the 30x30 arena
Player rotates while moving for visual feedback

Coin Collection

Coins spawn randomly across the arena
10 coins are present at the start
New coins spawn immediately after collection
Coins have a collision radius of 0.8 units

Obstacle Behavior

8 obstacles spawn at game start
Each obstacle moves in a random direction
Obstacles bounce off arena boundaries
Obstacles have a collision radius of 1.5 units
Spawn away from player's starting position

Camera System

Third-person camera follows the player
Camera positioned 15 units behind the player
Always looks at the player position
Smooth camera movement

🏆 Tips for High Scores

Stay Mobile: Keep moving to avoid obstacles
Plan Your Route: Look ahead to plan coin collection paths
Avoid Corners: Obstacles can trap you in corners
Watch Your Health: Health is displayed in the top-left corner
Practice: The more you play, the better you'll get at avoiding obstacles!

🐛 Known Issues

None at the moment! If you encounter any issues, please report them.

📝 License

This project is open source and available for educational purposes.

🙏 Acknowledgments

Three.js community for the excellent 3D library
Built as a learning project for 3D web game development

Enjoy the game and try to beat your high score! 🎉

5.8 KiB Raw Blame History