Files
endless-runner-vibe/web/index.html
Gabriel Kaszewski 19d79be44c Add touchscreen support for mobile play
- 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>
2026-03-07 00:47:01 +01:00

59 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<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;
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: 8px;
font-size: 13px;
opacity: 0.6;
}
</style>
</head>
<body>
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
<div id="status">Loading…</div>
<script>
var statusEl = document.getElementById('status');
var Module = {
canvas: document.getElementById('canvas'),
onRuntimeInitialized: function() {
statusEl.textContent = 'Tap or SPACE / W / ↑ to jump';
},
print: function(text) { console.log(text); },
printErr: function(text) { console.error(text); },
};
</script>
<script src="endless_runner.js"></script>
</body>
</html>