A futuristic 3D space defense game built with SvelteKit and Three.js
Orbit One is an immersive 3D space defense game where players orbit around a star, defending it from incoming asteroids, aliens, and space dragons. Built with modern web technologies, it features stunning neon-cyberpunk aesthetics, real-time 3D graphics, and Web3 wallet integration.
- Orbital Combat: Control your spaceship as it orbits around a central star
- Click-to-Lock Targeting: Click on enemies to lock your aim for precision shooting
- Multiple Enemy Types: Asteroids, Aliens, and Space Dragons with unique behaviors
- Progressive Difficulty: Enemies get faster and stronger as you advance
- Neon Cyberpunk Design: Stunning glass-morphism panels with cyan and orange glow effects
- Responsive Layout: Optimized for desktop and mobile browsers
- Animated Effects: Post-processing bloom, particle systems, and smooth transitions
- Player Profiles: Detailed stats with radar charts and performance metrics
- Credits & Coins: Earn currency by destroying enemies
- Gem System: Premium currency for special items
- Ship Shop: Purchase and customize different spaceships
- Upgrade System: Enhance laser damage, fire rate, hull integrity, and orbit control
- Leaderboard: Compete with top commanders globally
- Player Profiles: View detailed stats, achievements, and skill distribution
- Avatar System: Random avatar generation for each player
- MetaMask Login: Connect your Ethereum wallet to login
- Wallet Display: Show your wallet address in player profiles
- Decentralized Identity: Your wallet = your game identity
| Technology | Purpose |
|---|---|
| SvelteKit | Full-stack web framework with SSR/SSG support |
| Svelte | Reactive component framework with minimal bundle size |
| Vite | Lightning-fast build tool and dev server |
| Technology | Purpose |
|---|---|
| Three.js | WebGL-based 3D rendering engine |
| Threlte | Svelte bindings for Three.js (declarative 3D) |
| @threlte/core | Core Threlte library |
| @threlte/extras | Additional components (GLTF, Environment, etc.) |
| Technology | Purpose |
|---|---|
| EffectComposer | Three.js post-processing pipeline |
| UnrealBloomPass | Neon glow bloom effects |
| RenderPass / OutputPass | Scene rendering passes |
| Technology | Purpose |
|---|---|
| Svelte Stores | Reactive state management |
| Zustand-style patterns | Game state organization |
| Technology | Purpose |
|---|---|
| Chart.js | Interactive charts (radar, doughnut) |
| Avatar API | Dynamic player avatar generation |
| Technology | Purpose |
|---|---|
| MetaMask | Ethereum wallet integration |
| window.ethereum | Web3 provider detection |
| Technology | Purpose |
|---|---|
| CSS Variables | Theming with neon colors |
| Glass-morphism | Modern frosted glass UI effects |
| CSS Grid/Flexbox | Responsive layouts |
orbitone/
├── src/
│ ├── lib/
│ │ ├── components/
│ │ │ ├── ui/ # UI Components
│ │ │ │ ├── LoginScreen.svelte # MetaMask + Guest login
│ │ │ │ ├── MainMenu.svelte # Game mode selection
│ │ │ │ ├── UpgradeScreen.svelte # Ship upgrades
│ │ │ │ ├── ShopScreen.svelte # In-game shop
│ │ │ │ ├── SettingsScreen.svelte # Game settings
│ │ │ │ ├── LeaderboardScreen.svelte # Global rankings
│ │ │ │ └── PlayerProfileModal.svelte # Stats & charts
│ │ │ ├── models/
│ │ │ │ ├── Spaceship.svelte # Player ship model
│ │ │ │ └── Target.svelte # Enemy models (asteroid, alien, dragon)
│ │ │ ├── Scene.svelte # Main 3D game scene
│ │ │ ├── App.svelte # Root component
│ │ │ └── ...
│ │ └── stores/
│ │ └── gameStore.js # Global game state
│ ├── routes/
│ │ └── +page.svelte # Main entry point
│ └── app.css # Global styles
├── static/
│ ├── orbit one banner.png # Game banner
│ ├── left arrow.png # Navigation icon
│ ├── settings icon.png # Settings icon
│ ├── leaderboard cup.png # Trophy icon
│ ├── shop button.png # Shop icon
│ └── space.jpg # Background image
├── package.json
├── svelte.config.js
├── vite.config.js
└── README.md
- Node.js 18+
- npm or pnpm
- MetaMask browser extension (for Web3 features)
# Clone the repository
git clone https://github.com/0xsupremedev/orbitone.git
cd orbitone
# Install dependencies
npm install
# Start development server
npm run dev
# Open in browser
# http://localhost:5173# Create optimized build
npm run build
# Preview production build
npm run preview- Login: Connect with MetaMask or play as Guest
- Choose Mode: Select Endless Run (other modes coming soon)
- Upgrade: Spend credits to enhance your ship
- Play:
- Mouse moves your ship around the orbit
- Click to shoot at enemies
- Click on enemies to lock your aim
- Protect the central star from being destroyed!
| Color | Hex | Usage |
|---|---|---|
| Neon Cyan | #00f2ff |
Primary highlights, glow effects |
| Fiery Orange | #ff6600 |
Warnings, fire effects |
| Fiery Red | #ff0033 |
Health, critical alerts |
| Deep Space | #050a1b |
Background, panels |
- Font: Orbitron (Google Fonts)
- Weights: 400, 700, 900
- Style: All-caps with letter-spacing
The game uses a centralized store (gameStore.js) managing:
{
currentScreen: 'login' | 'main-menu' | 'upgrades' | 'shop' | 'settings' | 'leaderboard' | 'game',
playerName: string,
walletAddress: string, // MetaMask address
credits: number,
coins: number,
gems: number,
score: number,
starHealth: number, // 0-100
isPlaying: boolean,
ownedShips: string[],
selectedShip: string,
settings: { ... },
upgrades: { ... }
}- Campaign Mode with story missions
- Daily Challenges with special rewards
- Multiplayer co-op defense
- NFT ship skins
- On-chain leaderboard
- Mobile app (Capacitor)
- Sound effects and music
- More enemy types and bosses
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
0xSupremeDev
- GitHub: @0xsupremedev
⭐ Star this repo if you like it! ⭐
Made with 💜 using Svelte, Three.js, and Web3