DEV Community

Weird Codes
Weird Codes

Posted on • Edited on • Originally published at weirdcodes.itch.io

Added Mobile Controls

ЁЯУЬ 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

Top comments (0)