124

皮子钰 · 发表于 2026-1-6 09:39:07

修改代码让他不是乱码<!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>
      body {
         margin: 0;
         padding: 0;
         background-color: #f7f7f7;
         display: flex;
         justify-content: center;
         align-items: center;
         min-height: 100vh;
         font-family: Arial, sans-serif;
      }

      #gameCanvas {
         border: 2px solid #333;
         background-color: #ffffff;
      }

      .game-info {
         position: absolute;
         top: 20px;
         left: 50%;
         transform: translateX(-50%);
         font-size: 24px;
         font-weight: bold;
         color: #333;
      }

      .game-over {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: 36px;
         font-weight: bold;
         color: #ff0000;
         display: none;
      }

      .restart-tip {
         position: absolute;
         top: 55%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: 18px;
         color: #666;
         display: none;
      }
</style>
</head>
<body>
<div class="game-info">分数: <span id="score">0</span></div>
<div class="game-over" id="gameOver">游戏结束!</div>
<div class="restart-tip" id="restartTip">按空格键重新开始</div>
<canvas id="gameCanvas" width="800" height="200"></canvas>

<script>
      // 获取画布和上下文
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');
      const scoreElement = document.getElementById('score');
      const gameOverElement = document.getElementById('gameOver');
      const restartTipElement = document.getElementById('restartTip');

      // 游戏参数
      let score = 0;
      let gameRunning = true;

      // 恐龙对象
      const dino = {
         x: 50,
         y: 150,
         width: 40,
         height: 40,
         velocityY: 0,
         jumpPower: -15,
         gravity: 0.8,
         onGround: true
      };

      // 障碍物数组
      const obstacles = [];
      const obstacleWidth = 20;
      const obstacleHeight = 40;
      let obstacleSpawnTimer = 0;
      const obstacleSpawnRate = 120; // 生成障碍物的帧率间隔

      // 地面参数
      const groundY = 190;
      let groundX = 0;
      const groundSpeed = 5;

      // 初始化
      function init() {
         score = 0;
         gameRunning = true;
         obstacles.length = 0;
         dino.y = 150;
         dino.velocityY = 0;
         dino.onGround = true;
         gameOverElement.style.display = 'none';
         restartTipElement.style.display = 'none';
         scoreElement.textContent = score;
      }

      // 绘制恐龙
      function drawDino() {
         ctx.fillStyle = '#333';
         ctx.fillRect(dino.x, dino.y, dino.width, dino.height);
         // 简化的恐龙头部
         ctx.beginPath();
         ctx.arc(dino.x + 35, dino.y + 15, 10, 0, Math.PI * 2);
         ctx.fill();
      }

      // 绘制障碍物
      function drawObstacles() {
         ctx.fillStyle = '#2ecc71';
         obstacles.forEach(obstacle => {
            ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
         });
      }

      // 绘制地面
      function drawGround() {
         ctx.fillStyle = '#95a5a6';
         ctx.fillRect(groundX, groundY, canvas.width * 2, 10);
      }

      // 更新恐龙状态（跳跃/重力）
      function updateDino() {
         if (!dino.onGround) {
            dino.velocityY += dino.gravity;
            dino.y += dino.velocityY;

            // 落地检测
            if (dino.y >= 150) {
                  dino.y = 150;
                  dino.velocityY = 0;
                  dino.onGround = true;
            }
         }
      }

      // 更新障碍物
      function updateObstacles() {
         if (!gameRunning) return;

         // 生成新障碍物
         obstacleSpawnTimer++;
         if (obstacleSpawnTimer >= obstacleSpawnRate) {
            obstacles.push({
                  x: canvas.width,
                  y: groundY - obstacleHeight,
                  width: obstacleWidth,
                  height: obstacleHeight
            });
            obstacleSpawnTimer = 0;
            // 随着分数增加，提高生成频率
            if (obstacleSpawnRate > 60) {
                  obstacleSpawnRate -= 0.5;
            }
         }

         // 移动障碍物
         obstacles.forEach((obstacle, index) => {
            obstacle.x -= groundSpeed;
            // 移除超出画布的障碍物
            if (obstacle.x + obstacle.width < 0) {
                  obstacles.splice(index, 1);
                  // 计分
                  score++;
                  scoreElement.textContent = score;
            }

            // 碰撞检测
            if (
                  dino.x < obstacle.x + obstacle.width &&
                  dino.x + dino.width > obstacle.x &&
                  dino.y < obstacle.y + obstacle.height &&
                  dino.y + dino.height > obstacle.y
            ) {
                  gameRunning = false;
                  gameOverElement.style.display = 'block';
                  restartTipElement.style.display = 'block';
            }
         });
      }

      // 更新地面
      function updateGround() {
         groundX -= groundSpeed;
         if (groundX <= -canvas.width) {
            groundX = 0;
         }
      }

      // 游戏主循环
      function gameLoop() {
         // 清空画布
         ctx.clearRect(0, 0, canvas.width, canvas.height);

         if (gameRunning) {
            updateDino();
            updateObstacles();
            updateGround();
         }

         drawGround();
         drawDino();
         drawObstacles();

         requestAnimationFrame(gameLoop);
      }

      // 监听空格键跳跃/重启
      document.addEventListener('keydown', (e) => {
         if (e.code === 'Space') {
            if (gameRunning && dino.onGround) {
                  // 跳跃
                  dino.velocityY = dino.jumpPower;
                  dino.onGround = false;
            } else if (!gameRunning) {
                  // 重启游戏
                  init();
            }
         }
      });

      // 初始化并启动游戏
      init();
      gameLoop();
