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