Meta Description" name="description" />
<!DOCTYPE html>
<html>
<head>
<title>Runner Game</title>
<style>
body { margin:0; overflow:hidden; background:#222; }
canvas { background:#444; display:block; margin:auto; }
</style>
</head>
<body>
<canvas id="game" width="800" height="400"></canvas>
<script>
let canvas = document.getElementById("game");
let ctx = canvas.getContext("2d");
let player = {
x:100,
y:300,
width:40,
height:40,
color:"red"
};
let obstacle = {
x:800,
y:300,
width:40,
height:40,
color:"black"
};
let speed = 5;
function drawRect(obj){
ctx.fillStyle = obj.color;
ctx.fillRect(obj.x, obj.y, obj.width, obj.height);
}
function update(){
ctx.clearRect(0,0,800,400);
obstacle.x -= speed;
if(obstacle.x < -40){
obstacle.x = 800;
}
if(player.x < obstacle.x + obstacle.width &&
player.x + player.width > obstacle.x &&
player.y < obstacle.y + obstacle.height &&
player.y + player.height > obstacle.y){
alert("Game Over!");
obstacle.x = 800;
}
drawRect(player);
drawRect(obstacle);
requestAnimationFrame(update);
}
document.addEventListener("keydown", function(e){
if(e.key === "ArrowUp"){
player.y = 250;
setTimeout(()=>{ player.y = 300; }, 300);
}
});
update();
</script>
</body>
</html>
1
1
2KB
2KB
98.0ms
112.0ms
98.0ms