</script>
</body>
</html>

kaia · 发表于 2026-1-6 09:39:27

你好！你这段代码看起来是一个简单的“小恐龙跑酷游戏”，但是乱码主要是因为代码没有写完整，还有一些语法错误和缺少必要的HTML结构。

我帮你整理了一份完整且能正常运行的代码，你可以复制下面的内容保存成 `.html` 文件，然后用浏览器打开看看效果哦！

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>小恐龙跑酷游戏</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f7f7f7;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: Arial, sans-serif;
position: relative;
}
#gameCanvas {
border: 2px solid #333;
background-color: #ffffff;
}
.game-info {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
font-size: 24px;
font-weight: bold;
color: #333;
}
.game-over {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 36px;
font-weight: bold;
color: #ff0000;
display: none;
}
.restart-tip {
position: absolute;
top: 55%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 18px;
color: #666;
display: none;
}
</style>
</head>
<body>
<div class="game-info">分数: <span id="score">0</span></div>
<div class="game-over" id="gameOver">游戏结束!</div>
<div class="restart-tip" id="restartTip">按空格键重新开始</div>
<canvas id="gameCanvas" width="600" height="220"></canvas>
<script>
// 获取画布和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const gameOverElement = document.getElementById('gameOver');
const restartTipElement = document.getElementById('restartTip');
// 游戏参数
let score = 0;
let gameRunning = true;
// 恐龙对象
const dino = {
x: 50,
y: 150,
width: 40,
height: 40,
velocityY: 0,
jumpPower: -15,
gravity: 0.8,
onGround: true
};
// 障碍物数组
const obstacles = [];
const obstacleWidth = 20;
const obstacleHeight = 40;
let obstacleSpawnTimer = 0;
let obstacleSpawnRate = 120; // 生成障碍物的帧率间隔
// 地面参数
const groundY = 190;
let groundX = 0;
const groundSpeed = 5;
// 初始化游戏数据
function init() {
score = 0;
gameRunning = true;
obstacles.length = 0;
dino.y = 150;
dino.velocityY = 0;
dino.onGround = true;
gameOverElement.style.display = 'none';
restartTipElement.style.display = 'none';
scoreElement.textContent = score;
obstacleSpawnRate = 120;
groundX = 0;
}
// 绘制恐龙
function drawDino() {
ctx.fillStyle = '#333';
ctx.fillRect(dino.x, dino.y, dino.width, dino.height);
// 简单画头部圆形
ctx.beginPath();
ctx.arc(dino.x + 35, dino.y + 15, 10, 0, Math.PI * 2);
ctx.fill();
}
// 绘制障碍物
function drawObstacles() {
ctx.fillStyle = '#2ecc71';
obstacles.forEach(obstacle => {
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
});
}
// 绘制地面
function drawGround() {
ctx.fillStyle = '#95a5a6';
ctx.fillRect(groundX, groundY, canvas.width * 2, 10);
}
// 更新恐龙状态（跳跃和重力）
function updateDino() {
if (!dino.onGround) {
dino.velocityY += dino.gravity;
dino.y += dino.velocityY;
// 落地检测
if (dino.y >= 150) {
dino.y = 150;
dino.velocityY = 0;
dino.onGround = true;
}
}
}
// 更新障碍物位置和生成新的障碍物
function updateObstacles() {
if (!gameRunning) return;
obstacleSpawnTimer++;
if (obstacleSpawnTimer >= obstacleSpawnRate) {
obstacles.push({
x: canvas.width,
y: groundY - obstacleHeight,
width: obstacleWidth,
height: obstacleHeight
});
obstacleSpawnTimer = 0;
// 随着分数增加，障碍物生成速度提升，最少不低于60帧
if (obstacleSpawnRate > 60) {
obstacleSpawnRate -= 0.5;
}
}
// 移动障碍物及碰撞检测
obstacles.forEach((obstacle, index) => {
obstacle.x -= groundSpeed;
// 移除消失的障碍物，计分
if (obstacle.x + obstacle.width < 0) {
obstacles.splice(index, 1);
if(gameRunning) { // 确保游戏没结束时才加分
score++;
scoreElement.textContent = score;
}
}
// 碰撞检测
if (
dino.x < obstacle.x + obstacle.width &&
dino.x + dino.width > obstacle.x &&
dino.y < obstacle.y + obstacle.height &&
dino.y + dino.height > obstacle.y
) {
gameRunning = false;
gameOverElement.style.display = 'block';
restartTipElement.style.display = 'block';
}
});
}
// 更新地面滚动
function updateGround() {
groundX -= groundSpeed;
if (groundX <= -canvas.width) {
groundX = 0;
}
}
// 清空画布并重绘所有元素
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGround();
drawDino();
drawObstacles();
}
// 游戏主循环
function gameLoop() {
if (gameRunning) {
updateDino();
updateObstacles();
updateGround();
}
draw();
requestAnimationFrame(gameLoop);
}
// 监听键盘事件（空格跳跃或重新开始）
window.addEventListener('keydown', e => {
if (e.code === 'Space') {
if (gameRunning && dino.onGround) {
// 恐龙跳跃
dino.velocityY = dino.jumpPower;
dino.onGround = false;
} else if (!gameRunning) {
// 重新开始游戏
init();
}
}
});
// 启动游戏
init();
gameLoop();
</script>
</body>
</html>

复制代码

---

### 这个代码有什么作用？

- **HTML部分**：画了一个画布（`<canvas>`）和显示分数、游戏结束信息的区域。
- **CSS部分**：让页面变得美观、居中，并给画布加边框和颜色。
- **JavaScript部分**：
  - 定义恐龙和障碍物的属性。
  - 通过动画循环不停地更新恐龙位置和障碍物移动。
  - 监听空格键控制恐龙跳跃。
  - 碰到障碍物后显示游戏结束，并提示按空格重新开始。

---

### 你可以试试做什么：

- 在浏览器里打开这个网页，用空格键让小恐龙跳跃。
- 尝试修改 `jumpPower` 或 `gravity`，看小恐龙跳的高度和速度变化。
- 改变障碍物的颜色或大小，自己做更多有趣的小改动。

如果你还是不太明白，可以随时告诉我，我来帮你一步步解释哦！????