snake-junct

šŸŽ® Casual & Fun: ā€œA chibi-powered arcade chaos ā€” dodge snakes, jump over obstacles, and survive as long as you can!ā€

Comment

Snake Junct - Project Overview

Inspiration

We were inspired to create a game that goes beyond simple mechanics by incorporating machine learning to create a personalized experience for each player. We wanted to build something that learns and adapts, making the game challenging yet fair for players of all skill levels. The idea of combining classic arcade-style gameplay with modern AI-driven difficulty adjustment was exciting, and we saw an opportunity to create something truly unique on the Reddit platform.

What it does

Snake Junct is an intelligent side-scrolling dodge game where players navigate a cute chibi character through waves of obstacles and enemies. The game features:

  • ML-Powered Adaptive Difficulty: Tracks each player's performance (score, survival time, reaction speed, jump patterns) and dynamically adjusts obstacle count, spacing, enemy speed, and power-up availability to match their skill level (0-100%)
  • Diverse Enemies: Ultra-detailed coiling snakes with multi-layer visual effects, vibrant color gradients, and realistic animations
  • Multiple Themes: Beach, night, retro, and desert backgrounds with detailed environmental elements
  • Character Customization: 5 different character skins with unique color schemes
  • Power-Up System: Shield power-ups that provide 20 seconds of invincibility, with adaptive spawn rates
  • Special Events: Temporary themed events (like our Halloween special with witches, pumpkins, blood moon, and spooky sounds)
  • Persistent Learning: Player profiles stored locally to maintain skill tracking across sessions

How we built it

We built Snake Junct using:

  • Frontend: React with TypeScript for type safety and better development experience
  • Canvas Rendering: HTML5 Canvas 2D API for high-performance graphics with custom rendering for all game elements
  • Web Audio API: For dynamic sound generation without external audio files
  • Machine Learning Logic: Custom algorithm using exponential moving averages to track player metrics and calculate skill levels (40% score + 40% survival time + 20% reaction speed)
  • LocalStorage: For persistent player profile storage across sessions
  • Reddit Devvit Platform: Integrated as a Reddit app for seamless community engagement

We initially attempted to use PixiJS for enhanced graphics but pivoted to Canvas 2D due to Reddit Devvit's security restrictions (no unsafe-eval). This actually led to more optimized, custom-built rendering solutions.

Challenges we ran into

  1. PixiJS Compatibility: Reddit Devvit's Content Security Policy blocked PixiJS, forcing us to rebuild all graphics using Canvas 2D
  2. Performance Optimization: Rendering detailed coiling snakes with multiple visual layers while maintaining 60 FPS required careful optimization
  3. ML Algorithm Tuning: Balancing the adaptive difficulty to be challenging but not frustrating took multiple iterations
  4. Collision Detection: Creating accurate collision detection for complex shapes (coiling snakes, pillars with gaps) required custom algorithms
  5. Visual Clarity: Making coiling snakes visible and distinct required multiple enhancement passes (glow effects, larger sizes, vibrant colors)
  6. Obstacle Spacing: Ensuring snakes and pillars never spawn together in impossible-to-avoid combinations required a complete redesign of the spawn system

Accomplishments that we're proud of

  • Functional ML System: Successfully implemented a working adaptive difficulty system that genuinely improves player experience
  • Visual Polish: Created stunning visual effects including multi-layer glows, dynamic color gradients, animated tongues, and detailed scale patterns
  • Performance: Maintained smooth 60 FPS gameplay despite complex rendering and real-time calculations
  • Code Quality: Clean, maintainable codebase with clear separation of concerns and easy-to-modify event systems
  • Player Experience: Built a game that's accessible to beginners but challenging for skilled players through intelligent adaptation
  • Rapid Event System: Created a flexible event system that allows quick theme changes (Halloween event) without touching core logic

What we learned

  • Canvas 2D Mastery: Deep understanding of Canvas API, gradients, shadows, and performance optimization techniques
  • ML in Games: How to collect meaningful player metrics and translate them into adaptive gameplay adjustments
  • User Experience Design: The importance of visual feedback, sound effects, and progressive difficulty in player engagement
  • Platform Constraints: How to work within platform limitations (CSP restrictions) and turn them into opportunities for optimization
  • Event-Driven Architecture: Building systems that are modular and easy to extend with temporary features
  • Color Theory: RGB manipulation for dynamic color generation and creating visually appealing gradients
  • Game Balance: The delicate art of making a game challenging without being frustrating

What's next for snake-junct

Enhanced ML Features

  • Predictive difficulty adjustment based on player patterns
  • Personalized obstacle patterns that challenge specific weaknesses
  • Difficulty recommendations based on time of day and session length

Multiplayer Features

  • Real-time leaderboards with skill-adjusted rankings
  • Ghost racing against friends' best runs
  • Cooperative mode where players share shields

More Content

  • Additional enemy types with unique movement patterns
  • Boss battles at score milestones
  • Unlockable character skins based on achievements
  • More themed backgrounds and seasonal events

Advanced Analytics

  • Detailed player statistics dashboard
  • Performance graphs showing skill progression over time
  • Achievement system with badges

Accessibility

  • Colorblind modes
  • Adjustable game speed
  • Touch controls optimization for mobile

Community Features

  • Daily challenges with special rewards
  • Community-voted event themes
  • Replay sharing system
  • Tournament mode with brackets

Technical Improvements

  • WebGL renderer option for even better performance
  • Procedural music generation that adapts to gameplay intensity
  • Cloud save for cross-device profile syncing
Share this project:

Updates