571 lines
20 KiB
HTML
571 lines
20 KiB
HTML
<!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>
|