<!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: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(to bottom, #87CEEB, #1E90FF);
font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
color: #333;
}
h1 {
color: #FF6B6B;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
margin-bottom: 10px;
}
.game-container {
position: relative;
margin: 20px 0;
}
#gameCanvas {
background-color: #7CFC00;
border: 5px solid #8B4513;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.controls {
background-color: rgba(255, 255, 255, 0.8);
padding: 15px;
border-radius: 10px;
margin-top: 20px;
max-width: 600px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.character-info {
display: flex;
justify-content: space-around;
margin-bottom: 15px;
}
.character {
text-align: center;
padding: 10px;
border-radius: 8px;
width: 45%;
}
.squid {
background-color: #FFB6C1;
}
.pond {
background-color: #ADD8E6;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 5px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.score {
font-size: 24px;
font-weight: bold;
margin: 10px 0;
color: #FFD700;
text-shadow: 1px 1px 2px #000;
}
.instructions {
margin-top: 15px;
font-size: 14px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>鱿鱼与池塘的奔跑冒险</h1>
<div class="score">得分: <span id="score">0</span></div>
<div class="game-container">
<canvas id="gameCanvas" width="800" height="400"></canvas>
</div>
<div class="controls">
<div class="character-info">
<div class="character squid">
<h3>鱿鱼</h3>
<p>按 W 键跳跃</p>
</div>
<div class="character pond">
<h3>池塘</h3>
<p>按 ↑ 键跳跃</p>
</div>
</div>
<button id="startBtn">开始游戏</button>
<button id="pauseBtn">暂停</button>
<button id="restartBtn">重新开始</button>
<div class="instructions">
<p>控制两个角色跳跃躲避障碍物!鱿鱼按W键,池塘按↑键。两个角色都需要安全通过障碍物才能得分!</p>
</div>
</div>
<script>
// 获取Canvas和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// 游戏变量
let gameRunning = false;
let gamePaused = false;
let score = 0;
let gameSpeed = 5;
// 角色定义
const squid = {
x: 150,
y: canvas.height - 100,
width: 40,
height: 60,
color: '#FF69B4',
jumping: false,
jumpPower: 0,
jumpForce: 15,
gravity: 0.8
};
const pond = {
x: 250,
y: canvas.height - 100,
width: 40,
height: 60,
color: '#1E90FF',
jumping: false,
jumpPower: 0,
jumpForce: 15,
gravity: 0.8
};
// 障碍物数组
let obstacles = [];
// 绘制角色
function drawCharacter(character, name) {
// 身体
ctx.fillStyle = character.color;
ctx.fillRect(character.x, character.y, character.width, character.height);
// 眼睛
ctx.fillStyle = 'white';
ctx.fillRect(character.x + 5, character.y + 10, 10, 10);
ctx.fillRect(character.x + character.width - 15, character.y + 10, 10, 10);
ctx.fillStyle = 'black';
ctx.fillRect(character.x + 8, character.y + 12, 5, 5);
ctx.fillRect(character.x + character.width - 12, character.y + 12, 5, 5);
// 名字标签
ctx.fillStyle = 'black';
ctx.font = '12px Arial';
ctx.fillText(name, character.x, character.y - 5);
}
// 绘制鱿鱼
function drawSquid() {
drawCharacter(squid, '鱿鱼');
// 鱿鱼触手
ctx.fillStyle = squid.color;
for (let i = 0; i < 5; i++) {
ctx.fillRect(squid.x - 10, squid.y + 15 + i * 8, 10, 5);
}
}
// 绘制池塘
function drawPond() {
drawCharacter(pond, '池塘');
// 池塘的水波纹
ctx.strokeStyle = '#87CEEB';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(pond.x + pond.width/2, pond.y + pond.height/2, 15, 0, Math.PI * 2);
ctx.stroke();
ctx.beginPath();
ctx.arc(pond.x + pond.width/2, pond.y + pond.height/2, 25, 0, Math.PI * 2);
ctx.stroke();
}
// 绘制障碍物
function drawObstacles() {
ctx.fillStyle = '#8B4513';
obstacles.forEach(obstacle => {
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
});
}
// 更新角色位置
function updateCharacters() {
// 更新鱿鱼
if (squid.jumping) {
squid.y -= squid.jumpPower;
squid.jumpPower -= squid.gravity;
if (squid.y >= canvas.height - 100) {
squid.y = canvas.height - 100;
squid.jumping = false;
}
}
// 更新池塘
if (pond.jumping) {
pond.y -= pond.jumpPower;
pond.jumpPower -= pond.gravity;
if (pond.y >= canvas.height - 100) {
pond.y = canvas.height - 100;