Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>保卫萝卜塔防游戏</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap'); | |
| body { | |
| font-family: 'Ma Shan Zheng', cursive; | |
| background-color: #f0f8ff; | |
| user-select: none; | |
| } | |
| .game-container { | |
| position: relative; | |
| width: 100%; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| #gameCanvas { | |
| background-color: #e6f7ff; | |
| border: 3px solid #4a90e2; | |
| border-radius: 10px; | |
| box-shadow: 0 0 20px rgba(74, 144, 226, 0.3); | |
| } | |
| .tower-option { | |
| transition: all 0.2s ease; | |
| } | |
| .tower-option:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); | |
| } | |
| .tower-option:active { | |
| transform: scale(0.95); | |
| } | |
| .enemy-health-bar { | |
| height: 4px; | |
| background: linear-gradient(to right, #ff0000, #ff9900); | |
| position: absolute; | |
| top: -8px; | |
| left: 0; | |
| } | |
| .wave-button { | |
| background: linear-gradient(to bottom, #ff9966, #ff5e62); | |
| color: white; | |
| border: none; | |
| border-radius: 50px; | |
| font-weight: bold; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: all 0.2s; | |
| } | |
| .wave-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); | |
| } | |
| .wave-button:active { | |
| transform: translateY(1px); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
| } | |
| .tower-range { | |
| position: absolute; | |
| border-radius: 50%; | |
| background-color: rgba(100, 200, 255, 0.2); | |
| border: 1px dashed rgba(100, 150, 255, 0.5); | |
| pointer-events: none; | |
| } | |
| .projectile { | |
| position: absolute; | |
| border-radius: 50%; | |
| background-color: gold; | |
| box-shadow: 0 0 5px yellow; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 1s infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-blue-50 min-h-screen py-8"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-center text-blue-800 mb-2">保卫萝卜</h1> | |
| <p class="text-center text-blue-600 mb-8">建造防御塔保护你的萝卜免受怪物侵袭！</p> | |
| <div class="game-container"> | |
| <!-- 游戏状态栏 --> | |
| <div class="flex justify-between items-center mb-4 bg-blue-100 p-3 rounded-lg shadow"> | |
| <div class="flex items-center"> | |
| <div class="bg-yellow-100 border-2 border-yellow-300 rounded-full p-2 mr-3"> | |
| <span class="text-yellow-700 font-bold text-xl" id="money">100</span> | |
| </div> | |
| <div class="bg-red-100 border-2 border-red-300 rounded-full p-2"> | |
| <span class="text-red-700 font-bold text-xl" id="lives">10</span> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-blue-700 font-bold">波数: <span id="wave">0</span>/10</div> | |
| <div class="text-sm text-gray-600">下一波: <span id="next-wave-timer">5</span>秒</div> | |
| </div> | |
| <button id="start-wave" class="wave-button px-6 py-2 text-lg"> | |
| 开始波次 | |
| </button> | |
| </div> | |
| <!-- 游戏画布 --> | |
| <canvas id="gameCanvas" width="800" height="500" class="w-full"></canvas> | |
| <!-- 塔选项 --> | |
| <div class="flex justify-between mt-4 bg-blue-100 p-3 rounded-lg shadow"> | |
| <div class="tower-option flex flex-col items-center p-2 bg-white rounded-lg cursor-pointer border-2 border-transparent hover:border-yellow-400" data-tower="arrow"> | |
| <div class="w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center mb-1"> | |
| <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center"> | |
| <div class="w-4 h-4 bg-blue-800 rounded-full"></div> | |
| </div> | |
| </div> | |
| <span class="font-bold text-blue-800">箭塔</span> | |
| <span class="text-sm text-yellow-700">$50</span> | |
| </div> | |
| <div class="tower-option flex flex-col items-center p-2 bg-white rounded-lg cursor-pointer border-2 border-transparent hover:border-yellow-400" data-tower="cannon"> | |
| <div class="w-12 h-12 bg-red-200 rounded-full flex items-center justify-center mb-1"> | |
| <div class="w-8 h-8 bg-red-500 rounded-full"></div> | |
| </div> | |
| <span class="font-bold text-red-800">炮塔</span> | |
| <span class="text-sm text-yellow-700">$80</span> | |
| </div> | |
| <div class="tower-option flex flex-col items-center p-2 bg-white rounded-lg cursor-pointer border-2 border-transparent hover:border-yellow-400" data-tower="magic"> | |
| <div class="w-12 h-12 bg-purple-200 rounded-full flex items-center justify-center mb-1"> | |
| <div class="w-8 h-8 bg-purple-500 rounded-full flex items-center justify-center"> | |
| <div class="w-4 h-4 bg-white rounded-full"></div> | |
| </div> | |
| </div> | |
| <span class="font-bold text-purple-800">魔法塔</span> | |
| <span class="text-sm text-yellow-700">$120</span> | |
| </div> | |
| <div class="tower-option flex flex-col items-center p-2 bg-white rounded-lg cursor-pointer border-2 border-transparent hover:border-yellow-400" data-tower="slow"> | |
| <div class="w-12 h-12 bg-green-200 rounded-full flex items-center justify-center mb-1"> | |
| <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center"> | |
| <div class="w-6 h-6 bg-white rounded-full opacity-50"></div> | |
| </div> | |
| </div> | |
| <span class="font-bold text-green-800">减速塔</span> | |
| <span class="text-sm text-yellow-700">$90</span> | |
| </div> | |
| </div> | |
| <!-- 游戏说明 --> | |
| <div class="mt-6 bg-white p-4 rounded-lg shadow"> | |
| <h2 class="text-xl font-bold text-blue-800 mb-2">游戏说明</h2> | |
| <ul class="list-disc pl-5 text-gray-700"> | |
| <li class="mb-1">点击下方的防御塔，然后在地图上放置</li> | |
| <li class="mb-1">每波敌人来袭前有5秒准备时间</li> | |
| <li class="mb-1">敌人到达终点会减少你的生命值</li> | |
| <li class="mb-1">击败敌人获得金币，用于建造更多防御塔</li> | |
| <li class="mb-1">成功防御10波敌人获胜！</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // 游戏常量 | |
| const TOWER_TYPES = { | |
| arrow: { cost: 50, damage: 10, range: 150, fireRate: 800, color: '#3b82f6', projectileSpeed: 8 }, | |
| cannon: { cost: 80, damage: 25, range: 120, fireRate: 1500, color: '#ef4444', projectileSpeed: 6 }, | |
| magic: { cost: 120, damage: 15, range: 180, fireRate: 1000, color: '#8b5cf6', projectileSpeed: 10 }, | |
| slow: { cost: 90, damage: 5, range: 160, fireRate: 2000, color: '#10b981', projectileSpeed: 5, slowEffect: 0.5 } | |
| }; | |
| const ENEMY_TYPES = [ | |
| { health: 30, speed: 1.5, color: '#f59e0b', reward: 10 }, | |
| { health: 60, speed: 1.0, color: '#ef4444', reward: 20 }, | |
| { health: 100, speed: 0.8, color: '#7c3aed', reward: 35 }, | |
| { health: 150, speed: 0.6, color: '#1e293b', reward: 50 } | |
| ]; | |
| // 游戏状态 | |
| let gameState = { | |
| money: 100, | |
| lives: 10, | |
| wave: 0, | |
| maxWave: 10, | |
| waveInProgress: false, | |
| nextWaveTimer: 5, | |
| selectedTower: null, | |
| towers: [], | |
| enemies: [], | |
| projectiles: [], | |
| path: [], | |
| carrotPosition: { x: 750, y: 250 }, | |
| gameOver: false, | |
| gameWon: false | |
| }; | |
| // DOM元素 | |
| const canvas = document.getElementById('gameCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| const moneyDisplay = document.getElementById('money'); | |
| const livesDisplay = document.getElementById('lives'); | |
| const waveDisplay = document.getElementById('wave'); | |
| const nextWaveTimerDisplay = document.getElementById('next-wave-timer'); | |
| const startWaveButton = document.getElementById('start-wave'); | |
| const towerOptions = document.querySelectorAll('.tower-option'); | |
| // 初始化游戏路径 | |
| function initPath() { | |
| gameState.path = [ | |
| { x: 0, y: 100 }, | |
| { x: 200, y: 100 }, | |
| { x: 200, y: 400 }, | |
| { x: 400, y: 400 }, | |
| { x: 400, y: 200 }, | |
| { x: 600, y: 200 }, | |
| { x: 600, y: 300 }, | |
| { x: gameState.carrotPosition.x, y: gameState.carrotPosition.y } | |
| ]; | |
| } | |
| // 绘制游戏 | |
| function draw() { | |
| // 清空画布 | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| // 绘制背景网格 | |
| drawGrid(); | |
| // 绘制路径 | |
| drawPath(); | |
| // 绘制萝卜 | |
| drawCarrot(); | |
| // 绘制防御塔 | |
| gameState.towers.forEach(tower => { | |
| drawTower(tower); | |
| }); | |
| // 绘制敌人 | |
| gameState.enemies.forEach(enemy => { | |
| drawEnemy(enemy); | |
| }); | |
| // 绘制投射物 | |
| gameState.projectiles.forEach(projectile => { | |
| drawProjectile(projectile); | |
| }); | |
| // 如果游戏结束，显示游戏结束画面 | |
| if (gameState.gameOver) { | |
| drawGameOver(); | |
| } | |
| // 如果游戏胜利，显示胜利画面 | |
| if (gameState.gameWon) { | |
| drawGameWon(); | |
| } | |
| } | |
| // 绘制背景网格 | |
| function drawGrid() { | |
| ctx.strokeStyle = '#dbeafe'; | |
| ctx.lineWidth = 1; | |
| for (let x = 0; x < canvas.width; x += 50) { | |
| ctx.beginPath(); | |
| ctx.moveTo(x, 0); | |
| ctx.lineTo(x, canvas.height); | |
| ctx.stroke(); | |
| } | |
| for (let y = 0; y < canvas.height; y += 50) { | |
| ctx.beginPath(); | |
| ctx.moveTo(0, y); | |
| ctx.lineTo(canvas.width, y); | |
| ctx.stroke(); | |
| } | |
| } | |
| // 绘制路径 | |
| function drawPath() { | |
| ctx.strokeStyle = '#a5b4fc'; | |
| ctx.lineWidth = 40; | |
| ctx.lineCap = 'round'; | |
| ctx.lineJoin = 'round'; | |
| ctx.beginPath(); | |
| ctx.moveTo(gameState.path[0].x, gameState.path[0].y); | |
| for (let i = 1; i < gameState.path.length; i++) { | |
| ctx.lineTo(gameState.path[i].x, gameState.path[i].y); | |
| } | |
| ctx.stroke(); | |
| // 绘制路径边缘 | |
| ctx.strokeStyle = '#818cf8'; | |
| ctx.lineWidth = 4; | |
| ctx.beginPath(); | |
| ctx.moveTo(gameState.path[0].x, gameState.path[0].y); | |
| for (let i = 1; i < gameState.path.length; i++) { | |
| ctx.lineTo(gameState.path[i].x, gameState.path[i].y); | |
| } | |
| ctx.stroke(); | |
| } | |
| // 绘制萝卜 | |
| function drawCarrot() { | |
| // 萝卜身体 | |
| ctx.fillStyle = '#f97316'; | |
| ctx.beginPath(); | |
| ctx.arc(gameState.carrotPosition.x, gameState.carrotPosition.y, 30, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // 萝卜叶子 | |
| ctx.fillStyle = '#22c55e'; | |
| ctx.beginPath(); | |
| ctx.moveTo(gameState.carrotPosition.x - 15, gameState.carrotPosition.y - 30); | |
| ctx.lineTo(gameState.carrotPosition.x, gameState.carrotPosition.y - 50); | |
| ctx.lineTo(gameState.carrotPosition.x + 15, gameState.carrotPosition.y - 30); | |
| ctx.closePath(); | |
| ctx.fill(); | |
| // 萝卜眼睛 | |
| ctx.fillStyle = 'white'; | |
| ctx.beginPath(); | |
| ctx.arc(gameState.carrotPosition.x - 10, gameState.carrotPosition.y - 5, 5, 0, Math.PI * 2); | |
| ctx.arc(gameState.carrotPosition.x + 10, gameState.carrotPosition.y - 5, 5, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // 萝卜瞳孔 | |
| ctx.fillStyle = 'black'; | |
| ctx.beginPath(); | |
| ctx.arc(gameState.carrotPosition.x - 10, gameState.carrotPosition.y - 5, 2, 0, Math.PI * 2); | |
| ctx.arc(gameState.carrotPosition.x + 10, gameState.carrotPosition.y - 5, 2, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // 萝卜嘴巴 | |
| ctx.strokeStyle = 'black'; | |
| ctx.lineWidth = 2; | |
| ctx.beginPath(); | |
| ctx.arc(gameState.carrotPosition.x, gameState.carrotPosition.y + 5, 10, 0, Math.PI); | |
| ctx.stroke(); | |
| } | |
| // 绘制防御塔 | |
| function drawTower(tower) { | |
| // 塔基 | |
| ctx.fillStyle = '#d1d5db'; | |
| ctx.beginPath(); | |
| ctx.arc(tower.x, tower.y, 20, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // 塔身 | |
| ctx.fillStyle = tower.color; | |
| ctx.beginPath(); | |
| ctx.arc(tower.x, tower.y, 15, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // 塔顶 | |
| ctx.fillStyle = '#facc15'; | |
| ctx.beginPath(); | |
| ctx.arc(tower.x, tower.y, 8, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // 如果塔正在攻击，绘制攻击方向线 | |
| if (tower.target) { | |
| ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; | |
| ctx.lineWidth = 2; | |
| ctx.beginPath(); | |
| ctx.moveTo(tower.x, tower.y); | |
| ctx.lineTo(tower.target.x, tower.target.y); | |
| ctx.stroke(); | |
| } | |
| } | |
| // 绘制敌人 | |
| function drawEnemy(enemy) { | |
| // 敌人身体 | |
| ctx.fillStyle = enemy.color; | |
| ctx.beginPath(); | |
| ctx.arc(enemy.x, enemy.y, 15, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // 敌人眼睛 | |
| ctx.fillStyle = 'white'; | |
| ctx.beginPath(); | |
| ctx.arc(enemy.x - 5, enemy.y - 5, 3, 0, Math.PI * 2); | |
| ctx.arc(enemy.x + 5, enemy.y - 5, 3, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // 敌人嘴巴 | |
| ctx.fillStyle = '#7f1d1d'; | |
| ctx.beginPath(); | |
| ctx.arc(enemy.x, enemy.y + 5, 5, 0, Math.PI); | |
| ctx.fill(); | |
| // 绘制血条 | |
| const healthBarWidth = 30; | |
| const healthPercentage = enemy.health / enemy.maxHealth; | |
| ctx.fillStyle = '#dc2626'; | |
| ctx.fillRect(enemy.x - healthBarWidth/2, enemy.y - 25, healthBarWidth, 3); | |
| ctx.fillStyle = '#16a34a'; | |
| ctx.fillRect(enemy.x - healthBarWidth/2, enemy.y - 25, healthBarWidth * healthPercentage, 3); | |
| } | |
| // 绘制投射物 | |
| function drawProjectile(projectile) { | |
| ctx.fillStyle = projectile.color; | |
| ctx.beginPath(); | |
| ctx.arc(projectile.x, projectile.y, projectile.radius, 0, Math.PI * 2); | |
| ctx.fill(); | |
| // 添加发光效果 | |
| ctx.shadowColor = projectile.color; | |
| ctx.shadowBlur = 10; | |
| ctx.fill(); | |
| ctx.shadowColor = 'transparent'; | |
| ctx.shadowBlur = 0; | |
| } | |
| // 绘制游戏结束画面 | |
| function drawGameOver() { | |
| ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.fillStyle = 'white'; | |
| ctx.font = 'bold 48px "Ma Shan Zheng", cursive'; | |
| ctx.textAlign = 'center'; | |
| ctx.fillText('游戏结束', canvas.width/2, canvas.height/2 - 30); | |
| ctx.font = '24px "Ma Shan Zheng", cursive'; | |
| ctx.fillText('你的萝卜被吃掉了!', canvas.width/2, canvas.height/2 + 20); | |
| ctx.fillStyle = '#f59e0b'; | |
| ctx.font = 'bold 28px "Ma Shan Zheng", cursive'; | |
| ctx.fillText('点击重新开始', canvas.width/2, canvas.height/2 + 80); | |
| } | |
| // 绘制游戏胜利画面 | |
| function drawGameWon() { | |
| ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| ctx.fillStyle = '#f59e0b'; | |
| ctx.font = 'bold 48px "Ma Shan Zheng", cursive'; | |
| ctx.textAlign = 'center'; | |
| ctx.fillText('胜利!', canvas.width/2, canvas.height/2 - 30); | |
| ctx.fillStyle = 'white'; | |
| ctx.font = '24px "Ma Shan Zheng", cursive'; | |
| ctx.fillText('你成功保护了萝卜!', canvas.width/2, canvas.height/2 + 20); | |
| ctx.fillStyle = '#f59e0b'; | |
| ctx.font = 'bold 28px "Ma Shan Zheng", cursive'; | |
| ctx.fillText('点击重新开始', canvas.width/2, canvas.height/2 + 80); | |
| } | |
| // 更新游戏状态 | |
| function update() { | |
| if (gameState.gameOver || gameState.gameWon) return; | |
| // 更新敌人 | |
| updateEnemies(); | |
| // 更新投射物 | |
| updateProjectiles(); | |
| // 更新防御塔 | |
| updateTowers(); | |
| // 更新波次计时器 | |
| if (!gameState.waveInProgress && gameState.wave < gameState.maxWave) { | |
| updateWaveTimer(); | |
| } | |
| // 检查游戏是否结束 | |
| if (gameState.lives <= 0) { | |
| gameState.gameOver = true; | |
| } | |
| // 检查游戏是否胜利 | |
| if (gameState.wave >= gameState.maxWave && gameState.enemies.length === 0) { | |
| gameState.gameWon = true; | |
| } | |
| // 更新UI | |
| updateUI(); | |
| } | |
| // 更新敌人 | |
| function updateEnemies() { | |
| for (let i = gameState.enemies.length - 1; i >= 0; i--) { | |
| const enemy = gameState.enemies[i]; | |
| // 移动敌人 | |
| if (enemy.pathIndex < gameState.path.length - 1) { | |
| const target = gameState.path[enemy.pathIndex + 1]; | |
| const dx = target.x - enemy.x; | |
| const dy = target.y - enemy.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 1) { | |
| enemy.pathIndex++; | |
| } else { | |
| enemy.x += (dx / distance) * enemy.speed * (enemy.slowTimer > 0 ? 0.5 : 1); | |
| enemy.y += (dy / distance) * enemy.speed * (enemy.slowTimer > 0 ? 0.5 : 1); | |
| } | |
| } | |
| // 检查敌人是否到达终点 | |
| const dx = gameState.carrotPosition.x - enemy.x; | |
| const dy = gameState.carrotPosition.y - enemy.y; | |
| const distanceToCarrot = Math.sqrt(dx * dx + dy * dy); | |
| if (distanceToCarrot < 30) { | |
| gameState.lives--; | |
| gameState.enemies.splice(i, 1); | |
| continue; | |
| } | |
| // 更新减速计时器 | |
| if (enemy.slowTimer > 0) { | |
| enemy.slowTimer--; | |
| } | |
| } | |
| } | |
| // 更新投射物 | |
| function updateProjectiles() { | |
| for (let i = gameState.projectiles.length - 1; i >= 0; i--) { | |
| const projectile = gameState.projectiles[i]; | |
| // 移动投射物 | |
| const dx = projectile.target.x - projectile.x; | |
| const dy = projectile.target.y - projectile.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 5) { | |
| // 投射物击中目标 | |
| const enemy = gameState.enemies.find(e => e === projectile.target); | |
| if (enemy) { | |
| enemy.health -= projectile.damage; | |
| // 如果是减速塔的投射物，应用减速效果 | |
| if (projectile.slowEffect) { | |
| enemy.slowTimer = 120; // 2秒减速效果 | |
| } | |
| // 检查敌人是否被击败 | |
| if (enemy.health <= 0) { | |
| gameState.money += enemy.reward; | |
| const index = gameState.enemies.indexOf(enemy); | |
| if (index !== -1) { | |
| gameState.enemies.splice(index, 1); | |
| } | |
| } | |
| } | |
| gameState.projectiles.splice(i, 1); | |
| } else { | |
| projectile.x += (dx / distance) * projectile.speed; | |
| projectile.y += (dy / distance) * projectile.speed; | |
| } | |
| } | |
| } | |
| // 更新防御塔 | |
| function updateTowers() { | |
| gameState.towers.forEach(tower => { | |
| // 重置目标 | |
| tower.target = null; | |
| // 查找范围内的敌人 | |
| let closestEnemy = null; | |
| let minDistance = Infinity; | |
| gameState.enemies.forEach(enemy => { | |
| const dx = enemy.x - tower.x; | |
| const dy = enemy.y - tower.y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < tower.range && distance < minDistance) { | |
| closestEnemy = enemy; | |
| minDistance = distance; | |
| } | |
| }); | |
| // 如果找到敌人且冷却结束，则攻击 | |
| if (closestEnemy && Date.now() - tower.lastShot > tower.fireRate) { | |
| tower.target = closestEnemy; | |
| tower.lastShot = Date.now(); | |
| // 创建投射物 | |
| gameState.projectiles.push({ | |
| x: tower.x, | |
| y: tower.y, | |
| target: closestEnemy, | |
| damage: tower.damage, | |
| speed: tower.projectileSpeed, | |
| radius: 5, | |
| color: tower.color, | |
| slowEffect: tower.slowEffect | |
| }); | |
| } | |
| }); | |
| } | |
| // 更新波次计时器 | |
| function updateWaveTimer() { | |
| if (gameState.nextWaveTimer > 0) { | |
| gameState.nextWaveTimer -= 1/60; // 假设60FPS | |
| if (gameState.nextWaveTimer <= 0) { | |
| startWave(); | |
| } | |
| } | |
| } | |
| // 更新UI | |
| function updateUI() { | |
| moneyDisplay.textContent = gameState.money; | |
| livesDisplay.textContent = gameState.lives; | |
| waveDisplay.textContent = gameState.wave; | |
| if (!gameState.waveInProgress && gameState.wave < gameState.maxWave) { | |
| nextWaveTimerDisplay.textContent = Math.ceil(gameState.nextWaveTimer); | |
| } else { | |
| nextWaveTimerDisplay.textContent = '战斗中'; | |
| } | |
| // 更新开始波次按钮状态 | |
| if (gameState.waveInProgress || gameState.wave >= gameState.maxWave) { | |
| startWaveButton.disabled = true; | |
| startWaveButton.classList.remove('hover:transform', 'hover:-translate-y-2', 'hover:shadow-md'); | |
| startWaveButton.classList.add('opacity-50'); | |
| } else { | |
| startWaveButton.disabled = false; | |
| startWaveButton.classList.add('hover:transform', 'hover:-translate-y-2', 'hover:shadow-md'); | |
| startWaveButton.classList.remove('opacity-50'); | |
| } | |
| // 更新塔选项的可购买状态 | |
| towerOptions.forEach(option => { | |
| const towerType = option.dataset.tower; | |
| const cost = TOWER_TYPES[towerType].cost; | |
| if (gameState.money < cost) { | |
| option.classList.add('opacity-50'); | |
| option.classList.remove('cursor-pointer', 'hover:border-yellow-400'); | |
| option.classList.add('cursor-not-allowed'); | |
| } else { | |
| option.classList.remove('opacity-50'); | |
| option.classList.add('cursor-pointer', 'hover:border-yellow-400'); | |
| option.classList.remove('cursor-not-allowed'); | |
| } | |
| }); | |
| } | |
| // 开始一波敌人 | |
| function startWave() { | |
| if (gameState.waveInProgress || gameState.wave >= gameState.maxWave) return; | |
| gameState.wave++; | |
| gameState.waveInProgress = true; | |
| gameState.nextWaveTimer = 5; | |
| // 根据波数生成敌人 | |
| const enemyCount = 5 + gameState.wave * 2; | |
| const enemyTypes = []; | |
| if (gameState.wave < 3) { | |
| enemyTypes.push(0); // 只生成第一种敌人 | |
| } else if (gameState.wave < 6) { | |
| enemyTypes.push(0, 1); // 前两种敌人 | |
| } else if (gameState.wave < 9) { | |
| enemyTypes.push(0, 1, 2); // 前三种敌人 | |
| } else { | |
| enemyTypes.push(0, 1, 2, 3); // 所有敌人 | |
| } | |
| for (let i = 0; i < enemyCount; i++) { | |
| const typeIndex = enemyTypes[Math.floor(Math.random() * enemyTypes.length)]; | |
| const type = ENEMY_TYPES[typeIndex]; | |
| // 随着波数增加，敌人变得更强大 | |
| const healthMultiplier = 1 + (gameState.wave - 1) * 0.1; | |
| const rewardMultiplier = 1 + (gameState.wave - 1) * 0.05; | |
| setTimeout(() => { | |
| gameState.enemies.push({ | |
| x: gameState.path[0].x, | |
| y: gameState.path[0].y, | |
| health: type.health * healthMultiplier, | |
| maxHealth: type.health * healthMultiplier, | |
| speed: type.speed, | |
| color: type.color, | |
| reward: Math.round(type.reward * rewardMultiplier), | |
| pathIndex: 0, | |
| slowTimer: 0 | |
| }); | |
| }, i * 1000); // 每秒生成一个敌人 | |
| } | |
| // 检查波次是否结束 | |
| const checkWaveEnd = setInterval(() => { | |
| if (gameState.enemies.length === 0) { | |
| gameState.waveInProgress = false; | |
| clearInterval(checkWaveEnd); | |
| } | |
| }, 1000); | |
| } | |
| // 游戏循环 | |
| function gameLoop() { | |
| update(); | |
| draw(); | |
| requestAnimationFrame(gameLoop); | |
| } | |
| // 初始化游戏 | |
| function initGame() { | |
| gameState = { | |
| money: 100, | |
| lives: 10, | |
| wave: 0, | |
| maxWave: 10, | |
| waveInProgress: false, | |
| nextWaveTimer: 5, | |
| selectedTower: null, | |
| towers: [], | |
| enemies: [], | |
| projectiles: [], | |
| path: [], | |
| carrotPosition: { x: 750, y: 250 }, | |
| gameOver: false, | |
| gameWon: false | |
| }; | |
| initPath(); | |
| startWaveButton.disabled = false; | |
| startWaveButton.classList.remove('opacity-50'); | |
| } | |
| // 事件监听器 | |
| canvas.addEventListener('click', (e) => { | |
| if (gameState.gameOver || gameState.gameWon) { | |
| initGame(); | |
| return; | |
| } | |
| const rect = canvas.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| // 检查是否点击了路径 | |
| const isOnPath = isPointOnPath(x, y); | |
| if (gameState.selectedTower && !isOnPath) { | |
| // 检查是否有足够的金钱 | |
| const towerType = TOWER_TYPES[gameState.selectedTower]; | |
| if (gameState.money >= towerType.cost) { | |
| // 检查是否与其他塔重叠 | |
| const overlapping = gameState.towers.some(tower => { | |
| const dx = tower.x - x; | |
| const dy = tower.y - y; | |
| return Math.sqrt(dx * dx + dy * dy) < 40; | |
| }); | |
| if (!overlapping) { | |
| // 放置防御塔 | |
| gameState.towers.push({ | |
| x: x, | |
| y: y, | |
| type: gameState.selectedTower, | |
| damage: towerType.damage, | |
| range: towerType.range, | |
| fireRate: towerType.fireRate, | |
| color: towerType.color, | |
| projectileSpeed: towerType.projectileSpeed, | |
| lastShot: 0, | |
| target: null, | |
| slowEffect: towerType.slowEffect | |
| }); | |
| gameState.money -= towerType.cost; | |
| gameState.selectedTower = null; | |
| // 移除所有范围指示器 | |
| document.querySelectorAll('.tower-range').forEach(el => el.remove()); | |
| } | |
| } | |
| } | |
| }); | |
| // 检查点是否在路径上 | |
| function isPointOnPath(x, y) { | |
| // 简化检查：只需检查是否靠近路径点 | |
| for (let i = 0; i < gameState.path.length; i++) { | |
| const point = gameState.path[i]; | |
| const dx = point.x - x; | |
| const dy = point.y - y; | |
| const distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 30) { | |
| return true; | |
| } | |
| } | |
| // 检查是否在路径线段上 | |
| for (let i = 0; i < gameState.path.length - 1; i++) { | |
| const p1 = gameState.path[i]; | |
| const p2 = gameState.path[i + 1]; | |
| // 计算点到线段的距离 | |
| const distance = pointToLineDistance(x, y, p1.x, p1.y, p2.x, p2.y); | |
| if (distance < 25) { | |
| return true; | |
| } | |
| } | |
| return false; | |
| } | |
| // 计算点到线段的距离 | |
| function pointToLineDistance(x, y, x1, y1, x2, y2) { | |
| const A = x - x1; | |
| const B = y - y1; | |
| const C = x2 - x1; | |
| const D = y2 - y1; | |
| const dot = A * C + B * D; | |
| const len_sq = C * C + D * D; | |
| let param = -1; | |
| if (len_sq !== 0) { | |
| param = dot / len_sq; | |
| } | |
| let xx, yy; | |
| if (param < 0) { | |
| xx = x1; | |
| yy = y1; | |
| } else if (param > 1) { | |
| xx = x2; | |
| yy = y2; | |
| } else { | |
| xx = x1 + param * C; | |
| yy = y1 + param * D; | |
| } | |
| const dx = x - xx; | |
| const dy = y - yy; | |
| return Math.sqrt(dx * dx + dy * dy); | |
| } | |
| // 塔选项点击事件 | |
| towerOptions.forEach(option => { | |
| option.addEventListener('click', () => { | |
| const towerType = option.dataset.tower; | |
| const cost = TOWER_TYPES[towerType].cost; | |
| if (gameState.money >= cost) { | |
| gameState.selectedTower = towerType; | |
| // 移除之前的所有范围指示器 | |
| document.querySelectorAll('.tower-range').forEach(el => el.remove()); | |
| // 创建新的范围指示器 | |
| const rangeIndicator = document.createElement('div'); | |
| rangeIndicator.className = 'tower-range'; | |
| rangeIndicator.style.width = `${TOWER_TYPES[towerType].range * 2}px`; | |
| rangeIndicator.style.height = `${TOWER_TYPES[towerType].range * 2}px`; | |
| rangeIndicator.style.left = `0px`; | |
| rangeIndicator.style.top = `0px`; | |
| rangeIndicator.style.transform = 'translate(-50%, -50%)'; | |
| document.body.appendChild(rangeIndicator); | |
| // 更新范围指示器位置 | |
| const updateRangeIndicator = (e) => { | |
| const rect = canvas.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| rangeIndicator.style.left = `${x + rect.left}px`; | |
| rangeIndicator.style.top = `${y + rect.top}px`; | |
| }; | |
| canvas.addEventListener('mousemove', updateRangeIndicator); | |
| // 当取消选择或放置塔时移除事件监听器 | |
| const cancelSelection = () => { | |
| canvas.removeEventListener('mousemove', updateRangeIndicator); | |
| rangeIndicator.remove(); | |
| }; | |
| canvas.addEventListener('click', cancelSelection, { once: true }); | |
| } | |
| }); | |
| }); | |
| // 开始波次按钮点击事件 | |
| startWaveButton.addEventListener('click', startWave); | |
| // 初始化并开始游戏 | |
| initPath(); | |
| gameLoop(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bozhong/carrotprotection" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |