124 - 科学教育 - Powered by Discuz!

<!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>

复制代码