GKaszewski/endless-runner-vibe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add touchscreen support for mobile play

Browse Source 
- game.rs: include MOUSE_BUTTON_LEFT in jump and restart checks;
  Emscripten maps single taps to mouse events so no JS glue needed
- web/index.html: mobile viewport meta (no user-scalable), CSS canvas
  scaling (max-width/max-height 100%), touch-action:none to prevent
  browser consuming taps as scroll/zoom, updated hint text

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Gabriel Kaszewski
2026-03-07 00:47:01 +01:00
parent 684d07c63b
commit 19d79be44c
2 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/game.rs
View File

@@ -31,7 +31,8 @@ impl Game {
GameState::Playing => {
let jump = rl.is_key_pressed(KeyboardKey::KEY_SPACE)
|| rl.is_key_pressed(KeyboardKey::KEY_UP)
|| rl.is_key_pressed(KeyboardKey::KEY_W);
|| rl.is_key_pressed(KeyboardKey::KEY_W)
|| rl.is_mouse_button_pressed(MouseButton::MOUSE_BUTTON_LEFT);
self.world.update(dt, jump, &self.cfg);
@@ -47,6 +48,7 @@ impl Game {
if rl.is_key_pressed(KeyboardKey::KEY_R)
|| rl.is_key_pressed(KeyboardKey::KEY_SPACE)
|| rl.is_key_pressed(KeyboardKey::KEY_ENTER)
|| rl.is_mouse_button_pressed(MouseButton::MOUSE_BUTTON_LEFT)
{
self.world = World::new(&self.cfg);
self.state = GameState::Playing;
@@ -131,7 +133,7 @@ impl Game {
);
// Restart prompt
let prompt = "SPACE / R / ENTER to restart";
let prompt = "SPACE / R / ENTER / TAP to restart";
let ps = 22;
let pw = d.measure_text(prompt, ps);
// Blink at ~2 Hz using the world's accumulated elapsed time.
@@ -139,7 +141,7 @@ impl Game {
d.draw_text(prompt, (sw - pw) / 2, panel_y + 240, ps, Color::new(160, 200, 255, 255));
}
let ctrl = "SPACE / W / UP to jump";
let ctrl = "SPACE / W / UP / TAP to jump";
let cw = d.measure_text(ctrl, 18);
d.draw_text(ctrl, (sw - cw) / 2, panel_y + 285, 18, Color::new(100, 130, 180, 255));
}

19
web/index.html
View File

@@ -2,26 +2,37 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Endless Runner</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
height: 100%;
overflow: hidden;
}
body {
background: #16182e;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
height: 100%;
font-family: monospace;
color: #a0b8ff;
}
#canvas {
display: block;
/* Scale down to fit any viewport while keeping aspect ratio */
max-width: 100%;
max-height: 100vh;
width: auto;
height: auto;
border: 1px solid #3050a0;
/* Prevent browser from consuming taps as scroll/zoom */
touch-action: none;
}
#status {
margin-top: 12px;
margin-top: 8px;
font-size: 13px;
opacity: 0.6;
}
@@ -36,7 +47,7 @@
var Module = {
canvas: document.getElementById('canvas'),
onRuntimeInitialized: function() {
statusEl.textContent = 'SPACE / W / ↑ to jump';
statusEl.textContent = 'Tap or SPACE / W / ↑ to jump';
},
print: function(text) { console.log(text); },
printErr: function(text) { console.error(text); },