<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>极简跳跃游戏</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; background: #f0f0f0; }
#game { position: relative; width: 300px; height: 400px; background: #e0f7fa; border: 2px solid #000; }
#player { position: absolute; bottom: 50px; left: 140px; width: 20px; height: 20px; background: #f44336; }
.obstacle { position: absolute; bottom: 0; width: 60px; height: 30px; background: #4caf50; }
#score { position: absolute; top: 10px; right: 10px; font-size: 20px; font-weight: bold; }
#startScreen, #endScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; }
button { padding: 10px 20px; font-size: 18px; cursor: pointer; background: #2196f3; color: white; border: none; border-radius: 5px; margin-top: 20px; }
</style>
</head>
<body>
<div id="game">
<div id="startScreen">
<h1>极简跳跃游戏</h1>
<p>按空格键跳跃，避开障碍物</p>
<button onclick="startGame()">开始游戏</button>
</div>
<div id="endScreen" class="hidden">
<h1>游戏结束</h1>
<p>得分: <span id="finalScore">0</span></p>
<button onclick="restartGame()">再玩一次</button>
</div>
<div id="player"></div>
<div id="score">0</div>
</div>
<script>
const game = document.getElementById('game');
const player = document.getElementById('player');
const startScreen = document.getElementById('startScreen');
const endScreen = document.getElementById('endScreen');
const scoreDisplay = document.getElementById('score');
const finalScoreDisplay = document.getElementById('finalScore');
let isJumping = false;
let jumpHeight = 0;
let jumpSpeed = 10;
let gravity = 0.5;
let score = 0;
let obstacles = [];
let gameInterval;
let obstacleInterval;
function startGame() {
startScreen.classList.add('hidden');
score = 0;
obstacles = [];
player.style.bottom = '50px';
gameInterval = setInterval(updateGame, 20);
obstacleInterval = setInterval(createObstacle, 2000);
document.addEventListener('keydown', handleKeydown);
}
function updateGame() {
// 处理跳跃
if (isJumping) {
jumpHeight -= jumpSpeed;
player.style.bottom = (parseInt(player.style.bottom) + jumpHeight) + 'px';
jumpSpeed -= gravity;
if (parseInt(player.style.bottom) <= 50) {
player.style.bottom = '50px';
isJumping = false;
jumpHeight = 0;
jumpSpeed = 10;
}
}
// 移动障碍物
for (let i = 0; i < obstacles.length; i++) {
const obstacle = obstacles[i];
const obstacleLeft = parseInt(obstacle.style.left);
obstacle.style.left = (obstacleLeft - 3) + 'px';
// 检测碰撞
if (
parseInt(player.style.left) < obstacleLeft + 60 &&
parseInt(player.style.left) + 20 > obstacleLeft &&
parseInt(player.style.bottom) < 80
) {
gameOver();
}
// 移除离开屏幕的障碍物
if (obstacleLeft < -60) {
obstacle.remove();
obstacles.splice(i, 1);
i--;
score++;
scoreDisplay.textContent = score;
}
}
}
function createObstacle() {
const obstacle = document.createElement('div');
obstacle.className = 'obstacle';
obstacle.style.left = '300px';
obstacle.style.bottom = Math.floor(Math.random() * 150) + 'px';
game.appendChild(obstacle);
obstacles.push(obstacle);
}
function handleKeydown(e) {
if (e.code === 'Space' && !isJumping) {
isJumping = true;
}
}
function gameOver() {
clearInterval(gameInterval);
clearInterval(obstacleInterval);
document.removeEventListener('keydown', handleKeydown);
finalScoreDisplay.textContent = score;
endScreen.classList.remove('hidden');
}
function restartGame() {
// 移除所有障碍物
for (let obstacle of obstacles) {
obstacle.remove();
}
endScreen.classList.add('hidden');
startGame();
}
</script>
</body>
</html>
