RhythmMech is a professional mobile-first rhythm game with anime/kawaii aesthetic and mecha-inspired visual effects. Built with Phaser.js and featuring a complete synthesized audio system, it delivers an immersive rhythm gaming experience with industrial blast door transitions and advanced note mechanics.
| Component | Technology | Purpose |
|---|---|---|
| Game Engine | Phaser.js 3.70.0 | High-performance 2D rhythm game framework |
| Audio System | Web Audio API + Synthesized WAV | Low-latency rhythm precision |
| Frontend | HTML5 + CSS3 + ES6 | Mobile-optimized web application |
| Deployment | Docker + nginx | Containerized dual-service architecture |
| Admin Portal | Python Flask + Authelia | Protected beatmap management |
| SSL/Proxy | Traefik v3.0 | Automatic HTTPS with Let’s Encrypt |
| Audio Generation | Python + numpy | Synthesized music and SFX creation |
# Main game interface
server {
listen 80;
root /usr/share/nginx/html;
index index.html;
# Game assets
location /assets/ { expires 1d; }
location /js/ { expires 1h; }
location /css/ { expires 1h; }
}
# Protected by Authelia authentication
rhythm-admin:
build:
context: ./rhythm-game
dockerfile: Dockerfile.admin
labels:
- traefik.http.routers.rhythm-admin.middlewares=authelia-auth
- traefik.http.routers.rhythm-admin.rule=Host(`admin.rhythm.playtopia.com.au`)
// Advanced note timing and scoring
class NoteSystem {
processNote(note) {
const timing = this.calculateTiming(note.targetTime);
const accuracy = this.evaluateAccuracy(timing);
const score = this.calculateScore(accuracy, this.combo);
// Hold note mechanics
if (note.type === 'hold') {
return this.processHoldNote(note, timing);
}
return { accuracy, score, combo: this.updateCombo(accuracy) };
}
}
// Low-latency audio with Web Audio API
class AudioManager {
constructor() {
this.audioContext = new AudioContext();
this.musicVolume = 0.7;
this.sfxVolume = 0.8;
this.audioBuffers = new Map();
}
playSound(soundKey, volume = 1.0) {
const buffer = this.audioBuffers.get(soundKey);
if (buffer) {
const source = this.audioContext.createBufferSource();
const gainNode = this.audioContext.createGain();
source.buffer = buffer;
gainNode.gain.value = volume * this.sfxVolume;
source.connect(gainNode);
gainNode.connect(this.audioContext.destination);
source.start(0);
}
}
}
/home/thrax/unified-services/rhythm-game/
├── Dockerfile # Main game container (nginx)
├── Dockerfile.admin # Admin portal container (Python Flask)
├── nginx.conf # Game web server configuration
├── admin_service.py # Flask admin portal
├── requirements.txt # Python dependencies
├── generate_audio.py # Audio synthesis script
└── public/
├── index.html # Main game interface
├── admin.html # Admin portal interface
├── manifest.json # PWA configuration
├── css/main.css # Game styling with anime/mecha theme
├── js/
│ ├── main.js # Game initialization
│ ├── scenes/
│ │ ├── MenuScene.js # Main menu with audio feedback
│ │ ├── TrackSelectScene.js # Drag-scrollable track browser
│ │ ├── GameScene.js # Core rhythm gameplay
│ │ ├── ResultsScene.js # Performance metrics display
│ │ └── BlastDoorTransitionScene.js # Industrial transitions
│ ├── systems/
│ │ ├── NoteSystem.js # Note spawning and timing
│ │ ├── ScoreSystem.js # Scoring and combo management
│ │ ├── TimingSystem.js # Precision timing calculations
│ │ └── ComboSystem.js # Combo tracking and bonuses
│ ├── utils/
│ │ ├── AudioManager.js # Web Audio API management
│ │ ├── InputManager.js # Touch and keyboard input
│ │ ├── GameState.js # Persistent state management
│ │ ├── ParticleSystem.js # Visual effects
│ │ └── Constants.js # Game configuration
│ └── admin/admin.js # Admin portal functionality
├── assets/
│ ├── audio/
│ │ ├── mecha_heart.wav # Industrial/electronic track (128 BPM)
│ │ ├── neon_dreams.wav # Synthwave/cyberpunk track (140 BPM)
│ │ ├── kawaii_mech.wav # Upbeat anime-style track (180 BPM)
│ │ ├── perfect.wav # High-pitched confirmation tone
│ │ ├── great.wav # Mid-range positive feedback
│ │ ├── good.wav # Lower encouraging tone
│ │ ├── miss.wav # Gentle disappointment sound
│ │ ├── combo.wav # Celebration sound for combos
│ │ ├── shield.wav # Metallic activation sound
│ │ ├── menu_select.wav # UI navigation sound
│ │ └── menu_confirm.wav # UI confirmation sound
│ ├── images/apple-touch-icon.png # PWA icon (180x180)
│ └── textures/ # Visual effect textures
└── data/
├── tracks.json # Track metadata and configuration
└── beatmaps/ # Beatmap files for each track/difficulty
├── mecha_heart_easy.json
├── mecha_heart_medium.json
├── mecha_heart_hard.json
├── neon_dreams_easy.json
├── neon_dreams_medium.json
├── neon_dreams_hard.json
├── kawaii_mech_easy.json
├── kawaii_mech_medium.json
└── kawaii_mech_hard.json
The game features a complete audio system generated using Python and numpy:
# Professional audio synthesis with ADSR envelopes
def generate_adsr_envelope(length, attack, decay, sustain, release, sample_rate):
envelope = np.ones(length)
# Attack phase
attack_samples = int(attack * sample_rate)
envelope[:attack_samples] = np.linspace(0, 1, attack_samples)
# Decay phase
decay_samples = int(decay * sample_rate)
envelope[attack_samples:attack_samples + decay_samples] = \
np.linspace(1, sustain, decay_samples)
# Release phase
release_samples = int(release * sample_rate)
envelope[-release_samples:] = \
np.linspace(sustain, 0, release_samples)
return envelope
def create_chord_progression(bpm, duration, chords, sample_rate=44100):
# Generate harmonic chord progressions with proper timing
beat_duration = 60.0 / bpm
samples_per_beat = int(beat_duration * sample_rate)
audio = np.zeros(int(duration * sample_rate))
for i, chord in enumerate(chords):
start_sample = i * samples_per_beat
chord_audio = generate_chord(chord, beat_duration, sample_rate)
end_sample = start_sample + len(chord_audio)
if end_sample <= len(audio):
audio[start_sample:end_sample] += chord_audio
return audio
// Precise timing calculation for rhythm accuracy
class TimingSystem {
calculateAccuracy(noteTime, hitTime) {
const difference = Math.abs(noteTime - hitTime);
if (difference <= 30) return 'PERFECT';
if (difference <= 60) return 'GREAT';
if (difference <= 100) return 'GOOD';
return 'MISS';
}
calculateScore(accuracy, combo) {
const baseScores = {
'PERFECT': 300,
'GREAT': 200,
'GOOD': 100,
'MISS': 0
};
const comboMultiplier = Math.min(1 + (combo * 0.01), 2.0);
return Math.floor(baseScores[accuracy] * comboMultiplier);
}
}
Immersive scene transitions that enhance the mecha aesthetic:
Smooth, mobile-optimized track browsing:
# Main game service
rhythm-game:
build: ./rhythm-game
container_name: rhythm-game
restart: unless-stopped
networks:
- services-network
labels:
- traefik.enable=true
- traefik.http.routers.rhythm.rule=Host(`rhythm.playtopia.com.au`)
- traefik.http.routers.rhythm.entrypoints=websecure
- traefik.http.routers.rhythm.tls.certresolver=letsencrypt
# Admin portal service (protected)
rhythm-admin:
build:
context: ./rhythm-game
dockerfile: Dockerfile.admin
container_name: rhythm-admin
restart: unless-stopped
networks:
- services-network
labels:
- traefik.enable=true
- traefik.http.routers.rhythm-admin.rule=Host(`admin.rhythm.playtopia.com.au`)
- traefik.http.routers.rhythm-admin.entrypoints=websecure
- traefik.http.routers.rhythm-admin.tls.certresolver=letsencrypt
- traefik.http.routers.rhythm-admin.middlewares=authelia-auth
# Build and deploy both services
cd /home/thrax/unified-services
docker compose build rhythm-game rhythm-admin --no-cache
docker compose up -d rhythm-game rhythm-admin
# Generate new audio assets
cd rhythm-game
python generate_audio.py
# View service logs
docker compose logs -f rhythm-game
docker compose logs -f rhythm-admin
RhythmMech delivers a professional rhythm gaming experience with:
RhythmMech represents a complete rhythm game implementation with professional-grade audio synthesis, precise timing mechanics, and immersive visual design that captures the anime/mecha aesthetic perfectly.