Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<title>Pixel Runner</title>
<style>
body { margin:0; overflow:hidden; background:black; }
canvas { display:block; margin:auto; background:#111; }
</style>
</head>
<body>
<canvas id="game" width="600" height="300"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
let player = { x:50, y:200, w:20, h:20, vy:0, jump:false };
let gravity = 0.5;
let obstacle = { x:600, y:220, w:20, h:20 };
let score = 0;
function drawPlayer() {
ctx.fillStyle = "lime";
ctx.fillRect(player.x, player.y, player.w, player.h);
}
function drawObstacle() {
ctx.fillStyle = "red";
ctx.fillRect(obstacle.x, obstacle.y, obstacle.w, obstacle.h);
}
function update() {
ctx.clearRect(0,0,600,300);
// gravity
player.vy += gravity;
player.y += player.vy;
if(player.y > 200){
player.y = 200;
player.vy = 0;
player.jump = false;
}
// obstacle move
obstacle.x -= 5;
if(obstacle.x < 0){
obstacle.x = 600;
score++;
}
// 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();
}
drawPlayer();
drawObstacle();
ctx.fillStyle = "white";
ctx.fillText("Score: " + score, 10, 20);
requestAnimationFrame(update);
}
document.addEventListener("keydown", function(e){
if(e.code === "Space" && !player.jump){
player.vy = -10;
player.jump = true;
}
});
update();
</script>
</body>
</html>1
1
2KB
2KB
98.0ms
112.0ms
98.0ms