- 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>
59 lines
1.5 KiB
HTML
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>
|