From efc9f03d4f0edcb7d730a3af938a93d6a9f299e1 Mon Sep 17 00:00:00 2001
From: xcclyc <leo20140610@139.com>
Date: Mon, 23 Mar 2026 13:18:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=E3=80=8C/=E3=80=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 570 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 570 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..20f101f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,570 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>杀死 WHL!</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html, body {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
+        }
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            font-family: 'Segoe UI', sans-serif;
+            user-select: none;
+        }
+        #gameContainer {
+            position: relative;
+            border-radius: 12px;
+            box-shadow: 0 0 40px rgba(255, 0, 100, 0.3), 0 0 80px rgba(0, 200, 255, 0.2);
+            overflow: hidden;
+            touch-action: none;
+        }
+        #gameCanvas {
+            display: block;
+            background: radial-gradient(ellipse at center, #1a1a3e 0%, #0a0a1a 100%);
+            cursor: crosshair;
+        }
+        #ui {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            right: 10px;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            gap: 5px;
+            pointer-events: none;
+        }
+        .stat {
+            background: rgba(0, 0, 0, 0.6);
+            padding: 5px 10px;
+            border-radius: 8px;
+            color: #fff;
+            font-size: 14px;
+            border: 2px solid rgba(255, 255, 255, 0.2);
+        }
+        .stat span { color: #0ff; font-weight: bold; }
+        #startScreen, #gameOverScreen {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            background: rgba(0, 0, 0, 0.85);
+            color: white;
+            text-align: center;
+            padding: 20px;
+        }
+        #startScreen h1, #gameOverScreen h1 {
+            font-size: clamp(24px, 6vw, 48px);
+            margin-bottom: 10px;
+            background: linear-gradient(45deg, #ff0066, #00ffff, #ffff00);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            animation: glow 2s ease-in-out infinite alternate;
+        }
+        @keyframes glow {
+            from { filter: drop-shadow(0 0 10px #ff0066); }
+            to { filter: drop-shadow(0 0 30px #00ffff); }
+        }
+        .title-WHL {
+            font-size: clamp(48px, 15vw, 96px);
+            font-weight: bold;
+            letter-spacing: clamp(5px, 3vw, 20px);
+            margin: 15px 0;
+        }
+        .w { color: #ff3366; text-shadow: 0 0 20px #ff3366; }
+        .h { color: #33ff66; text-shadow: 0 0 20px #33ff66; }
+        .l { color: #3366ff; text-shadow: 0 0 20px #3366ff; }
+        button {
+            margin-top: 20px;
+            padding: 12px 40px;
+            font-size: clamp(18px, 4vw, 24px);
+            background: linear-gradient(45deg, #ff0066, #ff6600);
+            border: none;
+            border-radius: 30px;
+            color: white;
+            cursor: pointer;
+            transition: all 0.3s;
+            box-shadow: 0 5px 20px rgba(255, 0, 102, 0.4);
+        }
+        button:hover {
+            transform: scale(1.1);
+            box-shadow: 0 5px 40px rgba(255, 0, 102, 0.8);
+        }
+        button:active {
+            transform: scale(0.95);
+        }
+        .instructions {
+            margin-top: 15px;
+            font-size: clamp(14px, 3vw, 18px);
+            color: #aaa;
+            max-width: 90%;
+            line-height: 1.6;
+        }
+        .final-score {
+            font-size: clamp(20px, 5vw, 32px);
+            color: #0ff;
+            margin: 15px 0;
+        }
+        .high-score {
+            font-size: clamp(16px, 4vw, 20px);
+            color: #ff0;
+            margin-bottom: 15px;
+        }
+        #comboDisplay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: clamp(32px, 8vw, 64px);
+            font-weight: bold;
+            color: #ff0;
+            text-shadow: 0 0 20px #ff0;
+            pointer-events: none;
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        #comboDisplay.show {
+            opacity: 1;
+            animation: comboPop 0.5s ease-out;
+        }
+        @keyframes comboPop {
+            0% { transform: translate(-50%, -50%) scale(0.5); }
+            50% { transform: translate(-50%, -50%) scale(1.3); }
+            100% { transform: translate(-50%, -50%) scale(1); }
+        }
+    </style>
+</head>
+<body>
+    <div id="gameContainer">
+        <canvas id="gameCanvas"></canvas>
+        <div id="ui">
+            <div class="stat">分数: <span id="score">0</span></div>
+            <div class="stat">连击: <span id="combo">0</span></div>
+            <div class="stat">波次: <span id="wave">1</span></div>
+            <div class="stat">生命: <span id="lives">❤️❤️❤️</span></div>
+        </div>
+        <div id="comboDisplay"></div>
+        
+        <div id="startScreen">
+            <h1>消灭 WHL 入侵!</h1>
+            <div class="title-WHL"><span class="w">W</span><span class="h">H</span><span class="l">L</span></div>
+            <p class="instructions">
+                WHL外星生物正在入侵地球!<br>
+                点击消灭它们获得分数!<br>
+                连续击杀获得连击加分!<br>
+                不要让它们逃跑!
+            </p>
+            <button onclick="startGame()">开始游戏</button>
+        </div>
+        
+        <div id="gameOverScreen" style="display: none;">
+            <h1>游戏结束</h1>
+            <div class="final-score">最终分数: <span id="finalScore">0</span></div>
+            <div class="high-score">最高分: <span id="highScore">0</span></div>
+            <button onclick="startGame()">再来一局</button>
+        </div>
+    </div>
+
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const container = document.getElementById('gameContainer');
+        
+        const BASE_WIDTH = 800;
+        const BASE_HEIGHT = 600;
+        
+        let W, H, scaleRatio;
+        let gameState = 'start';
+        let score = 0, combo = 0, wave = 1, lives = 3;
+        let enemies = [], particles = [];
+        let lastSpawn = 0, spawnInterval = 2000;
+        let mouseX = 0, mouseY = 0;
+        let highScore = localStorage.getItem('whlHighScore') || 0;
+        let screenShake = 0;
+        let time = 0;
+
+        function resize() {
+            const maxW = window.innerWidth - 20;
+            const maxH = window.innerHeight - 20;
+            const ratio = Math.min(maxW / BASE_WIDTH, maxH / BASE_HEIGHT, 1.5);
+            
+            W = Math.floor(BASE_WIDTH * ratio);
+            H = Math.floor(BASE_HEIGHT * ratio);
+            scaleRatio = ratio;
+            
+            canvas.width = W;
+            canvas.height = H;
+            canvas.style.width = W + 'px';
+            canvas.style.height = H + 'px';
+        }
+
+        const enemyTypes = {
+            W: { char: 'W', color: '#ff3366', size: 50, speed: 2, health: 1, points: 10, glow: '#ff3366' },
+            H: { char: 'H', color: '#33ff66', size: 45, speed: 3, health: 2, points: 25, glow: '#33ff66' },
+            L: { char: 'L', color: '#3366ff', size: 40, speed: 4, health: 3, points: 50, glow: '#3366ff' }
+        };
+
+        class Enemy {
+            constructor(type) {
+                const t = enemyTypes[type];
+                this.type = type;
+                this.char = t.char;
+                this.color = t.color;
+                this.baseSize = t.size;
+                this.size = t.size * scaleRatio;
+                this.speed = (t.speed + wave * 0.3) * scaleRatio;
+                this.health = t.health;
+                this.maxHealth = t.health;
+                this.points = t.points;
+                this.glow = t.glow;
+                
+                const side = Math.floor(Math.random() * 4);
+                if (side === 0) { this.x = Math.random() * W; this.y = -this.size; }
+                else if (side === 1) { this.x = W + this.size; this.y = Math.random() * H; }
+                else if (side === 2) { this.x = Math.random() * W; this.y = H + this.size; }
+                else { this.x = -this.size; this.y = Math.random() * H; }
+                
+                this.targetX = W / 2 + (Math.random() - 0.5) * W * 0.5;
+                this.targetY = H / 2 + (Math.random() - 0.5) * H * 0.5;
+                this.vx = 0;
+                this.vy = 0;
+                this.angle = 0;
+                this.wobble = Math.random() * Math.PI * 2;
+                this.hitFlash = 0;
+                this.scale = 0;
+            }
+            
+            update(dt) {
+                this.wobble += dt * 3;
+                this.angle = Math.sin(this.wobble) * 0.1;
+                this.scale = Math.min(1, this.scale + dt * 5);
+                
+                const dx = this.targetX - this.x;
+                const dy = this.targetY - this.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+                
+                if (dist > 5) {
+                    this.vx += (dx / dist) * this.speed * 0.1;
+                    this.vy += (dy / dist) * this.speed * 0.1;
+                }
+                
+                this.vx *= 0.95;
+                this.vy *= 0.95;
+                this.x += this.vx;
+                this.y += this.vy;
+                
+                if (Math.random() < 0.01) {
+                    this.targetX = Math.random() * (W - 100) + 50;
+                    this.targetY = Math.random() * (H - 100) + 50;
+                }
+                
+                if (this.hitFlash > 0) this.hitFlash -= dt * 5;
+            }
+            
+            draw() {
+                const s = this.baseSize * scaleRatio;
+                ctx.save();
+                ctx.translate(this.x, this.y);
+                ctx.rotate(this.angle);
+                ctx.scale(this.scale, this.scale);
+                
+                ctx.shadowColor = this.glow;
+                ctx.shadowBlur = (20 + Math.sin(time * 5) * 5) * scaleRatio;
+                
+                ctx.font = `bold ${s}px Arial`;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                
+                if (this.hitFlash > 0) {
+                    ctx.fillStyle = '#fff';
+                } else {
+                    ctx.fillStyle = this.color;
+                }
+                
+                ctx.fillText(this.char, 0, 0);
+                
+                if (this.maxHealth > 1) {
+                    ctx.shadowBlur = 0;
+                    const barWidth = s;
+                    const barHeight = 6 * scaleRatio;
+                    const healthPercent = this.health / this.maxHealth;
+                    
+                    ctx.fillStyle = 'rgba(0,0,0,0.5)';
+                    ctx.fillRect(-barWidth/2, -s/2 - 15 * scaleRatio, barWidth, barHeight);
+                    
+                    ctx.fillStyle = healthPercent > 0.5 ? '#0f0' : healthPercent > 0.25 ? '#ff0' : '#f00';
+                    ctx.fillRect(-barWidth/2, -s/2 - 15 * scaleRatio, barWidth * healthPercent, barHeight);
+                }
+                
+                ctx.restore();
+            }
+            
+            hit() {
+                this.health--;
+                this.hitFlash = 1;
+                screenShake = 5 * scaleRatio;
+                
+                for (let i = 0; i < 10; i++) {
+                    particles.push(new Particle(this.x, this.y, this.color));
+                }
+                
+                if (this.health <= 0) {
+                    this.die();
+                    return true;
+                }
+                return false;
+            }
+            
+            die() {
+                score += this.points * (1 + combo * 0.1);
+                combo++;
+                
+                if (combo > 1 && combo % 5 === 0) {
+                    showCombo(`${combo} 连击!`);
+                }
+                
+                for (let i = 0; i < 30; i++) {
+                    particles.push(new Particle(this.x, this.y, this.color, true));
+                }
+                
+                screenShake = 15 * scaleRatio;
+            }
+        }
+
+        class Particle {
+            constructor(x, y, color, big = false) {
+                this.x = x;
+                this.y = y;
+                this.color = color;
+                this.size = (big ? Math.random() * 8 + 4 : Math.random() * 4 + 2) * scaleRatio;
+                this.vx = (Math.random() - 0.5) * (big ? 15 : 8) * scaleRatio;
+                this.vy = (Math.random() - 0.5) * (big ? 15 : 8) * scaleRatio;
+                this.life = 1;
+                this.decay = big ? 1.5 : 2.5;
+            }
+            
+            update(dt) {
+                this.x += this.vx;
+                this.y += this.vy;
+                this.vy += 0.2 * scaleRatio;
+                this.life -= this.decay * dt;
+                this.size *= 0.97;
+            }
+            
+            draw() {
+                ctx.save();
+                ctx.globalAlpha = this.life;
+                ctx.fillStyle = this.color;
+                ctx.shadowColor = this.color;
+                ctx.shadowBlur = 10 * scaleRatio;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.restore();
+            }
+        }
+
+        function spawnEnemy() {
+            const types = ['W', 'W', 'W', 'W', 'H', 'H', 'L'];
+            if (wave >= 3) types.push('H', 'L');
+            if (wave >= 5) types.push('L', 'L');
+            
+            const type = types[Math.floor(Math.random() * types.length)];
+            enemies.push(new Enemy(type));
+        }
+
+        function showCombo(text) {
+            const display = document.getElementById('comboDisplay');
+            display.textContent = text;
+            display.classList.remove('show');
+            void display.offsetWidth;
+            display.classList.add('show');
+        }
+
+        function updateUI() {
+            document.getElementById('score').textContent = Math.floor(score);
+            document.getElementById('combo').textContent = combo;
+            document.getElementById('wave').textContent = wave;
+            document.getElementById('lives').textContent = '❤️'.repeat(Math.max(0, lives));
+        }
+
+        function startGame() {
+            gameState = 'playing';
+            score = 0;
+            combo = 0;
+            wave = 1;
+            lives = 3;
+            enemies = [];
+            particles = [];
+            spawnInterval = 2000;
+            lastSpawn = 0;
+            time = 0;
+            
+            document.getElementById('startScreen').style.display = 'none';
+            document.getElementById('gameOverScreen').style.display = 'none';
+        }
+
+        function gameOver() {
+            gameState = 'gameover';
+            
+            if (score > highScore) {
+                highScore = Math.floor(score);
+                localStorage.setItem('whlHighScore', highScore);
+            }
+            
+            document.getElementById('finalScore').textContent = Math.floor(score);
+            document.getElementById('highScore').textContent = highScore;
+            document.getElementById('gameOverScreen').style.display = 'flex';
+        }
+
+        function getClickPos(e) {
+            const rect = canvas.getBoundingClientRect();
+            const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+            const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+            return {
+                x: clientX - rect.left,
+                y: clientY - rect.top
+            };
+        }
+
+        canvas.addEventListener('click', handleClick);
+        canvas.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            handleClick(e);
+        });
+
+        function handleClick(e) {
+            if (gameState !== 'playing') return;
+            
+            const pos = getClickPos(e);
+            
+            let hit = false;
+            for (let i = enemies.length - 1; i >= 0; i--) {
+                const enemy = enemies[i];
+                const dist = Math.sqrt((pos.x - enemy.x) ** 2 + (pos.y - enemy.y) ** 2);
+                if (dist < enemy.size) {
+                    if (enemy.hit()) {
+                        enemies.splice(i, 1);
+                    }
+                    hit = true;
+                    break;
+                }
+            }
+            
+            if (!hit) {
+                combo = 0;
+                for (let i = 0; i < 5; i++) {
+                    particles.push(new Particle(pos.x, pos.y, '#666'));
+                }
+            }
+            
+            for (let i = 0; i < 3; i++) {
+                particles.push(new Particle(pos.x, pos.y, '#fff'));
+            }
+        }
+
+        canvas.addEventListener('mousemove', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            mouseX = e.clientX - rect.left;
+            mouseY = e.clientY - rect.top;
+        });
+
+        canvas.addEventListener('touchmove', (e) => {
+            e.preventDefault();
+            const rect = canvas.getBoundingClientRect();
+            mouseX = e.touches[0].clientX - rect.left;
+            mouseY = e.touches[0].clientY - rect.top;
+        });
+
+        let lastTime = 0;
+        function gameLoop(timestamp) {
+            const dt = Math.min((timestamp - lastTime) / 1000, 0.1);
+            lastTime = timestamp;
+            time += dt;
+            
+            ctx.save();
+            
+            if (screenShake > 0) {
+                ctx.translate(
+                    (Math.random() - 0.5) * screenShake,
+                    (Math.random() - 0.5) * screenShake
+                );
+                screenShake *= 0.9;
+                if (screenShake < 0.5) screenShake = 0;
+            }
+            
+            ctx.fillStyle = 'rgba(10, 10, 26, 0.3)';
+            ctx.fillRect(0, 0, W, H);
+            
+            if (gameState === 'playing') {
+                if (timestamp - lastSpawn > spawnInterval) {
+                    spawnEnemy();
+                    lastSpawn = timestamp;
+                    spawnInterval = Math.max(500, spawnInterval - 50);
+                }
+                
+                if (score > wave * 500) {
+                    wave++;
+                    showCombo(`波次 ${wave}!`);
+                    spawnInterval = Math.max(800, 2000 - wave * 100);
+                }
+                
+                for (let i = enemies.length - 1; i >= 0; i--) {
+                    enemies[i].update(dt);
+                    
+                    if (enemies[i].x < -100 * scaleRatio || enemies[i].x > W + 100 * scaleRatio ||
+                        enemies[i].y < -100 * scaleRatio || enemies[i].y > H + 100 * scaleRatio) {
+                        enemies.splice(i, 1);
+                        combo = 0;
+                        lives--;
+                        screenShake = 20 * scaleRatio;
+                        
+                        if (lives <= 0) {
+                            gameOver();
+                        }
+                    }
+                }
+            }
+            
+            for (let i = particles.length - 1; i >= 0; i--) {
+                particles[i].update(dt);
+                particles[i].draw();
+                if (particles[i].life <= 0) {
+                    particles.splice(i, 1);
+                }
+            }
+            
+            enemies.forEach(e => e.draw());
+            
+            if (gameState === 'playing') {
+                ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
+                ctx.lineWidth = 2 * scaleRatio;
+                ctx.beginPath();
+                ctx.arc(mouseX, mouseY, 30 * scaleRatio + Math.sin(time * 10) * 3 * scaleRatio, 0, Math.PI * 2);
+                ctx.stroke();
+            }
+            
+            ctx.restore();
+            updateUI();
+            requestAnimationFrame(gameLoop);
+        }
+
+        window.addEventListener('resize', resize);
+        resize();
+        
+        document.getElementById('highScore').textContent = highScore;
+        requestAnimationFrame(gameLoop);
+    </script>
+</body>
+</html>
