860 lines
35 KiB
HTML
860 lines
35 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>海绵宝宝大冒险 · 比奇堡 1-1</title>
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2254%22%20height%3D%2258%22%20rx%3D%229%22%20fill%3D%22%23f7d842%22%20stroke%3D%22%23c9a91f%22%20stroke-width%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2211%22%20r%3D%222.6%22%20fill%3D%22%23e3c02c%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2219%22%20r%3D%222.1%22%20fill%3D%22%23e3c02c%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2246%22%20r%3D%222.3%22%20fill%3D%22%23e3c02c%22%2F%3E%3Ccircle%20cx%3D%2253%22%20cy%3D%2250%22%20r%3D%221.9%22%20fill%3D%22%23e3c02c%22%2F%3E%3Cpath%20d%3D%22M18%2017l-2-4M24%2015.5v-4.5M30%2017l2-4M36%2017l-2-4M42%2015.5v-4.5M48%2017l2-4%22%20stroke%3D%22%23333%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2227%22%20r%3D%229%22%20fill%3D%22%23fff%22%20stroke%3D%22%23caa42a%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2242%22%20cy%3D%2227%22%20r%3D%229%22%20fill%3D%22%23fff%22%20stroke%3D%22%23caa42a%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2225.5%22%20cy%3D%2227%22%20r%3D%224%22%20fill%3D%22%235aa7e8%22%2F%3E%3Ccircle%20cx%3D%2243.5%22%20cy%3D%2227%22%20r%3D%224%22%20fill%3D%22%235aa7e8%22%2F%3E%3Ccircle%20cx%3D%2226%22%20cy%3D%2227%22%20r%3D%222%22%20fill%3D%22%23111%22%2F%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%2227%22%20r%3D%222%22%20fill%3D%22%23111%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2239%22%20r%3D%223.4%22%20fill%3D%22%23f0a35e%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2239%22%20r%3D%223.4%22%20fill%3D%22%23f0a35e%22%2F%3E%3Cpath%20d%3D%22M20%2037q12%2014%2024%200%22%20fill%3D%22none%22%20stroke%3D%22%237a4a12%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2242.5%22%20width%3D%224.6%22%20height%3D%226.5%22%20rx%3D%221%22%20fill%3D%22%23fff%22%20stroke%3D%22%23c9a91f%22%20stroke-width%3D%22.8%22%2F%3E%3Crect%20x%3D%2232.6%22%20y%3D%2242.5%22%20width%3D%224.6%22%20height%3D%226.5%22%20rx%3D%221%22%20fill%3D%22%23fff%22%20stroke%3D%22%23c9a91f%22%20stroke-width%3D%22.8%22%2F%3E%3C%2Fsvg%3E">
|
||
<style>
|
||
html,body{margin:0;padding:0;background:#06213a;height:100%;overflow:hidden;
|
||
font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;}
|
||
#wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
|
||
canvas{max-width:100vw;max-height:100vh;aspect-ratio:960/544;width:100%;
|
||
image-rendering:pixelated;box-shadow:0 0 40px #000a;border-radius:6px;background:#7ec8ff;}
|
||
#pad{position:fixed;inset:auto 0 0 0;display:none;justify-content:space-between;
|
||
padding:14px 18px 22px;pointer-events:none;user-select:none;-webkit-user-select:none;}
|
||
#pad .grp{display:flex;gap:14px;pointer-events:auto;}
|
||
.pbtn{width:64px;height:64px;border-radius:50%;background:#ffffff22;border:2px solid #ffffff55;
|
||
color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;touch-action:none;}
|
||
.pbtn:active{background:#ffffff55;}
|
||
@media (pointer:coarse){ #pad{display:flex;} }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="wrap"><canvas id="game" width="960" height="544"></canvas></div>
|
||
<div id="pad">
|
||
<div class="grp">
|
||
<div class="pbtn" data-k="ArrowLeft">◀</div>
|
||
<div class="pbtn" data-k="ArrowRight">▶</div>
|
||
</div>
|
||
<div class="grp">
|
||
<div class="pbtn" data-k="ShiftLeft">跑</div>
|
||
<div class="pbtn" data-k="Space">跳</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
'use strict';
|
||
/* =========================================================
|
||
海绵宝宝大冒险 · 比奇堡 1-1
|
||
仿《超级马里奥》第一关的横版平台游戏(单文件,无外部资源)
|
||
方向键 / WASD 移动,空格 / ↑ 跳跃,Shift 加速跑,P 暂停,R 重开
|
||
========================================================= */
|
||
const cv = document.getElementById('game');
|
||
const ctx = cv.getContext('2d');
|
||
const W = 960, H = 544, T = 32, LW = 224, LH = 17;
|
||
|
||
/* ---------------- 输入 ---------------- */
|
||
const keys = {}, pressed = {};
|
||
const PREVENT = ['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Space'];
|
||
addEventListener('keydown', e => {
|
||
if (PREVENT.includes(e.code)) e.preventDefault();
|
||
initAudio();
|
||
if (!keys[e.code]) pressed[e.code] = true;
|
||
keys[e.code] = true;
|
||
if ((state === 'start' || state === 'over' || state === 'win') &&
|
||
(e.code === 'Enter' || e.code === 'Space' || e.code === 'KeyR')) startGame();
|
||
if (e.code === 'KeyP' && (state === 'play' || state === 'dying')) paused = !paused;
|
||
if (e.code === 'KeyM') muted = !muted;
|
||
});
|
||
addEventListener('keyup', e => { keys[e.code] = false; });
|
||
cv.addEventListener('pointerdown', () => {
|
||
initAudio();
|
||
if (state === 'start' || state === 'over' || state === 'win') startGame();
|
||
});
|
||
document.querySelectorAll('.pbtn').forEach(b => {
|
||
const k = b.dataset.k;
|
||
const on = e => { e.preventDefault(); initAudio();
|
||
if (state === 'start' || state === 'over' || state === 'win') { startGame(); return; }
|
||
if (!keys[k]) pressed[k] = true; keys[k] = true; };
|
||
const off = e => { e.preventDefault(); keys[k] = false; };
|
||
b.addEventListener('pointerdown', on);
|
||
b.addEventListener('pointerup', off);
|
||
b.addEventListener('pointercancel', off);
|
||
b.addEventListener('pointerleave', off);
|
||
});
|
||
const kLeft = () => keys.ArrowLeft || keys.KeyA;
|
||
const kRight = () => keys.ArrowRight || keys.KeyD;
|
||
const kDown = () => keys.ArrowDown || keys.KeyS;
|
||
const kJump = () => keys.Space || keys.ArrowUp || keys.KeyW;
|
||
const kJumpPressed = () => pressed.Space || pressed.ArrowUp || pressed.KeyW;
|
||
|
||
/* ---------------- 音效(WebAudio 合成) ---------------- */
|
||
let AC = null, muted = false;
|
||
function initAudio() {
|
||
if (!AC) { try { AC = new (window.AudioContext || window.webkitAudioContext)(); } catch (e) {} }
|
||
if (AC && AC.state === 'suspended') AC.resume();
|
||
}
|
||
function tone(f0, f1, dur, type, vol, delay) {
|
||
if (!AC || muted) return;
|
||
type = type || 'square'; vol = vol || 0.07; delay = delay || 0;
|
||
const t = AC.currentTime + delay;
|
||
const o = AC.createOscillator(), g = AC.createGain();
|
||
o.type = type;
|
||
o.frequency.setValueAtTime(f0, t);
|
||
if (f1) o.frequency.exponentialRampToValueAtTime(Math.max(1, f1), t + dur);
|
||
g.gain.setValueAtTime(vol, t);
|
||
g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
|
||
o.connect(g); g.connect(AC.destination);
|
||
o.start(t); o.stop(t + dur + 0.03);
|
||
}
|
||
const sfx = {
|
||
jump() { tone(300, 700, 0.18, 'square', 0.05); },
|
||
coin() { tone(988, 0, 0.07, 'square', 0.06); tone(1319, 0, 0.18, 'square', 0.06, 0.07); },
|
||
stomp() { tone(320, 80, 0.13, 'triangle', 0.13); },
|
||
bump() { tone(170, 90, 0.1, 'square', 0.07); },
|
||
brick() { tone(240, 50, 0.16, 'sawtooth', 0.09); },
|
||
power() { [523, 659, 784, 1047].forEach((f, i) => tone(f, 0, 0.12, 'square', 0.06, i * 0.08)); },
|
||
hurt() { tone(440, 110, 0.35, 'sawtooth', 0.08); },
|
||
die() { tone(600, 70, 0.9, 'square', 0.08); },
|
||
win() { [659, 784, 1047, 1319, 1047, 1319, 1568].forEach((f, i) => tone(f, 0, 0.16, 'square', 0.07, i * 0.13)); },
|
||
tick() { tone(1200, 0, 0.04, 'square', 0.04); }
|
||
};
|
||
|
||
/* ---------------- 关卡数据 ---------------- */
|
||
let map = [], blockInfo = {};
|
||
const FLAG_X = 214; // 旗杆所在列
|
||
const POLE_PX = FLAG_X * T + 14; // 旗杆像素 x
|
||
|
||
function buildLevel() {
|
||
map = Array.from({ length: LH }, () => new Array(LW).fill(0));
|
||
blockInfo = {};
|
||
const set = (x, y, v) => { if (x >= 0 && x < LW && y >= 0 && y < LH) map[y][x] = v; };
|
||
const rect = (x1, y1, x2, y2, v) => { for (let y = y1; y <= y2; y++) for (let x = x1; x <= x2; x++) set(x, y, v); };
|
||
const pipe = (x, h) => { for (let y = 15 - h; y <= 14; y++) { set(x, y, 5); set(x + 1, y, 5); } };
|
||
const q = (x, y, kind) => { set(x, y, 3); blockInfo[x + ',' + y] = kind; };
|
||
|
||
// 地面(留出 5 处深坑)
|
||
const segs = [[0,68],[71,107],[110,152],[155,175],[178,201],[204,223]];
|
||
for (const [a, b] of segs) for (let x = a; x <= b; x++) { map[15][x] = 1; map[16][x] = 1; }
|
||
|
||
// 砖块与问号块(还原 1-1 的节奏)
|
||
q(16,11,'coin');
|
||
set(20,11,2); q(21,11,'coin'); set(22,11,2); q(23,11,'coin'); set(24,11,2);
|
||
q(22,7,'patty');
|
||
pipe(31,2); pipe(41,3); pipe(50,4); pipe(60,4);
|
||
set(35,11,2); q(36,11,'coin'); set(37,11,2);
|
||
q(45,11,'patty');
|
||
rect(55,11,57,11,2);
|
||
q(64,11,'coin'); q(65,7,'coin');
|
||
set(73,11,2); q(74,11,'coin'); set(75,11,2);
|
||
rect(79,7,81,7,2); set(80,11,2);
|
||
rect(84,11,86,11,2);
|
||
q(90,11,'patty');
|
||
q(94,11,'coin');
|
||
set(97,7,2); q(98,7,'coin'); set(99,7,2); set(98,11,2);
|
||
rect(103,11,105,11,2);
|
||
q(112,11,'coin');
|
||
rect(116,7,118,7,2); set(117,11,2);
|
||
pipe(121,2);
|
||
set(126,11,2); q(127,11,'coin'); set(128,11,2); q(129,11,'coin'); set(130,11,2);
|
||
q(134,7,'patty'); set(134,11,2);
|
||
pipe(138,3);
|
||
rect(143,11,145,11,2);
|
||
q(149,11,'coin');
|
||
set(158,11,2); q(159,11,'coin'); set(160,11,2);
|
||
q(164,11,'coin'); q(168,7,'coin'); set(168,11,2); q(172,11,'coin');
|
||
set(180,11,2); set(181,11,2); q(182,11,'coin'); set(183,11,2); set(184,11,2);
|
||
q(188,11,'coin');
|
||
// 终点前阶梯
|
||
for (let i = 0; i < 7; i++) rect(192 + i, 15 - (i + 1), 192 + i, 14, 6);
|
||
// 旗杆基座(装饰,不挡人)
|
||
set(FLAG_X, 14, 8);
|
||
}
|
||
|
||
/* 敌人配置:痞老板(步行) + 水母(漂浮) */
|
||
const ENEMY_DEFS = [
|
||
['p',26],['p',34],['p',44],['p',53],['p',58],['p',66],['p',78],
|
||
['p',85,11],['p',104,11],['p',117,7],
|
||
['p',128],['p',144],['p',159],['p',181],['p',189],
|
||
['j',37,10],['j',62,9],['j',76,10],['j',92,9],['j',113,10],
|
||
['j',131,9],['j',147,10],['j',166,9],['j',174,10],['j',190,9]
|
||
];
|
||
|
||
/* ---------------- 实体与状态 ---------------- */
|
||
const P = { x:96, y:0, w:20, h:28, vx:0, vy:0, dir:1, onGround:false,
|
||
big:false, inv:0, anim:0, jumpHeld:false, jbuf:0, coyote:0 };
|
||
let enemies = [], items = [], popcoins = [], parts = [], popups = [], bumps = [];
|
||
let camX = 0, score = 0, coins = 0, lives = 3, time = 300, timeAcc = 0;
|
||
let state = 'start', paused = false, deathT = 0, winT = 0, flagY = 118, combo = 0;
|
||
let now = 0;
|
||
|
||
function resetLevel(full) {
|
||
buildLevel();
|
||
enemies = ENEMY_DEFS.map(d => {
|
||
if (d[0] === 'p') {
|
||
const topY = (d[2] !== undefined ? d[2] : 15) * T;
|
||
return { type:'p', x:d[1]*T+6, y:topY-22, w:20, h:22, vx:-0.8, vy:0,
|
||
baseX:d[1]*T, baseY:topY-22, active:false, squash:0, dead:false };
|
||
}
|
||
return { type:'j', x:d[1]*T+6, y:d[2]*T, w:26, h:26,
|
||
baseX:d[1]*T+6, baseY:d[2]*T, t:Math.random()*100,
|
||
active:false, squash:0, dead:false };
|
||
});
|
||
items = []; popcoins = []; parts = []; popups = []; bumps = [];
|
||
P.big = false; P.h = 28; P.w = 20;
|
||
P.x = 96; P.y = 15*T - P.h; P.vx = 0; P.vy = 0; P.dir = 1; P.inv = 60;
|
||
P.jbuf = 0; P.coyote = 0; P.onGround = false;
|
||
camX = 0; time = 300; timeAcc = 0; combo = 0;
|
||
flagY = 118; winT = 0; deathT = 0;
|
||
if (full) { score = 0; coins = 0; lives = 3; }
|
||
}
|
||
function startGame() { resetLevel(true); state = 'play'; paused = false; }
|
||
|
||
/* ---------------- 瓦片辅助 ---------------- */
|
||
function tileAt(tx, ty) {
|
||
if (tx < 0 || tx >= LW) return 1; // 左右墙
|
||
if (ty < 0 || ty >= LH) return 0;
|
||
return map[ty][tx];
|
||
}
|
||
function solid(v) { return v >= 1 && v <= 7; }
|
||
|
||
function addPopup(x, y, txt) { popups.push({ x, y, txt, t: 0 }); }
|
||
function addParts(x, y, color, n) {
|
||
for (let i = 0; i < n; i++)
|
||
parts.push({ x, y, vx:(Math.random()-0.5)*5, vy:-Math.random()*6-2,
|
||
c:color, s:4+Math.random()*4, life:60 });
|
||
}
|
||
|
||
/* 顶砖块 */
|
||
function bumpBlock(tx, ty) {
|
||
const v = map[ty][tx];
|
||
bumps.push({ tx, ty, t: 0 });
|
||
if (v === 3) {
|
||
const kind = blockInfo[tx + ',' + ty];
|
||
map[ty][tx] = 4;
|
||
if (kind === 'patty') {
|
||
items.push({ x: tx*T+6, y: ty*T, vx: 1.6, vy: 0, w: 20, h: 16, rise: 16, t: 0 });
|
||
sfx.power();
|
||
} else {
|
||
popcoins.push({ x: tx*T+16, y: ty*T, t: 0 });
|
||
coins++; score += 200; sfx.coin();
|
||
if (coins >= 100) { coins -= 100; lives++; addPopup(tx*T, ty*T-20, '1-UP!'); }
|
||
}
|
||
} else if (v === 2) {
|
||
if (P.big) {
|
||
map[ty][tx] = 0;
|
||
addParts(tx*T+16, ty*T+16, '#c9684a', 6);
|
||
score += 50; sfx.brick();
|
||
} else sfx.bump();
|
||
} else sfx.bump();
|
||
// 顶砖块震死站在上面的痞老板
|
||
for (const e of enemies) {
|
||
if (!e.dead && e.type === 'p' && Math.abs(e.x + e.w/2 - (tx*T+16)) < 26 &&
|
||
Math.abs(e.y + e.h - ty*T) < 4) killEnemy(e, false);
|
||
}
|
||
}
|
||
|
||
function killEnemy(e, stomped) {
|
||
e.dead = true; e.squash = 1; e.vy = -6;
|
||
if (stomped) {
|
||
combo = Math.min(combo + 1, 5);
|
||
const pts = 100 * Math.pow(2, combo - 1);
|
||
score += pts; addPopup(e.x, e.y - 8, '' + pts);
|
||
sfx.stomp();
|
||
} else { score += 100; sfx.stomp(); }
|
||
}
|
||
|
||
/* ---------------- 玩家物理 ---------------- */
|
||
function moveX(o, dx) {
|
||
o.x += dx;
|
||
const y0 = Math.floor(o.y / T), y1 = Math.floor((o.y + o.h - 1) / T);
|
||
if (dx > 0) {
|
||
const tx = Math.floor((o.x + o.w - 1) / T);
|
||
for (let ty = y0; ty <= y1; ty++) if (solid(tileAt(tx, ty))) { o.x = tx*T - o.w; o.hitWallR = true; return; }
|
||
} else if (dx < 0) {
|
||
const tx = Math.floor(o.x / T);
|
||
for (let ty = y0; ty <= y1; ty++) if (solid(tileAt(tx, ty))) { o.x = (tx+1)*T; o.hitWallL = true; return; }
|
||
}
|
||
}
|
||
function moveY(o, dy, isPlayer) {
|
||
o.y += dy;
|
||
const x0 = Math.floor(o.x / T), x1 = Math.floor((o.x + o.w - 1) / T);
|
||
o.onGround = false;
|
||
if (dy > 0) {
|
||
const ty = Math.floor((o.y + o.h) / T);
|
||
for (let tx = x0; tx <= x1; tx++) if (solid(tileAt(tx, ty))) {
|
||
o.y = ty*T - o.h; o.vy = 0; o.onGround = true; return;
|
||
}
|
||
} else if (dy < 0) {
|
||
const ty = Math.floor(o.y / T);
|
||
let best = null;
|
||
for (let tx = x0; tx <= x1; tx++) if (solid(tileAt(tx, ty))) {
|
||
if (!best || Math.abs(tx*T + 16 - (o.x + o.w/2)) < Math.abs(best*T + 16 - (o.x + o.w/2))) best = tx;
|
||
}
|
||
if (best !== null) {
|
||
o.y = (ty+1)*T; o.vy = 0;
|
||
if (isPlayer) bumpBlock(best, ty);
|
||
return;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* ---------------- 更新 ---------------- */
|
||
function update() {
|
||
if (state === 'dying') {
|
||
P.vy += 0.55; P.y += P.vy; deathT++;
|
||
if (deathT > 110) {
|
||
lives--;
|
||
if (lives <= 0) state = 'over';
|
||
else { resetLevel(false); state = 'play'; }
|
||
}
|
||
return;
|
||
}
|
||
if (state === 'win') {
|
||
winT++;
|
||
flagY = Math.min(flagY + 5, 414);
|
||
if (P.y + P.h < 15*T - 2) { P.vy += 0.6; P.y = Math.min(P.y + P.vy, 15*T - P.h); }
|
||
if (winT === 100) { score += time * 50; }
|
||
camUpdate();
|
||
return;
|
||
}
|
||
if (state !== 'play') return;
|
||
|
||
// 计时
|
||
timeAcc++;
|
||
if (timeAcc >= 24) { timeAcc = 0; time--; if (time === 50) sfx.tick();
|
||
if (time <= 0) { die(); return; } }
|
||
|
||
/* --- 玩家 --- */
|
||
const maxWalk = 3.1, maxRun = 4.7, acc = 0.32, fric = 0.22;
|
||
const run = keys.ShiftLeft || keys.ShiftRight;
|
||
const maxV = run ? maxRun : maxWalk;
|
||
if (kLeft()) { P.vx = Math.max(P.vx - acc, -maxV); P.dir = -1; }
|
||
else if (kRight()) { P.vx = Math.min(P.vx + acc, maxV); P.dir = 1; }
|
||
else {
|
||
if (P.vx > 0) P.vx = Math.max(0, P.vx - fric);
|
||
else if (P.vx < 0) P.vx = Math.min(0, P.vx + fric);
|
||
}
|
||
if (kJumpPressed()) P.jbuf = 7; else if (P.jbuf > 0) P.jbuf--;
|
||
if (P.onGround) P.coyote = 6; else if (P.coyote > 0) P.coyote--;
|
||
if (P.jbuf > 0 && P.coyote > 0) {
|
||
P.jbuf = 0; P.coyote = 0;
|
||
P.vy = P.vx > 3.6 ? -12.2 : -11.2;
|
||
P.onGround = false; P.jumpHeld = true; sfx.jump();
|
||
}
|
||
if (!kJump()) P.jumpHeld = false;
|
||
const g = (P.vy < 0 && P.jumpHeld && kJump()) ? 0.34 : 0.62;
|
||
P.vy = Math.min(P.vy + g, 13);
|
||
if (P.inv > 0) P.inv--;
|
||
if (Math.abs(P.vx) > 0.2 && P.onGround) P.anim += Math.abs(P.vx);
|
||
|
||
moveX(P, P.vx);
|
||
moveY(P, P.vy, true);
|
||
if (P.x < camX) { P.x = camX; P.vx = Math.max(0, P.vx); }
|
||
if (P.x < 0) { P.x = 0; P.vx = 0; }
|
||
|
||
// 掉坑
|
||
if (P.y > LH*T + 40) { die(); return; }
|
||
|
||
// 到达旗杆(身体碰到旗杆线即过关)
|
||
if (P.x + P.w >= POLE_PX) {
|
||
state = 'win'; winT = 0; P.vx = 0; P.vy = 0;
|
||
P.x = POLE_PX - P.w/2 - 2;
|
||
sfx.win();
|
||
return;
|
||
}
|
||
|
||
/* --- 敌人 --- */
|
||
combo = P.onGround ? 0 : combo;
|
||
for (const e of enemies) {
|
||
if (e.dead) {
|
||
e.vy += 0.5; e.y += e.vy;
|
||
continue;
|
||
}
|
||
if (!e.active) {
|
||
if (e.x < camX + W + 32 && e.x > camX - 100) e.active = true;
|
||
else continue;
|
||
}
|
||
if (e.x < camX - 200) { e.dead = true; continue; }
|
||
if (e.type === 'p') {
|
||
e.hitWallL = e.hitWallR = false;
|
||
moveX(e, e.vx);
|
||
if (e.hitWallL) e.vx = Math.abs(e.vx);
|
||
if (e.hitWallR) e.vx = -Math.abs(e.vx);
|
||
e.vy = Math.min(e.vy + 0.5, 12);
|
||
moveY(e, e.vy, false);
|
||
e.anim = (e.anim || 0) + 0.2;
|
||
} else {
|
||
e.t += 0.03;
|
||
e.x = e.baseX + Math.sin(e.t * 0.7) * 46;
|
||
e.y = e.baseY + Math.sin(e.t * 1.3) * 46;
|
||
}
|
||
// 与玩家碰撞
|
||
if (P.inv <= 0 &&
|
||
P.x < e.x + e.w && P.x + P.w > e.x &&
|
||
P.y < e.y + e.h && P.y + P.h > e.y) {
|
||
if (P.vy > 0.5 && P.y + P.h - e.y < 16 + P.vy) {
|
||
killEnemy(e, true);
|
||
P.vy = kJump() ? -11 : -8;
|
||
} else hurt();
|
||
}
|
||
}
|
||
enemies = enemies.filter(e => !(e.dead && e.y > LH*T + 80));
|
||
|
||
/* --- 道具(蟹黄堡) --- */
|
||
for (const it of items) {
|
||
it.t++;
|
||
if (it.rise > 0) { it.y -= 1; it.rise--; continue; }
|
||
it.hitWallL = it.hitWallR = false;
|
||
moveX(it, it.vx);
|
||
if (it.hitWallL) it.vx = Math.abs(it.vx);
|
||
if (it.hitWallR) it.vx = -Math.abs(it.vx);
|
||
it.vy = Math.min(it.vy + 0.4, 10);
|
||
moveY(it, it.vy, false);
|
||
if (P.x < it.x + it.w && P.x + P.w > it.x && P.y < it.y + it.h && P.y + P.h > it.y) {
|
||
it.got = true; score += 1000; addPopup(it.x, it.y - 10, '1000');
|
||
if (!P.big) {
|
||
P.big = true; P.y -= 16; P.h = 44; P.w = 22;
|
||
sfx.power();
|
||
} else sfx.coin();
|
||
}
|
||
}
|
||
items = items.filter(it => !it.got && it.y < LH*T + 60);
|
||
|
||
/* --- 其他动画 --- */
|
||
for (const c of popcoins) c.t++;
|
||
popcoins = popcoins.filter(c => c.t < 26);
|
||
for (const p of parts) { p.vy += 0.4; p.x += p.vx; p.y += p.vy; p.life--; }
|
||
parts = parts.filter(p => p.life > 0);
|
||
for (const u of popups) u.t++;
|
||
popups = popups.filter(u => u.t < 50);
|
||
for (const b of bumps) b.t++;
|
||
bumps = bumps.filter(b => b.t < 12);
|
||
|
||
camUpdate();
|
||
}
|
||
|
||
function camUpdate() {
|
||
const target = P.x + P.w/2 - W * 0.38;
|
||
camX = Math.max(camX, Math.min(Math.max(0, target), LW*T - W));
|
||
camX = Math.max(0, Math.min(camX, LW*T - W));
|
||
}
|
||
|
||
function hurt() {
|
||
if (P.inv > 0) return;
|
||
if (P.big) {
|
||
P.big = false; P.h = 28; P.w = 20; P.y += 16; P.inv = 120;
|
||
sfx.hurt();
|
||
} else die();
|
||
}
|
||
function die() {
|
||
if (state !== 'play') return;
|
||
state = 'dying'; deathT = 0; P.vy = -11; sfx.die();
|
||
}
|
||
|
||
/* ---------------- 绘制 ---------------- */
|
||
function rr(g, x, y, w, h, r) {
|
||
g.beginPath();
|
||
g.moveTo(x+r, y);
|
||
g.arcTo(x+w, y, x+w, y+h, r);
|
||
g.arcTo(x+w, y+h, x, y+h, r);
|
||
g.arcTo(x, y+h, x, y, r);
|
||
g.arcTo(x, y, x+w, y, r);
|
||
g.closePath();
|
||
}
|
||
|
||
/* 背景气泡 */
|
||
const bubbles = Array.from({ length: 34 }, () => ({
|
||
x: Math.random()*LW*T, y: Math.random()*H, r: 2+Math.random()*5, s: 0.3+Math.random()*0.7
|
||
}));
|
||
|
||
function drawBG() {
|
||
const g = ctx;
|
||
const grad = g.createLinearGradient(0, 0, 0, H);
|
||
grad.addColorStop(0, '#8fd3ff'); grad.addColorStop(0.55, '#3f9be0'); grad.addColorStop(1, '#1c5fae');
|
||
g.fillStyle = grad; g.fillRect(0, 0, W, H);
|
||
// 光柱
|
||
g.save(); g.globalAlpha = 0.10; g.fillStyle = '#fff';
|
||
for (let i = 0; i < 5; i++) {
|
||
const x = ((i*430 - camX*0.2) % (W+400) + W+400) % (W+400) - 200;
|
||
g.beginPath(); g.moveTo(x, 0); g.lineTo(x+90, 0); g.lineTo(x+210, H); g.lineTo(x+60, H); g.fill();
|
||
}
|
||
g.restore();
|
||
// 远景珊瑚剪影
|
||
g.save(); g.globalAlpha = 0.25; g.fillStyle = '#0d3f73';
|
||
for (let i = 0; i < 40; i++) {
|
||
const wx = i*260 + (i%3)*70, sx = wx - camX*0.4;
|
||
if (sx < -200 || sx > W+200) continue;
|
||
const hh = 60 + (i*37 % 90);
|
||
g.beginPath(); g.ellipse(sx, 15*T, 90+(i%4)*22, hh, 0, Math.PI, 0); g.fill();
|
||
g.beginPath(); g.ellipse(sx+120, 15*T, 40+(i%3)*18, hh*0.6, 0, Math.PI, 0); g.fill();
|
||
}
|
||
g.restore();
|
||
// 上升气泡
|
||
g.save(); g.globalAlpha = 0.35; g.strokeStyle = '#eaffff'; g.lineWidth = 1.5;
|
||
for (const b of bubbles) {
|
||
b.y -= b.s; if (b.y < -10) { b.y = H + 10; b.x = camX + Math.random()*W; }
|
||
const sx = b.x - camX*0.6;
|
||
if (sx < -20 || sx > W+20) continue;
|
||
g.beginPath(); g.arc(sx, b.y, b.r, 0, 7); g.stroke();
|
||
}
|
||
g.restore();
|
||
}
|
||
|
||
function drawTile(tx, ty, v) {
|
||
const g = ctx;
|
||
let x = tx*T - camX, y = ty*T;
|
||
const b = bumps.find(b => b.tx === tx && b.ty === ty);
|
||
if (b) y -= Math.sin(b.t/12*Math.PI) * 8;
|
||
if (v === 1) { // 沙地
|
||
g.fillStyle = '#e0a95f'; g.fillRect(x, y, T, T);
|
||
g.fillStyle = '#f5cf8d'; g.fillRect(x, y, T, 5);
|
||
g.fillStyle = '#b97f3e';
|
||
g.fillRect(x+4, y+12, 4, 3); g.fillRect(x+18, y+20, 5, 3); g.fillRect(x+26, y+9, 3, 3);
|
||
g.strokeStyle = '#00000018'; g.strokeRect(x+0.5, y+0.5, T-1, T-1);
|
||
} else if (v === 2) { // 珊瑚砖
|
||
g.fillStyle = '#c9684a'; g.fillRect(x, y, T, T);
|
||
g.fillStyle = '#e88a68'; g.fillRect(x, y, T, 4);
|
||
g.fillStyle = '#8f4630';
|
||
g.fillRect(x, y+15, T, 2); g.fillRect(x+15, y+2, 2, 13); g.fillRect(x+7, y+17, 2, 15); g.fillRect(x+24, y+17, 2, 15);
|
||
g.strokeStyle = '#00000030'; g.strokeRect(x+0.5, y+0.5, T-1, T-1);
|
||
} else if (v === 3) { // 问号块(蟹堡包按钮)
|
||
const pulse = 0.5 + 0.5*Math.sin(now/220 + tx);
|
||
g.fillStyle = '#f2a93b'; g.fillRect(x, y, T, T);
|
||
g.fillStyle = '#ffd98a'; g.fillRect(x+2, y+2, T-4, 4);
|
||
g.fillStyle = '#a8641c'; g.fillRect(x, y+T-4, T, 4);
|
||
g.fillStyle = '#7a4a12';
|
||
g.fillRect(x+3, y+3, 4, 4); g.fillRect(x+T-7, y+3, 4, 4);
|
||
g.fillRect(x+3, y+T-7, 4, 4); g.fillRect(x+T-7, y+T-7, 4, 4);
|
||
g.fillStyle = `rgba(255,255,255,${0.55 + 0.45*pulse})`;
|
||
g.font = 'bold 20px monospace'; g.textAlign = 'center';
|
||
g.fillText('?', x+T/2, y+T-8);
|
||
} else if (v === 4) { // 已用
|
||
g.fillStyle = '#9a6a3c'; g.fillRect(x, y, T, T);
|
||
g.fillStyle = '#7a4a26'; g.fillRect(x+4, y+4, T-8, T-8);
|
||
g.strokeStyle = '#00000030'; g.strokeRect(x+0.5, y+0.5, T-1, T-1);
|
||
} else if (v === 5) { // 珊瑚管
|
||
const isTop = tileAt(tx, ty-1) !== 5;
|
||
g.fillStyle = '#e0607e'; g.fillRect(x, y, T, T);
|
||
g.fillStyle = '#f99ab0'; g.fillRect(x+3, y, 6, T);
|
||
g.fillStyle = '#a83a55'; g.fillRect(x+T-6, y, 6, T);
|
||
if (isTop) {
|
||
g.fillStyle = '#e0607e'; g.fillRect(x-3, y, T+6, 12);
|
||
g.fillStyle = '#f99ab0'; g.fillRect(x-3, y, T+6, 4);
|
||
g.strokeStyle = '#00000040'; g.strokeRect(x-2.5, y+0.5, T+5, 11);
|
||
}
|
||
} else if (v === 6) { // 岩石阶梯
|
||
g.fillStyle = '#9a8f84'; g.fillRect(x, y, T, T);
|
||
g.fillStyle = '#c2b8ab'; g.fillRect(x, y, T, 4);
|
||
g.fillStyle = '#6f655c'; g.fillRect(x, y+T-4, T, 4);
|
||
g.fillStyle = '#7d736a'; g.fillRect(x+8, y+12, 6, 4); g.fillRect(x+20, y+20, 5, 3);
|
||
g.strokeStyle = '#00000025'; g.strokeRect(x+0.5, y+0.5, T-1, T-1);
|
||
} else if (v === 7 || v === 8) { // 旗杆基座
|
||
g.fillStyle = '#5b8bd0'; g.fillRect(x, y, T, T);
|
||
g.fillStyle = '#8fb4ea'; g.fillRect(x, y, T, 5);
|
||
g.fillStyle = '#33568f'; g.fillRect(x, y+T-5, T, 5);
|
||
}
|
||
}
|
||
|
||
function drawFlag() {
|
||
const g = ctx, x = POLE_PX - camX;
|
||
if (x < -80 || x > W+80) return;
|
||
g.fillStyle = '#cfd8e3'; g.fillRect(x-2, 96, 4, 15*T-96);
|
||
g.fillStyle = '#fff'; g.beginPath(); g.arc(x, 92, 6, 0, 7); g.fill();
|
||
// 旗帜:锚图案
|
||
g.save(); g.translate(x, flagY);
|
||
g.fillStyle = '#d43b3b';
|
||
g.beginPath(); g.moveTo(0, 0); g.lineTo(46, 12); g.lineTo(0, 26); g.closePath(); g.fill();
|
||
g.strokeStyle = '#fff'; g.lineWidth = 2;
|
||
g.beginPath(); g.moveTo(14, 6); g.lineTo(14, 19);
|
||
g.arc(14, 17, 6, 0, Math.PI); g.moveTo(9, 9); g.lineTo(19, 9); g.stroke();
|
||
g.restore();
|
||
}
|
||
|
||
function drawKrustyKrab() {
|
||
const g = ctx, x = 217*T - camX;
|
||
if (x < -300 || x > W+60) return;
|
||
const gy = 15*T;
|
||
// 船形主体
|
||
g.fillStyle = '#c98a4b'; rr(g, x, gy-96, 150, 96, 10); g.fill();
|
||
g.fillStyle = '#8a5a2b'; g.fillRect(x, gy-96, 150, 10);
|
||
g.fillStyle = '#f7e6c5'; g.fillRect(x+14, gy-74, 40, 34);
|
||
g.fillStyle = '#7ec8ff'; g.fillRect(x+18, gy-70, 32, 26);
|
||
g.fillStyle = '#8a3b2b'; rr(g, x+86, gy-66, 40, 66, 6); g.fill();
|
||
g.fillStyle = '#f7e6c5'; g.font = 'bold 11px sans-serif'; g.textAlign = 'center';
|
||
g.fillText('KRUSTY KRAB', x+75, gy-82);
|
||
// 顶部锚招牌
|
||
g.strokeStyle = '#2b4a8f'; g.lineWidth = 5;
|
||
g.beginPath(); g.moveTo(x+75, gy-140); g.lineTo(x+75, gy-104);
|
||
g.arc(x+75, gy-110, 14, 0.15*Math.PI, 0.85*Math.PI); g.moveTo(x+61, gy-132); g.lineTo(x+89, gy-132); g.stroke();
|
||
g.beginPath(); g.arc(x+75, gy-144, 6, 0, 7); g.stroke();
|
||
}
|
||
|
||
/* 海绵宝宝 */
|
||
function drawBob(g, x, y, w, h, dir, anim, big, inv, jumping, run) {
|
||
if (inv && Math.floor(now/90) % 2) return;
|
||
g.save();
|
||
g.translate(x + w/2, y + h);
|
||
g.scale(dir * (w/22), h/44);
|
||
const swing = jumping ? 0 : (Math.abs(anim) > 0.1 ? Math.sin(anim*0.45) : 0);
|
||
// 腿
|
||
g.strokeStyle = '#f7d842'; g.lineWidth = 3;
|
||
g.beginPath();
|
||
g.moveTo(-4, -14); g.lineTo(-4 - swing*4, -2);
|
||
g.moveTo(4, -14); g.lineTo(4 + swing*4, -2);
|
||
g.stroke();
|
||
// 鞋
|
||
g.fillStyle = '#222';
|
||
g.beginPath(); g.ellipse(-5 - swing*4, -1, 6, 3, 0, 0, 7); g.fill();
|
||
g.beginPath(); g.ellipse(5 + swing*4, -1, 6, 3, 0, 0, 7); g.fill();
|
||
// 袜子条纹
|
||
g.fillStyle = '#fff'; g.fillRect(-6 - swing*4, -8, 4, 4); g.fillRect(3 + swing*4, -8, 4, 4);
|
||
g.fillStyle = '#d43b3b'; g.fillRect(-6 - swing*4, -8, 4, 1.5); g.fillRect(3 + swing*4, -8, 4, 1.5);
|
||
// 裤子
|
||
g.fillStyle = '#8a5a2b'; g.fillRect(-11, -18, 22, 5);
|
||
g.fillStyle = '#333'; g.fillRect(-11, -18, 22, 1.6);
|
||
// 衬衫 + 领带
|
||
g.fillStyle = '#fff'; g.fillRect(-9, -21, 18, 3.5);
|
||
g.fillStyle = '#d43b3b';
|
||
g.beginPath(); g.moveTo(0, -21); g.lineTo(-3, -16); g.lineTo(0, -12); g.lineTo(3, -16); g.closePath(); g.fill();
|
||
// 身体
|
||
g.fillStyle = '#f7d842'; rr(g, -12, -44, 24, 24, 4); g.fill();
|
||
g.strokeStyle = '#c9a91f'; g.lineWidth = 1.2; rr(g, -12, -44, 24, 24, 4); g.stroke();
|
||
// 海绵孔
|
||
g.fillStyle = '#e3c02c';
|
||
g.beginPath(); g.arc(-7, -40, 1.8, 0, 7); g.arc(6, -38, 1.5, 0, 7);
|
||
g.arc(-3, -27, 1.6, 0, 7); g.arc(8, -25, 1.4, 0, 7); g.fill();
|
||
// 手臂
|
||
g.strokeStyle = '#f7d842'; g.lineWidth = 2.6;
|
||
const armY = jumping ? -40 : -32 + swing*3;
|
||
g.beginPath();
|
||
g.moveTo(-12, -34); g.lineTo(-17, armY);
|
||
g.moveTo(12, -34); g.lineTo(17, armY);
|
||
g.stroke();
|
||
g.fillStyle = '#fff';
|
||
g.beginPath(); g.arc(-17, armY, 2.6, 0, 7); g.arc(17, armY, 2.6, 0, 7); g.fill();
|
||
// 眼睛
|
||
g.fillStyle = '#fff';
|
||
g.beginPath(); g.arc(-4.4, -36, 4.6, 0, 7); g.arc(4.4, -36, 4.6, 0, 7); g.fill();
|
||
g.strokeStyle = '#caa42a'; g.lineWidth = 0.8;
|
||
g.beginPath(); g.arc(-4.4, -36, 4.6, 0, 7); g.stroke(); g.beginPath(); g.arc(4.4, -36, 4.6, 0, 7); g.stroke();
|
||
g.fillStyle = '#5aa7e8';
|
||
g.beginPath(); g.arc(-3.6, -36, 2.1, 0, 7); g.arc(5.2, -36, 2.1, 0, 7); g.fill();
|
||
g.fillStyle = '#111';
|
||
g.beginPath(); g.arc(-3.2, -36, 1.1, 0, 7); g.arc(5.6, -36, 1.1, 0, 7); g.fill();
|
||
// 睫毛
|
||
g.strokeStyle = '#333'; g.lineWidth = 0.9;
|
||
g.beginPath();
|
||
g.moveTo(-6, -41); g.lineTo(-7, -43.5); g.moveTo(-4, -41.6); g.lineTo(-4, -44.2); g.moveTo(-2, -41); g.lineTo(-1, -43.5);
|
||
g.moveTo(2.8, -41); g.lineTo(3.8, -43.5); g.moveTo(4.8, -41.6); g.lineTo(4.8, -44.2); g.moveTo(6.8, -41); g.lineTo(7.8, -43.5);
|
||
g.stroke();
|
||
// 腮红雀斑
|
||
g.fillStyle = '#f0a35e';
|
||
g.beginPath(); g.arc(-7.5, -29, 2, 0, 7); g.arc(7.5, -29, 2, 0, 7); g.fill();
|
||
g.fillStyle = '#c98a3f';
|
||
g.beginPath(); g.arc(-8.5, -28, 0.5, 0, 7); g.arc(-6.5, -27.4, 0.5, 0, 7);
|
||
g.arc(8.5, -28, 0.5, 0, 7); g.arc(6.5, -27.4, 0.5, 0, 7); g.fill();
|
||
// 嘴和门牙
|
||
g.strokeStyle = '#7a4a12'; g.lineWidth = 1.1;
|
||
g.beginPath(); g.arc(0, -29, 5.5, 0.25*Math.PI, 0.75*Math.PI); g.stroke();
|
||
g.fillStyle = '#fff'; g.fillRect(-2.6, -25.4, 2.5, 3.4); g.fillRect(0.2, -25.4, 2.5, 3.4);
|
||
g.strokeStyle = '#c9a91f'; g.lineWidth = 0.5; g.strokeRect(-2.6, -25.4, 2.5, 3.4); g.strokeRect(0.2, -25.4, 2.5, 3.4);
|
||
g.restore();
|
||
}
|
||
|
||
function drawPlankton(g, e) {
|
||
const x = e.x - camX, y = e.y;
|
||
if (x < -60 || x > W+60) return;
|
||
g.save(); g.translate(x + e.w/2, y + e.h);
|
||
if (e.dead) g.scale(1, -0.5);
|
||
const sw = Math.sin((e.anim || 0) * 3);
|
||
// 腿
|
||
g.strokeStyle = '#3f8f2f'; g.lineWidth = 2;
|
||
g.beginPath();
|
||
g.moveTo(-3, -4); g.lineTo(-5 + sw*3, 0);
|
||
g.moveTo(3, -4); g.lineTo(5 - sw*3, 0);
|
||
g.stroke();
|
||
// 身体
|
||
g.fillStyle = '#57b04a';
|
||
g.beginPath(); g.ellipse(0, -13, 7, 10, 0, 0, 7); g.fill();
|
||
// 手臂
|
||
g.strokeStyle = '#57b04a'; g.lineWidth = 1.8;
|
||
g.beginPath();
|
||
g.moveTo(-6, -14); g.lineTo(-10, -10 + sw*2);
|
||
g.moveTo(6, -14); g.lineTo(10, -10 - sw*2);
|
||
g.stroke();
|
||
// 触角
|
||
g.beginPath(); g.moveTo(-2, -22); g.lineTo(-4, -27); g.moveTo(2, -22); g.lineTo(4, -27); g.stroke();
|
||
// 独眼
|
||
g.fillStyle = '#fff'; g.beginPath(); g.arc(0, -16, 5, 0, 7); g.fill();
|
||
g.fillStyle = '#d43b3b'; g.beginPath(); g.arc(0.8, -16, 2.4, 0, 7); g.fill();
|
||
g.fillStyle = '#111'; g.beginPath(); g.arc(1, -16, 1.1, 0, 7); g.fill();
|
||
// 怒眉
|
||
g.strokeStyle = '#2c5e22'; g.lineWidth = 1.6;
|
||
g.beginPath(); g.moveTo(-5, -21); g.lineTo(4, -19); g.stroke();
|
||
g.restore();
|
||
}
|
||
|
||
function drawJelly(g, e) {
|
||
const x = e.x - camX, y = e.y;
|
||
if (x < -60 || x > W+60) return;
|
||
g.save(); g.translate(x + e.w/2, y + 10);
|
||
if (e.dead) g.scale(1, -0.6);
|
||
const wob = Math.sin(now/150 + e.baseX);
|
||
// 触须
|
||
g.strokeStyle = 'rgba(255,140,190,0.8)'; g.lineWidth = 2;
|
||
for (let i = -2; i <= 2; i++) {
|
||
g.beginPath(); g.moveTo(i*5, 2);
|
||
g.quadraticCurveTo(i*5 + wob*3, 8, i*5 - wob*3, 14);
|
||
g.stroke();
|
||
}
|
||
// 伞盖
|
||
g.fillStyle = 'rgba(255,150,200,0.9)';
|
||
g.beginPath(); g.arc(0, 2, 13, Math.PI, 0); g.quadraticCurveTo(8, 6, 0, 4);
|
||
g.quadraticCurveTo(-8, 6, -13, 2); g.fill();
|
||
g.fillStyle = 'rgba(255,255,255,0.75)';
|
||
g.beginPath(); g.arc(-5, -5, 2.4, 0, 7); g.arc(4, -7, 1.8, 0, 7); g.fill();
|
||
// 眼睛
|
||
g.fillStyle = '#fff'; g.beginPath(); g.arc(-3.5, -1, 2.6, 0, 7); g.arc(3.5, -1, 2.6, 0, 7); g.fill();
|
||
g.fillStyle = '#111'; g.beginPath(); g.arc(-3.5, -1, 1.1, 0, 7); g.arc(3.5, -1, 1.1, 0, 7); g.fill();
|
||
g.restore();
|
||
}
|
||
|
||
function drawPatty(g, it) {
|
||
const x = it.x - camX, y = it.y;
|
||
if (x < -40 || x > W+40) return;
|
||
const bob = Math.sin(it.t/8) * 1.5;
|
||
g.save(); g.translate(x, y + bob);
|
||
g.fillStyle = '#e8b25f'; rr(g, 0, 8, 20, 6, 3); g.fill(); // 下面包
|
||
g.fillStyle = '#6b3a1e'; rr(g, -1, 4, 22, 5, 2); g.fill(); // 肉饼
|
||
g.fillStyle = '#69c04a'; g.fillRect(-1, 3, 22, 2); // 生菜
|
||
g.fillStyle = '#f0c477'; // 上面包
|
||
g.beginPath(); g.moveTo(0, 4); g.quadraticCurveTo(10, -5, 20, 4); g.closePath(); g.fill();
|
||
g.fillStyle = '#fff';
|
||
g.beginPath(); g.arc(6, 0.5, 0.9, 0, 7); g.arc(12, -0.5, 0.9, 0, 7); g.fill();
|
||
g.restore();
|
||
}
|
||
|
||
function drawHUD() {
|
||
const g = ctx;
|
||
g.save();
|
||
g.fillStyle = 'rgba(0,20,50,0.45)';
|
||
rr(g, 10, 8, W-20, 34, 8); g.fill();
|
||
g.fillStyle = '#fff'; g.font = 'bold 16px monospace'; g.textAlign = 'left';
|
||
g.fillText(String(score).padStart(6, '0'), 26, 31);
|
||
// 泡泡计数
|
||
g.strokeStyle = '#cfefff'; g.lineWidth = 2;
|
||
g.beginPath(); g.arc(140, 25, 7, 0, 7); g.stroke();
|
||
g.fillStyle = '#fff'; g.fillText('× ' + String(coins).padStart(2, '0'), 154, 31);
|
||
g.textAlign = 'center'; g.fillText('世界 1-1', W/2, 31);
|
||
g.textAlign = 'right';
|
||
g.fillText('TIME ' + String(Math.max(0, time)).padStart(3, '0'), W-150, 31);
|
||
// 生命:小海绵脸
|
||
for (let i = 0; i < Math.min(Math.max(0, lives), 5); i++) {
|
||
const lx = W - 118 + i*26;
|
||
g.fillStyle = '#f7d842'; rr(g, lx, 15, 18, 18, 3); g.fill();
|
||
g.fillStyle = '#fff';
|
||
g.beginPath(); g.arc(lx+6, 22, 3.4, 0, 7); g.arc(lx+12.6, 22, 3.4, 0, 7); g.fill();
|
||
g.fillStyle = '#111';
|
||
g.beginPath(); g.arc(lx+6.6, 22, 1.2, 0, 7); g.arc(lx+13.2, 22, 1.2, 0, 7); g.fill();
|
||
g.strokeStyle = '#7a4a12'; g.lineWidth = 1.2;
|
||
g.beginPath(); g.arc(lx+9, 26, 4, 0.2*Math.PI, 0.8*Math.PI); g.stroke();
|
||
}
|
||
g.restore();
|
||
}
|
||
|
||
function drawOverlay() {
|
||
const g = ctx;
|
||
if (state === 'play' && !paused) return;
|
||
g.save();
|
||
g.fillStyle = 'rgba(2,18,40,0.72)'; g.fillRect(0, 0, W, H);
|
||
g.textAlign = 'center';
|
||
const title = (txt, y, size, color) => {
|
||
g.font = 'bold ' + size + 'px "Microsoft YaHei",sans-serif';
|
||
g.lineWidth = 6; g.strokeStyle = '#3a2c00';
|
||
g.strokeText(txt, W/2, y);
|
||
g.fillStyle = color; g.fillText(txt, W/2, y);
|
||
};
|
||
const sub = (txt, y, color) => {
|
||
g.font = '18px "Microsoft YaHei",sans-serif';
|
||
g.fillStyle = color || '#dcefff'; g.fillText(txt, W/2, y);
|
||
};
|
||
if (state === 'start') {
|
||
title('海绵宝宝大冒险', 170, 56, '#f7d842');
|
||
title('比奇堡 1-1', 225, 34, '#8fd3ff');
|
||
sub('方向键 / WASD 移动 · 空格 / ↑ 跳跃 · Shift 加速跑', 300);
|
||
sub('踩扁痞老板和水母,顶问号块收集泡泡,找到蟹黄堡变大!', 332);
|
||
sub('P 暂停 · M 静音', 362, '#9fc4e8');
|
||
if (Math.floor(now/500) % 2) title('按 空格 / 回车 开始', 430, 26, '#fff');
|
||
} else if (state === 'over') {
|
||
title('游戏结束', 220, 54, '#ff7b6b');
|
||
sub('分数 ' + score + ' · 海绵宝宝需要你的帮助!', 280);
|
||
if (Math.floor(now/500) % 2) title('按 R / 空格 重新开始', 360, 26, '#fff');
|
||
} else if (state === 'win') {
|
||
if (winT > 150) {
|
||
title('过关啦!', 200, 54, '#f7d842');
|
||
sub('海绵宝宝成功抵达蟹堡王!', 260);
|
||
sub('剩余时间奖励已计入 · 总分 ' + score, 296);
|
||
if (Math.floor(now/500) % 2) title('按 R / 空格 再来一次', 380, 26, '#fff');
|
||
}
|
||
} else if (state === 'dying') {
|
||
title('哎呀!', 260, 44, '#ff9b6b');
|
||
} else if (paused) {
|
||
title('已暂停', 260, 44, '#fff');
|
||
sub('按 P 继续', 310);
|
||
}
|
||
g.restore();
|
||
}
|
||
|
||
/* ---------------- 渲染 ---------------- */
|
||
function render() {
|
||
const g = ctx;
|
||
drawBG();
|
||
drawKrustyKrab();
|
||
drawFlag();
|
||
|
||
const tx0 = Math.floor(camX / T), tx1 = Math.min(LW - 1, tx0 + Math.ceil(W / T) + 1);
|
||
for (let ty = 0; ty < LH; ty++)
|
||
for (let tx = tx0; tx <= tx1; tx++) {
|
||
const v = map[ty][tx];
|
||
if (v) drawTile(tx, ty, v);
|
||
}
|
||
|
||
for (const it of items) drawPatty(g, it);
|
||
for (const e of enemies) (e.type === 'p' ? drawPlankton : drawJelly)(g, e);
|
||
|
||
// 顶出的泡泡
|
||
for (const c of popcoins) {
|
||
const x = c.x - camX, y = c.y - c.t * 1.8;
|
||
g.strokeStyle = '#eaffff'; g.lineWidth = 2;
|
||
g.beginPath(); g.arc(x, y, 8 - c.t*0.15, 0, 7); g.stroke();
|
||
g.fillStyle = 'rgba(200,240,255,0.5)';
|
||
g.beginPath(); g.arc(x-2.5, y-2.5, 2.4, 0, 7); g.fill();
|
||
}
|
||
// 碎块
|
||
for (const p of parts) {
|
||
g.fillStyle = p.c; g.fillRect(p.x - camX, p.y, p.s, p.s);
|
||
}
|
||
// 玩家
|
||
if (state !== 'start')
|
||
drawBob(g, P.x - camX, P.y, P.w, P.h, P.dir, P.anim, P.big, P.inv > 0, !P.onGround, Math.abs(P.vx) > 2);
|
||
// 分数气泡
|
||
g.font = 'bold 14px monospace'; g.textAlign = 'center';
|
||
for (const u of popups) {
|
||
g.fillStyle = `rgba(255,255,255,${1 - u.t/50})`;
|
||
g.fillText(u.txt, u.x - camX, u.y - u.t * 0.8);
|
||
}
|
||
drawHUD();
|
||
drawOverlay();
|
||
}
|
||
|
||
/* ---------------- 主循环 ---------------- */
|
||
let last = 0, acc = 0;
|
||
const STEP = 1000 / 60;
|
||
function loop(t) {
|
||
requestAnimationFrame(loop);
|
||
const dt = Math.min(100, t - last); last = t;
|
||
acc += dt;
|
||
while (acc >= STEP) {
|
||
if (!paused) update();
|
||
Object.keys(pressed).forEach(k => pressed[k] = false);
|
||
acc -= STEP; now += STEP;
|
||
}
|
||
render();
|
||
}
|
||
resetLevel(true);
|
||
requestAnimationFrame(loop);
|
||
</script>
|
||
</body>
|
||
</html>
|