# 大鱼吃小鱼游戏 (微信可用) 以下是一个简单的大鱼吃小鱼HTML5游戏代码，可以复制到微信中运行： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>大鱼吃小鱼</title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #87CEEB; touch-action: none; } canvas { display: block; } #score { position: absolute; top: 10px; left: 10px; color: white; font-size: 20px; font-family: Arial; } #gameOver { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 30px; font-family: Arial; text-align: center; display: none; } #restart { margin-top: 20px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; font-size: 20px; cursor: pointer; } </style> </head> <body> <div id="score">得分: 0</div> <div id="gameOver"> 游戏结束<br> 最终得分: <span id="finalScore">0</span><br> <button id="restart">重新开始</button> </div> <canvas id="gameCanvas"></canvas> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreElement = document.getElementById('score'); const gameOverElement = document.getElementById('gameOver'); const finalScoreElement = document.getElementById('finalScore'); const restartButton = document.getElementById('restart'); // 设置画布大小为窗口大小 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 游戏变量 let score = 0; let gameRunning = true; // 玩家鱼 const player = { x: canvas.width / 2, y: canvas.height / 2, size: 20, color: '#FF6347', speed: 5 }; // 食物鱼数组 let foods = []; // 触摸/鼠标位置 let targetX = player.x; let targetY = player.y; // 监听触摸/鼠标移动 canvas.addEventListener('mousemove', (e) => { targetX = e.clientX; targetY = e.clientY; }); canvas.addEventListener('touchmove', (e) => { e.preventDefault(); targetX = e.touches[0].clientX; targetY = e.touches[0].clientY; }, { passive: false }); // 重新开始游戏 restartButton.addEventListener('click', () => { score = 0; player.size = 20; foods = []; gameRunning = true; gameOverElement.style.display = 'none'; scoreElement.textContent = '得分: 0'; animate(); }); // 生成食物鱼 function spawnFood() { if (Math.random() < 0.03 && foods.length < 15) { const size = Math.random() * 15 + 5; let x, y; // 确保食物不会在玩家附近生成 do { x = Math.random() * (canvas.width - size * 2) + size; y = Math.random() * (canvas.height - size * 2) + size; } while (Math.sqrt((x - player.x) 2 + (y - player.y) 2) < 100); const speed = Math.random() * 2 + 1; const angle = Math.random() * Math.PI * 2; const color = `hsl(${Math.random() * 360}, 70%, 50%)`; foods.push({ x, y, size, speedX: Math.cos(angle) * speed, speedY: Math.sin(angle) * speed, color }); } } // 更新游戏状态 function update() { if (!gameRunning) return; // 移动玩家鱼 const dx = targetX - player.x; const dy = targetY - player.y; const distance = Math.sqrt(dx * dx + dy * dy); if (distance > player.speed) { player.x += dx / distance * player.speed; player.y += dy / distance * player.speed; } else { player.x = targetX; player.y = targetY; } // 边界检查 player.x = Math.max(player.size, Math.min(canvas.width - player.size, player.x)); player.y = Math.max(player.size, Math.min(canvas.height - player.size, player.y)); // 更新食物鱼 for (let i = 0; i < foods.length; i++) { const food = foods[i]; // 移动食物鱼 food.x += food.speedX; food.y += food.speedY; // 边界反弹 if (food.x <= food.size || food.x >= canvas.width - food.size) { food.speedX *= -1; } if (food.y <= food.size || food.y >= canvas.height - food.size) { food.speedY *= -1; } // 检测碰撞 const distance = Math.sqrt( Math.pow(player.x - food.x, 2) + Math.pow(player.y - food.y, 2) ); if (distance < player.size + food.size) { if (player.size > food.size * 1.2) { // 玩家吃掉食物 player.size += food.size * 0.2; score += Math.floor(food.size); scoreElement.textContent = `得分: ${score}`; foods.splice(i, 1); i--; } else if (food.size > player.size * 1.2) { // 食物吃掉玩家 gameRunning = false; finalScoreElement.textContent = score; gameOverElement.style.display = 'block'; } } } // 生成新食物 spawnFood(); } // 渲染游戏 function render() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制 ctx.fillStyle = '#87CEEB'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制玩家鱼 ctx.fillStyle = player.color; ctx.beginPath(); ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2); ctx.fill(); // 绘制鱼尾 const angle = Math.atan2(targetY - player.y, targetX - player.x); ctx.beginPath(); ctx.moveTo(player.x, player.y); ctx.lineTo( player.x - Math.cos(angle) * player.size * 1.5, player.y - Math.sin(angle) * player.size * 1.5 ); ctx.lineWidth = player.size / 2; ctx.strokeStyle = player.color; ctx.stroke(); // 绘制食物鱼 for (const food of foods) { ctx.fillStyle = food.color; ctx.beginPath(); ctx.arc(food.x, food.y, food.size, 0, Math.PI * 2); ctx.fill(); // 绘制鱼尾 const foodAngle = Math.atan2(food.speedY, food.speedX); ctx.beginPath(); ctx.moveTo(food.x, food.y); ctx.lineTo( food.x - Math.cos(foodAngle) * food.size * 1.5, food.y - Math.sin(foodAngle) * food.size * 1.5 ); ctx.lineWidth = food.size / 2; ctx.strokeStyle = food.color; ctx.stroke(); } } // 游戏循环 function animate() { if (!gameRunning) return; update(); render(); requestAnimationFrame(animate); } // 开始游戏 animate(); // 窗口大小改变时调整画布大小 window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html> ``` ## 使用说明 1. 将上面的代码复制到一个文本编辑器中 2. 保存为 `.html` 文件 3. 在微信中打开该文件（可以通过文件传输助手发送给自己） 4. 点击文件即可在微信内置浏览器中运行游戏 ## 游戏规则 - 控制你的鱼（红色）移动去吃比自己小的鱼 - 避免接触比自己大的鱼 - 每吃掉一条鱼会增加你的分数和体型 - 被更大的鱼吃掉游戏结束 ## 额外注意事项 1. 游戏中的碰撞检测基于圆形碰撞，确保计算距离时使用勾股定理 2. 食物鱼的生成位置会避开玩家鱼，防止突然出现在玩家面前 3. 鱼的移动速度与大小无关，但玩家鱼的速度是恒定的 [2025-06-06 19:53:28 | AI写代码神器 | 2151点数解答]