Here's a simple runner game written in HTML, CSS, and JavaScript. The player (a block) jumps over obstacles that move across the screen. It’s lightweight and runs directly in the browser.
đš️ Runner Game in HTML
✅ Features
Jump with spacebar
Avoid incoming obstacles
Game over on collision
đ Full Code
You can copy and paste this into a single .html file and open it in your browser:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Runner Game</title>
<style>
body {
margin: 0;
overflow: hidden;
background: #f0f0f0;
font-family: sans-serif;
}
#game {
position: relative;
width: 100vw;
height: 100vh;
background: #87ceeb;
}
#player {
position: absolute;
bottom: 0;
left: 50px;
width: 50px;
height: 50px;
background: #333;
}
.obstacle {
position: absolute;
bottom: 0;
width: 30px;
height: 60px;
background: red;
animation: moveObstacle 3s linear infinite;
}
@keyframes moveObstacle {
from { right: -30px; }
to { right: 100vw; }
}
#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 24px;
color: #333;
}
</style>
</head>
<body>
<div id="game">
<div id="player"></div>
<div id="score">Score: 0</div>
</div>
<script>
const player = document.getElementById("player");
const game = document.getElementById("game");
const scoreDisplay = document.getElementById("score");
let isJumping = false;
let score = 0;
function jump() {
if (isJumping) return;
isJumping = true;
let jumpHeight = 0;
const jumpInterval = setInterval(() => {
if (jumpHeight >= 150) {
clearInterval(jumpInterval);
const fallInterval = setInterval(() => {
if (jumpHeight <= 0) {
clearInterval(fallInterval);
isJumping = false;
}
jumpHeight -= 5;
player.style.bottom = jumpHeight + "px";
}, 20);
}
jumpHeight += 5;
player.style.bottom = jumpHeight + "px";
}, 20);
}
function createObstacle() {
const obstacle = document.createElement("div");
obstacle.classList.add("obstacle");
obstacle.style.right = "-30px";
game.appendChild(obstacle);
let obstaclePosition = window.innerWidth;
const moveInterval = setInterval(() => {
obstaclePosition -= 5;
obstacle.style.right = obstaclePosition + "px";
const playerRect = player.getBoundingClientRect();
const obstacleRect = obstacle.getBoundingClientRect();
if (
obstacleRect.left < playerRect.right &&
obstacleRect.right > playerRect.left &&
obstacleRect.bottom > playerRect.top
) {
alert("Game Over! Final Score: " + score);
location.reload();
}
if (obstaclePosition < -30) {
clearInterval(moveInterval);
game.removeChild(obstacle);
score++;
scoreDisplay.textContent = "Score: " + score;
}
}, 20);
}
setInterval(createObstacle, 2000);
document.addEventListener("keydown", (e) => {
if (e.code === "Space") jump();
});
</script>
</body>
</html>
đ§ How It Works
Press Spacebar to jump.
Red obstacles move from right to left.
Collision detection ends the game.
Score increases with each obstacle passed.
No comments:
Post a Comment