Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Endless Runner</title>
<style>
body {
margin: 0;
background: #111;
overflow: hidden;
touch-action: none;
font-family: Arial;
}
canvas {
display: block;
margin: auto;
background: #222;
}
</style>
</head>
<body>
<canvas id="game"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
// Full mobile screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let groundY = canvas.height - 100;
let player = {
x: 80,
y: groundY - 40,
w: 40,
h: 40,
vy: 0,
jumping: false
};
let gravity = 0.8;
let obstacle = {
x: canvas.width,
y: groundY - 40,
w: 40,
h: 40,
speed: 7
};
let score = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// ground
ctx.fillStyle = "white";
ctx.fillRect(0, groundY, canvas.width, 2);
// player
ctx.fillStyle = "lime";
ctx.fillRect(player.x, player.y, player.w, player.h);
// obstacle
ctx.fillStyle = "red";
ctx.fillRect(obstacle.x, obstacle.y, obstacle.w, obstacle.h);
// score
ctx.fillStyle = "white";
ctx.font = "20px Arial";
ctx.fillText("Score: " + score, 20, 30);
}
function update() {
// gravity
player.y += player.vy;
player.vy += gravity;
if (player.y >= groundY - player.h) {
player.y = groundY - player.h;
player.vy = 0;
player.jumping = false;
}
// move obstacle
obstacle.x -= obstacle.speed;
if (obstacle.x < -50) {
obstacle.x = canvas.width + Math.random() * 200;
score++;
obstacle.speed += 0.2; // slowly harder
}
// collision
if (
player.x < obstacle.x + obstacle.w &&
player.x + player.w > obstacle.x &&
player.y < obstacle.y + obstacle.h &&
player.y + player.h > obstacle.y
) {
alert("π Game Over! Score: " + score);
location.reload();
}
}
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
// TAP TO JUMP (mobile)
function jump() {
if (!player.jumping) {
player.vy = -15;
player.jumping = true;
}
}
document.addEventListener("touchstart", jump);
document.addEventListener("click", jump);
loop();
</script>
</body>
</html>1
1
3KB
3KB
107.0ms
120.0ms
107.0ms