Files
whoami/homepage/spongebob-1-1.html
T

860 lines
35 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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>