CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bike Adventure</title>
<style>
.bikeAdventure3841-container {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: flex-start;
height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
background-color: #87CEEB;
}
.bikeAdventure3841-game-area {
width: 800px;
height: 400px;
background-color: #F0F8FF;
position: relative;
overflow: hidden;
border: 2px solid #4682B4;
}
.bikeAdventure3841-bike {
width: 60px;
height: 40px;
background-color: #FF6347;
position: absolute;
bottom: 20px;
left: 50px;
}
.bikeAdventure3841-obstacle {
width: 30px;
height: 30px;
background-color: #2E8B57;
position: absolute;
bottom: 20px;
}
.bikeAdventure3841-controls {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-left: 20px;
}
.bikeAdventure3841-button {
margin: 5px 0;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #4682B4;
color: white;
border: none;
border-radius: 5px;
}
.bikeAdventure3841-info {
margin-top: 20px;
text-align: left;
}
#score {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
@media (max-width: 900px) {
.bikeAdventure3841-container {
flex-direction: column;
align-items: center;
}
.bikeAdventure3841-game-area {
width: 100%;
max-width: 600px;
height: 300px;
}
.bikeAdventure3841-controls {
margin-left: 0;
margin-top: 20px;
align-items: center;
}
}
</style>
</head>
<body>
<div class="bikeAdventure3841-container">
<div class="bikeAdventure3841-game-area" id="gameArea">
<div class="bikeAdventure3841-bike" id="bike"></div>
</div>
<div class="bikeAdventure3841-controls">
<h2>Bike Adventure</h2>
<p>Ride and jump over obstacles!</p>
<div id="score">Score: 0</div>
<button class="bikeAdventure3841-button" id="startButton">Start Game</button>
<button class="bikeAdventure3841-button" id="newGameButton">New Game</button>
<div class="bikeAdventure3841-info">
<h3>How to Play:</h3>
<ul>
<li>Press Space to jump</li>
<li>Avoid obstacles</li>
<li>Survive as long as possible</li>
</ul>
</div>
</div>
</div>
<script>
const gameArea = document.getElementById('gameArea');
const bike = document.getElementById('bike');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const scoreDisplay = document.getElementById('score');
let isJumping = false;
let score = 0;
let gameLoop;
let obstacleInterval;
function jump() {
if (isJumping) return;
isJumping = true;
let position = 20;
let jumpInterval = setInterval(() => {
if (position >= 100) {
clearInterval(jumpInterval);
let fallInterval = setInterval(() => {
if (position <= 20) {
clearInterval(fallInterval);
isJumping = false;
} else {
position -= 5;
bike.style.bottom = position + 'px';
}
}, 20);
} else {
position += 5;
bike.style.bottom = position + 'px';
}
}, 20);
}
function createObstacle() {
const obstacle = document.createElement('div');
obstacle.classList.add('bikeAdventure3841-obstacle');
obstacle.style.left = '800px';
gameArea.appendChild(obstacle);
let position = 800;
let moveInterval = setInterval(() => {
if (position < -30) {
clearInterval(moveInterval);
gameArea.removeChild(obstacle);
} else {
position -= 5;
obstacle.style.left = position + 'px';
checkCollision(obstacle);
}
}, 20);
}
function checkCollision(obstacle) {
const bikeRect = bike.getBoundingClientRect();
const obstacleRect = obstacle.getBoundingClientRect();
if (
bikeRect.left < obstacleRect.right &&
bikeRect.right > obstacleRect.left &&
bikeRect.top < obstacleRect.bottom &&
bikeRect.bottom > obstacleRect.top
) {
gameOver();
}
}
function updateScore() {
score++;
scoreDisplay.textContent = `Score: ${score}`;
}
function gameOver() {
clearInterval(gameLoop);
clearInterval(obstacleInterval);
alert(`Game Over! Your score: ${score}`);
}
function startGame() {
score = 0;
scoreDisplay.textContent = 'Score: 0';
gameArea.innerHTML = '<div class="bikeAdventure3841-bike" id="bike"></div>';
bike = document.getElementById('bike');
gameLoop = setInterval(updateScore, 100);
obstacleInterval = setInterval(createObstacle, 2000);
startButton.disabled = true;
}
function newGame() {
clearInterval(gameLoop);
clearInterval(obstacleInterval);
startGame();
}
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
jump();
}
});
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', newGame);
</script>
</body>
</html>