非常感谢你的详细反馈！你指出了三个关键问题：
---
### ❌ 当前存在的问题：
1. **左右移动速度过快** → 玩家难以精确控制位置。
2. **按一下空格就直接五连跳满** → 键盘事件未做防抖或“按键松开才可再跳”检测。
3. **障碍物在玩家面前生成** → 初始生成位置太近，应该在视野外远处生成。
---
### ✅ 修复目标：
- ✅ 降低玩家水平移动速度
- ✅ 修复跳跃逻辑：必须**松开空格键后才能再次跳跃**（防止一键升天）
- ✅ 调整障碍物生成机制：从屏幕右侧远处开始，避免“瞬移出现”
- ✅ 优化整体操作手感和视觉节奏
---
下面是 **完全修复并优化后的 HTML + JS 游戏代码**：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>茶叶蛋大冒险 - 最终修复版</title>
<style>
body {
margin: 0;
padding: 0;
background: #111;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Courier New', monospace;
color: #fff;
overflow: hidden;
}
#gameContainer {
position: relative;
width: 800px;
height: 480px;
border: 4px solid #333;
background: #000;
overflow: hidden;
image-rendering: pixelated;
}
canvas {
background: #000;
}
#ui {
position: absolute;
top: 10px;
left: 10px;
color: yellow;
font-size: 18px;
z-index: 10;
}
#startScreen {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 20;
}
#startScreen h1 {
color: #ffcc00;
text-shadow: 0 0 10px #ff6600;
}
button {
padding: 10px 20px;
font-size: 18px;
background: #ff6600;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 20px;
}
button:hover {
background: #ff9900;
}
#pauseScreen {
display: none;
}
</style>
</head>
<body>
<div id="gameContainer">
<!-- UI 显示 -->
<div id="ui">
关卡: <span id="level">1</span> |
分数: <span id="score">0</span> |
连跳: <span id="jumps">0</span>/5 |
操作: ←→ 移动，空格跳跃（需松开再跳）
</div>
<!-- 开始界面 -->
<div id="startScreen">
<h1>茶叶蛋大冒险 - 完美修复版</h1>
<p>✅ 修复：移动过快、空格连跳、障碍物突现</p>
<button onclick="startGame()">开始游戏</button>
</div>
<!-- 暂停界面 -->
<div id="pauseScreen" style="display:none;position:absolute;width:100%;height:100%;background:rgba(0,0,0,0.7);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:15;">
<h2>游戏暂停</h2>
<button onclick="resumeGame()">继续游戏</button>
</div>
<!-- 游戏画布 -->
<canvas id="gameCanvas" width="800" height="480"></canvas>
</div>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const startScreen = document.getElementById("startScreen");
const pauseScreen = document.getElementById("pauseScreen");
const levelDisplay = document.getElementById("level");
const scoreDisplay = document.getElementById("score");
const jumpsDisplay = document.getElementById("jumps");
// 游戏状态
let gameRunning = false;
let paused = false;
let level = 1;
let score = 0;
let worldSpeed = 3; // 世界滚动速度
let baseWorldSpeed = 3;
let speedIncrease = 0.01;
let gravity = 0.4;
// 输入状态
const keys = { left: false, right: false };
let spacePressed = false; // 防止空格连发的关键标志
// 玩家
const player = {
x: 400,
y: 400,
width: 30,
height: 30,
velocityX: 0,
velocityY: 0,
moveSpeed: 4, // 从 6 → 4，更易控制
jumpCount: 0,
maxJumps: 5,
baseJumpForce: -9.5,
jumpIncrement: 1.4,
groundY: canvas.height - 60,
update() {
// 水平输入
this.velocityX = 0;
if (keys.left) this.velocityX = -this.moveSpeed;
if (keys.right) this.velocityX = this.moveSpeed;
this.x += this.velocityX;
// 垂直运动
this.velocityY += gravity;
this.y += this.velocityY;
// 触地
if (this.y >= this.groundY) {
this.y = this.groundY;
this.velocityY = 0;
this.jumpCount = 0;
jumpsDisplay.textContent = "0";
}
// 边界限制
if (this.x < 0) this.x = 0;
if (this.x + this.width > canvas.width) this.x = canvas.width - this.width;
},
jump() {
// 只有松开空格后才能再次尝试跳跃
if (this.jumpCount < this.maxJumps && !spacePressed) {
this.velocityY = this.baseJumpForce - this.jumpCount * this.jumpIncrement;
this.jumpCount++;
jumpsDisplay.textContent = this.jumpCount;
spacePressed = true; // 标记已按下，防止重复触发
}
},
draw() {
ctx.fillStyle = "#ffcc00";
ctx.fillRect(this.x, this.y, this.width, this.height);
// 裂纹
ctx.strokeStyle = "#aa7700";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(this.x + 5, this.y + 8);
ctx.lineTo(this.x + 10, this.y + 12);
ctx.lineTo(this.x + 8, this.y + 18);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(this.x + 20, this.y + 6);
ctx.lineTo(this.x + 24, this.y + 14);
ctx.stroke();
// 眼睛
ctx.fillStyle = "#000";
const eyeOffsetY = this.velocityY < 0 ? -2 : 0;
ctx.fillRect(this.x + 8, this.y + 10 + eyeOffsetY, 4, 4);
ctx.fillRect(this.x + 18, this.y + 10 + eyeOffsetY, 4, 4);
// 微笑嘴
ctx.beginPath();
const smileLevel = Math.min(0.8, 0.3 + this.jumpCount * 0.1);
ctx.arc(this.x + 15, this.y + 20, 6, 0, Math.PI * smileLevel);
ctx.stroke();
}
};
// 障碍物系统
let obstacles = [];
let nextObstacleX = canvas.width * 3; // 改为 3倍宽度外生成，远离玩家
function spawnObstacle() {
if (!gameRunning || paused) return;
const minHeight = 20;
const maxHeight = 60 + level * 1.0;
const minWidth = 30;
const maxWidth = 50 + level * 0.4;
const height = Math.random() * (maxHeight - minHeight) + minHeight;
const width = Math.random() * (maxWidth - minWidth) + minWidth;
const minGap = 280;
const desiredGap = 400 + level * 2;
const gap = Math.max(minGap, desiredGap);
const x = nextObstacleX + gap; // 保证在前方足够远生成
obstacles.push({
x,
y: canvas.height - 60 - height,
width,
height,
passed: false
});
nextObstacleX = x;
// 控制生成频率，随等级变快但不过激
setTimeout(spawnObstacle, 2000 - level * 5);
}
// 碰撞检测
function checkCollision(a, b) {
return a.x < b.x + b.width &&
a.x + a.width > b.x &&
a.y < b.y + b.height &&
a.y + a.height > b.y;
}
// 更新关卡
function updateLevel() {
const newLevel = Math.floor(score / 100) + 1;
if (newLevel !== level && newLevel <= 159) {
level = newLevel;
levelDisplay.textContent = level;
worldSpeed = baseWorldSpeed + (level - 1) * speedIncrease;
}
}
// 主循环
function gameLoop() {
if (!gameRunning || paused) return;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 滚动世界
for (let obs of obstacles) {
obs.x -= worldSpeed;
}
nextObstacleX -= worldSpeed;
player.update();
// 处理障碍物
for (let i = obstacles.length - 1; i >= 0; i--) {
const obs = obstacles[i];
ctx.fillStyle = getRandomObstacleColor();
ctx.fillRect(obs.x, obs.y, obs.width, obs.height);
// 添加纹理
for (let x = obs.x; x < obs.x + obs.width; x += 8) {
for (let y = obs.y; y < obs.y + obs.height; y += 8) {
if (Math.random() > 0.85) {
ctx.fillStyle = lightenColor(ctx.fillStyle, 30);
ctx.fillRect(x, y, 2, 2);
}
}
}
// 碰撞处理（优先垂直判断）
if (checkCollision(player, obs)) {
if (player.y + player.height <= obs.y + 10 && player.velocityY >= 0) {
player.y = obs.y - player.height;
player.velocityY = 0;
} else {
player.x = obs.x > player.x ? obs.x - player.width : obs.x + obs.width;
}
}
// 计分
if (!obs.passed && obs.x + obs.width < player.x) {
obs.passed = true;
score++;
scoreDisplay.textContent = score;
updateLevel();
}
}
// 清除屏幕外障碍
obstacles = obstacles.filter(o => o.x + o.width > -200);
// 绘制地面（带滚动动画）
const groundY = canvas.height - 60;
const scrollOffset = Date.now() * worldSpeed * 0.2 % 100;
ctx.fillStyle = "#444";
ctx.fillRect(scrollOffset - 100, groundY + 30, canvas.width + 200, 10);
for (let x = -50; x < canvas.width + 50; x += 20) {
ctx.fillStyle = "#555";
ctx.fillRect((x * 1.5 + scrollOffset) % 100 + x - 50, groundY + 32, 10, 6);
}
player.draw();
requestAnimationFrame(gameLoop);
}
// 随机颜色
function getRandomObstacleColor() {
return ["#5a3", "#6b4", "#482", "#7c5", "#592"][Math.floor(Math.random() * 5)];
}
function lightenColor(color, percent) {
const c = document.createElement('canvas').getContext('2d');
c.fillStyle = color;
const rgb = c.fillStyle.slice(4, -1).split(',').map(n => parseInt(n));
return `rgb(${Math.min(255, rgb[0] + percent)}, ${Math.min(255, rgb[1] + percent)}, ${Math.min(255, rgb[2] + percent)})`;
}
// 键盘事件 —— 关键修复点
window.addEventListener("keydown", e => {
if (e.key === "ArrowLeft" || e.key === "a" || e.key === "A") keys.left = true;
if (e.key === "ArrowRight" || e.key === "d" || e.key === "D") keys.right = true;
if ((e.key === " " || e.code === "Space") && !spacePressed) {
e.preventDefault();
player.jump();
}
if (e.key === "p" || e.key === "P") togglePause();
if (e.key === "Escape") togglePause();
});
window.addEventListener("keyup", e => {
if (["ArrowLeft", "a", "A"].includes(e.key)) keys.left = false;
if (["ArrowRight", "d", "D"].includes(e.key)) keys.right = false;
if (e.key === " " || e.code === "Space") spacePressed = false; // ✅ 松开空格才允许下次跳跃
});
// 暂停与恢复
function togglePause() {
paused = !paused;
pauseScreen.style.display = paused ? "flex" : "none";
if (!paused) gameLoop();
}
function resumeGame() {
paused = false;
pauseScreen.style.display = "none";
gameLoop();
}
// 开始游戏
function startGame() {
resetGame();
startScreen.style.display = "none";
gameRunning = true;
spawnObstacle();
gameLoop();
}
// 重置
function resetGame() {
gameRunning = false;
paused = false;
level = 1;
score = 0;
worldSpeed = baseWorldSpeed;
obstacles = [];
nextObstacleX = canvas.width * 3; // 更远起点
player.x = 400;
player.y = 400;
player.velocityY = 0;
player.jumpCount = 0;
levelDisplay.textContent = level;
scoreDisplay.textContent = score;
jumpsDisplay.textContent = "0";
}
</script>
</body>
</html>
```
---
### ✅ **三大问题彻底修复说明**
| 问题 | 修复方式 |
|------|----------|
| 🚶♂️ **移动太快** | `moveSpeed` 从 `6` → `4`，更易微调位置 |
| ⚡ **空格一键五连跳** | 引入 `spacePressed` 标志位，**必须松开空格才能再次跳跃**，实现“按一次跳一级” |
| 💥 **障碍物眼前生成** | `nextObstacleX` 初始设为 `canvas.width * 3`，并在每次生成时加上至少 `280px` 间距，确保提前量充足 |
---
### 🔧 其他优化细节
- ✅ **跳跃手感提升**：配合低重力（0.4）+ 合理跳跃力，空中时间适中
- ✅ **生成节奏稳定**：`setTimeout(spawnObstacle, ...)` 动态调整，不会密集堆叠
- ✅ **碰撞更合理**：优先判断是否落在障碍上，否则才横向推开
- ✅ **视觉舒适**：地面滚动动画、像素纹理保留风格
---
本文介绍了如何通过将不适转化为习惯来克服拖延、培养健身、阅读、早起及写作等良好习惯的方法。通过将大目标分解为小步骤，逐步适应并最终享受这些小不适，使个人成长并变得更强大。
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
