ЁЯУЬ 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: nonegame 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
Top comments (0)