모바일 컨트롤 추가 | 📜 MOKSHA Devlog — Issue # 27

📜 MOKSHA Devlog — Issue #27

feat: Mobile Touch Controls — On-Screen Virtual Buttons

दिनांक (Date): 2 अगस्त 2026
Issue: #27 — Mobile Touch Controls
Status: ✅ Completed

🔱 संदर्भ (Context)

MOKSHA अब तक केवल Keyboard और Gamepad से खेला जा सकता था।
Mobile और Tablet users — जो भारत में majority हैं — के लिए गेम practically inaccessible था।

शास्त्र कहता है:

“इंद्रिय-स्पर्श (touch) भी एक इंद्रिय है।”
Mobile पर भी नाम-जाप और वैराग्य accessible होने चाहिए।

यह feature उसी भाव से जन्मा।

🎯 क्या बदला (What Changed)

नए Virtual Buttons जोड़े गए

Button क्रिया Key Mapped ← रथ बायाँ A → रथ दायाँ D ॐ नाम-जाप SPACE 🌿 वैराग्य S 🙏 नाम समर्पण W 🐚 शंख Y 🪔 ज्योति B 📜 शास्त्र ESC ⏸ स्तम्भन F

🛠️ तकनीकी विवरण (Technical Details)

Architecture — Zero Breaking Changes

सबसे महत्वपूर्ण design decision था: existing keys object में directly inject करना।

// Virtual button touchstart → existing keys object में inject
button.addEventListener('touchstart', (e) => {
  e.preventDefault();
  keys[mappedKey] = true;  // जैसे keyboard press हो
});

button.addEventListener('touchend', (e) => {
  e.preventDefault();
  keys[mappedKey] = false; // जैसे keyboard release हो
});

Enter fullscreen mode Exit fullscreen mode

इससे game loop को कुछ भी नहीं बदलना पड़ा। Touch = Keyboard की तरह ही behave करता है।

Auto-Show / Auto-Hide Logic

/* Desktop पर hidden */
#touch-controls {
  display: none;
}

/* Mobile पर auto-show */
@media (max-width: 768px), (pointer: coarse) {
  #touch-controls {
    display: flex;
  }
}

Enter fullscreen mode Exit fullscreen mode

pointer: coarse — यह detect करता है कि user touchscreen use कर रहा है, चाहे screen size कुछ भी हो।

Overlay Strategy

• Controls fixed position overlay के रूप में game canvas के ऊपर render होते हैं
• Left side: ← → navigation buttons
• Right side: ॐ, 🌿, 🙏, 🐚, 🪔, 📜, ⏸ action buttons
• pointer-events: none game canvas पर, ताकि touch controls ही events receive करें

🧪 Test किए गए Devices

• Android (Chrome Mobile)
• iOS Safari
• iPad (landscape + portrait)
• Desktop browser (controls hidden — ✅)

📐 Design Decisions

निर्णय कारण keys object inject करना Zero breaking changes — game loop unchanged touchstart + touchend दोनों Press और release दोनों simulate होने चाहिए e.preventDefault() Scroll और default touch behavior block करना CSS pointer: coarse Screen size नहीं, input type से detect Fixed overlay Canvas resize से independent रहे

🔮 आगे क्या (Future Scope)

• [ ] Haptic feedback (navigator.vibrate()) on button press
• [ ] Swipe gestures (left/right swipe = ←/→)
• [ ] Button opacity control (user-configurable)
• [ ] Landscape vs Portrait layout auto-switch
• [ ] Multi-touch support (एक साथ move + action)

🙏 समापन (Closing Note)

यह feature MOKSHA को भारत के हर corner तक पहुँचाने की दिशा में एक कदम है —
जहाँ smartphone है पर keyboard नहीं।

“सर्वे भवन्तु सुखिनः” — सभी खिलाड़ी खेल सकें, चाहे device कोई भी हो।

Commit:

https://github.com/weirdcodesofficial/MOKSHA/commit/f4a20e244e297667c497506f1bd8c696f6ff682b

MOKSHA Devlog | weirdcodesofficial