Weird Codes

Posted on Aug 2 • Originally published at weirdcodes.itch.io

Added Mobile Controls | 📜 MOKSHA Devlog — Issue #27

#gamedev #mobile #opensource

📜 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 हो
});

इससे 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;
  }
}

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

DEV Community