feat: 主页改版(深色主视觉+极光背景+动效), 新增海绵宝宝大冒险游戏与娱乐面板
This commit is contained in:
ylhan
+425
-99
@@ -5,46 +5,61 @@
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https: data:; script-src 'self' 'unsafe-inline'; connect-src https:; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https: *;">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236366f1'/%3E%3Cstop offset='1' stop-color='%2322d3ee'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3C/svg%3E">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="theme-color" content="#05070f">
|
||||
<title>hyonglin.top</title>
|
||||
<style>
|
||||
/* ===== 主题变量（默认浅色，深色自适应） ===== */
|
||||
/* ===== 主题：默认深色（主视觉），可切换浅色并记住 ===== */
|
||||
:root {
|
||||
--bg: #f2f5fb;
|
||||
--text: #141b2e;
|
||||
--bg: #05070f;
|
||||
--bg-2: #0a0f1f;
|
||||
--text: #f0f4ff;
|
||||
--muted: #93a0c0;
|
||||
--card: rgba(148,163,216,.07);
|
||||
--card-2: rgba(148,163,216,.025);
|
||||
--border: rgba(148,180,255,.13);
|
||||
--inset: rgba(8,12,24,.55);
|
||||
--inner: inset 0 1px 0 rgba(255,255,255,.07);
|
||||
--shadow: 0 1px 2px rgba(0,0,0,.5), 0 12px 34px rgba(0,0,0,.45);
|
||||
--shadow-hover: 0 2px 6px rgba(0,0,0,.55), 0 22px 52px rgba(0,0,0,.6);
|
||||
--grad: linear-gradient(120deg, #818cf8, #38bdf8 55%, #22d3ee);
|
||||
--line: rgba(148,180,255,.07);
|
||||
--noise-op: .06;
|
||||
--aurora-op: .5;
|
||||
--sky-a: rgba(59,130,246,.38); --sky-b: rgba(34,211,238,.16);
|
||||
--orb-op: .5;
|
||||
--ga: rgba(99,102,241,.30);
|
||||
--gb: rgba(34,211,238,.22);
|
||||
--spot: rgba(129,140,248,.14);
|
||||
}
|
||||
:root[data-theme="light"] {
|
||||
--bg: #eef2fa;
|
||||
--bg-2: #e4eaf6;
|
||||
--text: #101728;
|
||||
--muted: #5c6a84;
|
||||
--card: rgba(255,255,255,.66);
|
||||
--border: rgba(15,30,70,.08);
|
||||
--inset: rgba(255,255,255,.9);
|
||||
--shadow: 0 10px 30px rgba(30,50,100,.08);
|
||||
--shadow-hover: 0 16px 40px rgba(30,50,100,.14);
|
||||
--card: rgba(255,255,255,.62);
|
||||
--card-2: rgba(255,255,255,.4);
|
||||
--border: rgba(15,30,70,.09);
|
||||
--inset: rgba(255,255,255,.85);
|
||||
--inner: inset 0 1px 0 rgba(255,255,255,.65);
|
||||
--shadow: 0 1px 2px rgba(30,50,100,.05), 0 10px 30px rgba(30,50,100,.08);
|
||||
--shadow-hover: 0 2px 4px rgba(30,50,100,.06), 0 18px 44px rgba(30,50,100,.16);
|
||||
--grad: linear-gradient(120deg, #6366f1, #0ea5e9 55%, #22d3ee);
|
||||
--line: rgba(20,40,90,.055);
|
||||
--noise-op: .035;
|
||||
--aurora-op: .28;
|
||||
--sky-a: #dbeafe; --sky-b: #cffafe;
|
||||
--orb-op: .5;
|
||||
--ga: rgba(99,102,241,.17);
|
||||
--gb: rgba(34,211,238,.15);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #0a0f1e;
|
||||
--text: #eef2ff;
|
||||
--muted: #8b97b3;
|
||||
--card: rgba(255,255,255,.055);
|
||||
--border: rgba(255,255,255,.09);
|
||||
--inset: rgba(10,15,30,.45);
|
||||
--shadow: 0 10px 30px rgba(0,0,0,.35);
|
||||
--shadow-hover: 0 16px 42px rgba(0,0,0,.5);
|
||||
--sky-a: rgba(59,130,246,.28); --sky-b: rgba(34,211,238,.16);
|
||||
--orb-op: .38;
|
||||
--ga: rgba(129,140,248,.22);
|
||||
--gb: rgba(34,211,238,.20);
|
||||
}
|
||||
--ga: rgba(99,102,241,.16);
|
||||
--gb: rgba(34,211,238,.14);
|
||||
--spot: rgba(99,102,241,.10);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { height: 100%; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: var(--bg);
|
||||
background: linear-gradient(180deg, var(--bg), var(--bg-2) 55%, var(--bg));
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -52,54 +67,183 @@
|
||||
}
|
||||
::selection { background: #6366f1; color: #fff; }
|
||||
|
||||
/* ===== 背景光斑（JS 驱动：缓慢漂移 + 鼠标视差）与跟随光晕 ===== */
|
||||
/* ===== 背景分层：极光 + 网格 + 噪点 + 光斑 + 跟随光晕 ===== */
|
||||
.aurora {
|
||||
position: fixed; inset: -25%; z-index: 0; pointer-events: none;
|
||||
opacity: var(--aurora-op); filter: blur(110px); will-change: transform;
|
||||
background: conic-gradient(from 210deg at 50% 38%,
|
||||
rgba(99,102,241,.42), rgba(34,211,238,.30), rgba(217,70,239,.30),
|
||||
rgba(56,189,248,.34), rgba(99,102,241,.42));
|
||||
-webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 26%, #000 18%, transparent 68%);
|
||||
mask-image: radial-gradient(ellipse 62% 52% at 50% 26%, #000 18%, transparent 68%);
|
||||
animation: spin 70s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(1turn); } }
|
||||
.bg-grid {
|
||||
position: fixed; inset: 0; z-index: 0; pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(var(--line) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--line) 1px, transparent 1px);
|
||||
background-size: 46px 46px;
|
||||
-webkit-mask-image: radial-gradient(ellipse 100% 78% at 50% 8%, #000 25%, transparent 72%);
|
||||
mask-image: radial-gradient(ellipse 100% 78% at 50% 8%, #000 25%, transparent 72%);
|
||||
}
|
||||
.bg-noise {
|
||||
position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--noise-op);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
}
|
||||
.orb { position: fixed; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; opacity: var(--orb-op); will-change: transform; }
|
||||
.orb1 { width: 480px; height: 480px; top: -160px; left: -120px; background: #a5b4fc; }
|
||||
.orb2 { width: 420px; height: 420px; bottom: -140px; right: -100px; background: #67e8f9; }
|
||||
.orb3 { width: 360px; height: 360px; top: 32%; right: -150px; background: #f5d0fe; opacity: calc(var(--orb-op) * .8); }
|
||||
.orb1 { width: 520px; height: 520px; top: -180px; left: -130px; background: #6366f1; }
|
||||
.orb2 { width: 460px; height: 460px; bottom: -150px; right: -110px; background: #22d3ee; }
|
||||
.orb3 { width: 380px; height: 380px; top: 32%; right: -160px; background: #d946ef; opacity: calc(var(--orb-op) * .7); }
|
||||
.glow { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 50%; will-change: transform; opacity: 0; }
|
||||
.glow-a { width: 560px; height: 560px; background: radial-gradient(circle, var(--ga), transparent 65%); }
|
||||
.glow-b { width: 420px; height: 420px; background: radial-gradient(circle, var(--gb), transparent 65%); }
|
||||
|
||||
.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 36px 20px 44px; }
|
||||
/* ===== 顶栏 ===== */
|
||||
header.topbar {
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
max-width: 1080px; margin: 0 auto; padding: 14px 20px;
|
||||
}
|
||||
header.topbar::before {
|
||||
content: ''; position: absolute; inset: 0; z-index: -1;
|
||||
background: color-mix(in srgb, var(--bg) 72%, transparent);
|
||||
backdrop-filter: blur(14px) saturate(1.3);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(1.3);
|
||||
border-bottom: 1px solid var(--border);
|
||||
opacity: 0; transition: opacity .25s ease;
|
||||
}
|
||||
header.topbar.stuck::before { opacity: 1; }
|
||||
.brand {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
font-weight: 800; font-size: 1rem; letter-spacing: -.01em;
|
||||
color: var(--text); text-decoration: none;
|
||||
}
|
||||
.brand .logo {
|
||||
width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
|
||||
background: var(--grad);
|
||||
box-shadow: 0 4px 18px rgba(99,102,241,.5);
|
||||
transition: transform .3s cubic-bezier(.3,.7,.3,1.4);
|
||||
}
|
||||
.brand:hover .logo { transform: rotate(-8deg) scale(1.08); }
|
||||
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
|
||||
.chip {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
font-size: .74rem; color: var(--muted);
|
||||
border: 1px solid var(--border); background: var(--inset);
|
||||
padding: 6px 12px; border-radius: 999px;
|
||||
}
|
||||
.dot {
|
||||
width: 7px; height: 7px; border-radius: 50%; background: #34d399; flex-shrink: 0;
|
||||
box-shadow: 0 0 0 0 rgba(52,211,153,.6), 0 0 8px rgba(52,211,153,.8);
|
||||
animation: pulse 2.6s ease-out infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(52,211,153,.6), 0 0 8px rgba(52,211,153,.8); }
|
||||
70% { box-shadow: 0 0 0 8px rgba(52,211,153,0), 0 0 8px rgba(52,211,153,.8); }
|
||||
100% { box-shadow: 0 0 0 0 rgba(52,211,153,0), 0 0 8px rgba(52,211,153,.8); }
|
||||
}
|
||||
.tbtn {
|
||||
width: 36px; height: 36px; border-radius: 11px; cursor: pointer;
|
||||
border: 1px solid var(--border); background: var(--inset);
|
||||
font-size: 1rem; line-height: 1; color: var(--text);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
.tbtn:hover { transform: translateY(-1px); border-color: #818cf8; box-shadow: 0 6px 20px rgba(99,102,241,.3); }
|
||||
.tbtn:active { transform: scale(.94); }
|
||||
|
||||
.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 18px 20px 44px; }
|
||||
|
||||
/* ===== Bento 网格 ===== */
|
||||
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
background: linear-gradient(180deg, var(--card), var(--card-2));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
padding: 20px 22px;
|
||||
border-radius: 24px;
|
||||
padding: 22px 24px;
|
||||
backdrop-filter: blur(16px) saturate(1.3);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(1.3);
|
||||
box-shadow: var(--shadow);
|
||||
box-shadow: var(--inner), var(--shadow);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: rise .6s cubic-bezier(.2,.7,.3,1) both;
|
||||
animation-delay: var(--d, 0s);
|
||||
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
|
||||
}
|
||||
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
|
||||
/* 滚动进入：模糊浮现（IntersectionObserver 触发） */
|
||||
.card:not(.in) { opacity: 0; }
|
||||
.card.in { animation: rise .7s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: var(--d, 0s); }
|
||||
@keyframes rise {
|
||||
from { opacity: 0; transform: translateY(26px) scale(.965); filter: blur(10px); }
|
||||
to { opacity: 1; transform: none; filter: blur(0); }
|
||||
}
|
||||
/* 跟随光标的卡内聚光 */
|
||||
.card::before {
|
||||
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
|
||||
background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 62%);
|
||||
opacity: 0; transition: opacity .3s ease;
|
||||
}
|
||||
.card:hover::before { opacity: 1; }
|
||||
/* 悬停渐变发光描边 */
|
||||
.card::after {
|
||||
content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--ac, #818cf8) 75%, transparent), transparent 38%,
|
||||
transparent 62%, color-mix(in srgb, var(--ac, #22d3ee) 55%, transparent));
|
||||
-webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
|
||||
-webkit-mask-composite: xor; mask-composite: exclude;
|
||||
opacity: 0; transition: opacity .3s ease;
|
||||
}
|
||||
.card:hover::after { opacity: 1; }
|
||||
.card:not(.hero):hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--inner), var(--shadow-hover), 0 0 44px -14px color-mix(in srgb, var(--ac, #818cf8) 45%, transparent);
|
||||
}
|
||||
.card > * { position: relative; z-index: 2; }
|
||||
|
||||
/* ===== Hero：标题 + 搜索 ===== */
|
||||
.hero { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
|
||||
.hero h1 {
|
||||
font-size: clamp(2.2rem, 5vw, 3.3rem);
|
||||
font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
|
||||
background: var(--grad);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
/* ===== Hero：问候 + 标题 + 搜索（3D 倾斜） ===== */
|
||||
.hero {
|
||||
grid-column: span 4; grid-row: span 2;
|
||||
display: flex; flex-direction: column; justify-content: center;
|
||||
background:
|
||||
radial-gradient(460px 320px at 88% -12%, color-mix(in srgb, #818cf8 20%, transparent), transparent 62%),
|
||||
linear-gradient(180deg, var(--card), var(--card-2));
|
||||
transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
|
||||
will-change: transform;
|
||||
}
|
||||
.hero p.sub { color: var(--muted); margin-top: 10px; font-size: .98rem; }
|
||||
.eyebrow {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
|
||||
color: var(--muted); margin-bottom: 14px;
|
||||
}
|
||||
.eyebrow::before { content: ''; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); box-shadow: 0 0 10px rgba(99,102,241,.8); }
|
||||
.hero h1 {
|
||||
font-size: clamp(2.8rem, 6.6vw, 4.4rem);
|
||||
font-weight: 800; letter-spacing: -.04em; line-height: 1.02;
|
||||
background: var(--grad); background-size: 220% 100%;
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
filter: drop-shadow(0 0 26px rgba(99,102,241,.35));
|
||||
animation: grademove 9s ease-in-out infinite alternate;
|
||||
}
|
||||
@keyframes grademove { to { background-position: 100% 0; } }
|
||||
.hero p.sub { color: var(--muted); margin-top: 14px; font-size: 1.02rem; }
|
||||
.hero p.sub strong { color: var(--text); font-weight: 650; }
|
||||
|
||||
form.search {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-top: 26px; padding: 6px 6px 6px 16px;
|
||||
margin-top: 28px; padding: 6px 6px 6px 16px;
|
||||
background: var(--inset);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
transition: border-color .16s ease, box-shadow .16s ease;
|
||||
transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
|
||||
}
|
||||
form.search:focus-within {
|
||||
border-color: #818cf8;
|
||||
box-shadow: 0 0 0 3px rgba(99,102,241,.22), 0 12px 36px rgba(99,102,241,.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
form.search:focus-within { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
|
||||
form.search .sicon { font-size: 1rem; opacity: .8; flex-shrink: 0; }
|
||||
form.search select {
|
||||
flex-shrink: 0; cursor: pointer;
|
||||
@@ -108,31 +252,47 @@
|
||||
padding: 7px 10px; outline: none; max-width: 118px;
|
||||
}
|
||||
form.search select:focus-visible { border-color: #818cf8; color: var(--text); }
|
||||
form.search select option { color: #101728; }
|
||||
form.search input {
|
||||
flex: 1; min-width: 0; background: none; border: none; outline: none;
|
||||
color: var(--text); font-size: .95rem; padding: 9px 0;
|
||||
}
|
||||
form.search input::placeholder { color: var(--muted); }
|
||||
form.search kbd {
|
||||
flex-shrink: 0; font-family: inherit; font-size: .72rem; color: var(--muted);
|
||||
border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px;
|
||||
padding: 2px 7px; background: var(--card);
|
||||
}
|
||||
form.search button {
|
||||
border: none; cursor: pointer; flex-shrink: 0;
|
||||
padding: 10px 24px; border-radius: 999px;
|
||||
padding: 10px 26px; border-radius: 999px;
|
||||
font-size: .9rem; font-weight: 600; color: #fff;
|
||||
background: var(--grad);
|
||||
transition: transform .14s ease, filter .14s ease;
|
||||
background: var(--grad); background-size: 180% 100%;
|
||||
box-shadow: 0 6px 22px rgba(99,102,241,.45);
|
||||
transition: transform .14s ease, filter .14s ease, box-shadow .2s ease, background-position .4s ease;
|
||||
}
|
||||
form.search button:hover { transform: scale(1.03); filter: brightness(1.08); }
|
||||
form.search button:hover { transform: scale(1.05); filter: brightness(1.12); background-position: 100% 0; box-shadow: 0 8px 30px rgba(56,189,248,.5); }
|
||||
form.search button:active { transform: scale(.97); }
|
||||
|
||||
/* ===== 天气卡 ===== */
|
||||
.sky { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: linear-gradient(165deg, var(--sky-a), var(--sky-b)); }
|
||||
.card .label { font-size: .72rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
|
||||
.sky .emoji { font-size: 3.2rem; line-height: 1; }
|
||||
.sky .temp { font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
|
||||
.sky {
|
||||
grid-column: span 2; grid-row: span 2;
|
||||
display: flex; flex-direction: column; justify-content: center; gap: 6px;
|
||||
background: linear-gradient(165deg, var(--sky-a), var(--sky-b));
|
||||
--ac: #38bdf8;
|
||||
}
|
||||
.card .label { font-size: .72rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
|
||||
.sky .emoji { font-size: 3.6rem; line-height: 1; animation: floaty 4.5s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(251,191,36,.35)); }
|
||||
@keyframes floaty { 50% { transform: translateY(-8px); } }
|
||||
.sky .temp { font-size: clamp(2.4rem, 4.6vw, 3.1rem); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
|
||||
.wcity { font-size: .8rem; color: var(--muted); min-height: 1.2em; }
|
||||
|
||||
/* ===== 日期 / 时间卡 ===== */
|
||||
.clockcard, .datecard { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; }
|
||||
.clockcard .value { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.15; }
|
||||
.datecard .value { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.15; }
|
||||
.clockcard .value { font-size: clamp(2.1rem, 4.6vw, 2.9rem); font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.15; }
|
||||
.clockcard .value .sec { font-size: .55em; color: var(--muted); font-weight: 600; }
|
||||
.datecard .value { font-size: clamp(1.35rem, 2.5vw, 1.8rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.15; }
|
||||
.datecard .value .wk { color: var(--muted); font-weight: 600; }
|
||||
|
||||
/* ===== 服务分组面板 ===== */
|
||||
.panel { grid-column: span 3; }
|
||||
@@ -147,68 +307,115 @@
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
text-decoration: none; color: var(--text);
|
||||
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
|
||||
position: relative;
|
||||
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
|
||||
}
|
||||
ul.tiles a:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: color-mix(in srgb, var(--ac) 55%, transparent);
|
||||
box-shadow: 0 8px 24px color-mix(in srgb, var(--ac) 22%, transparent);
|
||||
border-color: color-mix(in srgb, var(--ac) 60%, transparent);
|
||||
background: color-mix(in srgb, var(--ac) 8%, var(--inset));
|
||||
box-shadow: 0 8px 26px color-mix(in srgb, var(--ac) 30%, transparent);
|
||||
}
|
||||
ul.tiles a:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
|
||||
ul.tiles a .go {
|
||||
margin-left: auto; flex-shrink: 0;
|
||||
font-size: .85rem; color: var(--ac);
|
||||
opacity: 0; transform: translate(-5px, 5px);
|
||||
transition: opacity .18s ease, transform .18s ease;
|
||||
}
|
||||
ul.tiles a:hover .go { opacity: 1; transform: none; }
|
||||
ul.tiles .icon {
|
||||
font-size: 1.1rem; width: 36px; height: 36px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border-radius: 11px;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 32%, transparent), color-mix(in srgb, var(--ac) 10%, transparent));
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 38%, transparent), color-mix(in srgb, var(--ac) 12%, transparent));
|
||||
box-shadow: 0 0 0 0 color-mix(in srgb, var(--ac) 40%, transparent);
|
||||
transition: transform .25s cubic-bezier(.3,.7,.3,1.5), box-shadow .25s ease;
|
||||
}
|
||||
ul.tiles a:hover .icon { transform: scale(1.12) rotate(-6deg); box-shadow: 0 0 16px 0 color-mix(in srgb, var(--ac) 45%, transparent); }
|
||||
ul.tiles .meta { display: flex; flex-direction: column; min-width: 0; }
|
||||
ul.tiles .name { font-weight: 650; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
ul.tiles .desc { color: var(--muted); font-size: .72rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
/* 分组配色 */
|
||||
.s-self { --ac: #10b981; }
|
||||
.s-ai { --ac: #8b5cf6; }
|
||||
.s-cloud { --ac: #3b82f6; }
|
||||
.s-util { --ac: #f59e0b; }
|
||||
.s-self { --ac: #34d399; }
|
||||
.s-ai { --ac: #a78bfa; }
|
||||
.s-cloud { --ac: #60a5fa; }
|
||||
.s-util { --ac: #fbbf24; }
|
||||
.s-game { --ac: #f472b6; grid-column: span 6; }
|
||||
ul.tiles li.wide { grid-column: 1 / -1; }
|
||||
|
||||
/* ===== 页脚 ===== */
|
||||
footer.card { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px 0; }
|
||||
footer.card { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 14px 0 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
|
||||
footer.card:hover { transform: none; box-shadow: none; }
|
||||
footer.card::before, footer.card::after { display: none; }
|
||||
footer { grid-column: span 6; text-align: center; color: var(--muted); font-size: .8rem; }
|
||||
footer a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); margin-left: 6px; }
|
||||
footer a:hover { color: #6366f1; border-color: #6366f1; }
|
||||
.switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
|
||||
.switch a {
|
||||
color: var(--muted); text-decoration: none; font-size: .78rem;
|
||||
padding: 6px 14px; border-radius: 999px;
|
||||
border: 1px solid var(--border); background: var(--inset);
|
||||
transition: transform .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
.switch a:hover { color: var(--text); border-color: #818cf8; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(99,102,241,.25); }
|
||||
.switch a[aria-current="page"] {
|
||||
color: #fff; border-color: transparent; background: var(--grad);
|
||||
box-shadow: 0 6px 20px rgba(99,102,241,.45);
|
||||
}
|
||||
|
||||
/* ===== 响应式 ===== */
|
||||
@media (max-width: 880px) {
|
||||
.grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.hero { grid-column: span 2; grid-row: auto; }
|
||||
.hero { grid-column: span 2; grid-row: auto; transform: none !important; }
|
||||
.sky { grid-column: span 2; grid-row: auto; flex-direction: row; align-items: center; gap: 18px; }
|
||||
.sky .emoji { font-size: 2.6rem; }
|
||||
.panel { grid-column: span 2; }
|
||||
.chip { display: none; }
|
||||
}
|
||||
@media (max-width: 540px) {
|
||||
.grid { grid-template-columns: 1fr; gap: 12px; }
|
||||
.clockcard, .datecard, footer { grid-column: auto; }
|
||||
.wrap { padding: 22px 14px 32px; }
|
||||
.wrap { padding: 12px 14px 32px; }
|
||||
header.topbar { padding: 12px 14px; }
|
||||
form.search kbd { display: none; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card { animation: none; }
|
||||
ul.tiles a, form.search button { transition: none; }
|
||||
html { scroll-behavior: auto; }
|
||||
.card:not(.in) { opacity: 1; }
|
||||
.card.in { animation: none; }
|
||||
.hero h1, .sky .emoji, .dot, .aurora { animation: none; }
|
||||
.hero { transform: none !important; }
|
||||
.card, ul.tiles a, ul.tiles .icon, form.search, form.search button, .switch a, .tbtn, .brand .logo { transition: none; }
|
||||
}
|
||||
</style>
|
||||
<noscript><style>.card { opacity: 1 !important; } .topbar::before { opacity: 1; }</style></noscript>
|
||||
</head>
|
||||
<body>
|
||||
<div class="aurora"></div>
|
||||
<div class="bg-grid"></div>
|
||||
<div class="bg-noise"></div>
|
||||
<div class="orb orb1" id="orb1"></div>
|
||||
<div class="orb orb2" id="orb2"></div>
|
||||
<div class="orb orb3" id="orb3"></div>
|
||||
<div class="glow glow-a" id="glowa"></div>
|
||||
<div class="glow glow-b" id="glowb"></div>
|
||||
|
||||
<header class="topbar" id="topbar">
|
||||
<a class="brand" href="/"><span class="logo"></span>hyonglin.top</a>
|
||||
<div class="top-right">
|
||||
<span class="chip"><span class="dot"></span>服务运行中</span>
|
||||
<button id="themeBtn" class="tbtn" type="button">☀️</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="wrap">
|
||||
<div class="grid">
|
||||
<!-- Hero：标题 + Bing 搜索 -->
|
||||
<!-- Hero：问候 + 标题 + 搜索 -->
|
||||
<section class="card hero" style="--d:.05s">
|
||||
<span class="eyebrow" id="greet">个人主页</span>
|
||||
<h1>hyonglin.top</h1>
|
||||
<p class="sub">个人服务导航 · 随时可达</p>
|
||||
<p class="sub">个人服务导航 · <strong>随时可达</strong>，按 <kbd style="font-family:inherit;font-size:.8em;border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 6px;">/</kbd> 快速搜索</p>
|
||||
<form class="search" action="https://www.bing.com/search" method="get" target="_blank" rel="noopener">
|
||||
<span class="sicon">🔍</span>
|
||||
<select name="engine" id="engine" aria-label="搜索引擎">
|
||||
@@ -218,6 +425,7 @@
|
||||
<option value="duckduckgo">DuckDuckGo</option>
|
||||
</select>
|
||||
<input type="text" name="q" placeholder="输入关键词，回车搜索…" autocomplete="off" aria-label="搜索">
|
||||
<kbd>/</kbd>
|
||||
<button type="submit">搜索</button>
|
||||
</form>
|
||||
</section>
|
||||
@@ -232,7 +440,7 @@
|
||||
|
||||
<!-- 时间 / 日期 -->
|
||||
<section class="card clockcard" style="--d:.2s">
|
||||
<div class="label">时间</div>
|
||||
<div class="label">时间 · 本地</div>
|
||||
<div class="value" id="clockval">--:--:--</div>
|
||||
</section>
|
||||
<section class="card datecard" style="--d:.26s">
|
||||
@@ -241,51 +449,145 @@
|
||||
</section>
|
||||
|
||||
<!-- 自建服务 -->
|
||||
<section class="card panel s-self" style="--d:.34s">
|
||||
<section class="card panel s-self" style="--d:.3s">
|
||||
<h2>📡 自建服务<span class="count">5</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://note.hyonglin.top"><span class="icon">📝</span><span class="meta"><span class="name">笔记</span><span class="desc">note.hyonglin.top · SilverBullet</span></span></a></li>
|
||||
<li><a href="https://git.hyonglin.top"><span class="icon">📦</span><span class="meta"><span class="name">Git 服务</span><span class="desc">git.hyonglin.top · Gitea</span></span></a></li>
|
||||
<li><a href="https://ssh.hyonglin.top"><span class="icon">🖥️</span><span class="meta"><span class="name">网页 SSH 终端</span><span class="desc">ssh.hyonglin.top</span></span></a></li>
|
||||
<li><a href="https://frp.hyonglin.top"><span class="icon">🔗</span><span class="meta"><span class="name">frp 管理面板</span><span class="desc">frp.hyonglin.top</span></span></a></li>
|
||||
<li><a href="/xinquandashboard"><span class="icon">🖼️</span><span class="meta"><span class="name">Xinquan Dashboard</span><span class="desc">hyonglin.top/xinquandashboard</span></span></a></li>
|
||||
<li><a href="https://note.hyonglin.top"><span class="icon">📝</span><span class="meta"><span class="name">笔记</span><span class="desc">note.hyonglin.top · SilverBullet</span></span><span class="go">↗</span></a></li>
|
||||
<li><a href="https://git.hyonglin.top"><span class="icon">📦</span><span class="meta"><span class="name">Git 服务</span><span class="desc">git.hyonglin.top · Gitea</span></span><span class="go">↗</span></a></li>
|
||||
<li><a href="https://ssh.hyonglin.top"><span class="icon">🖥️</span><span class="meta"><span class="name">网页 SSH 终端</span><span class="desc">ssh.hyonglin.top</span></span><span class="go">↗</span></a></li>
|
||||
<li><a href="https://frp.hyonglin.top"><span class="icon">🔗</span><span class="meta"><span class="name">frp 管理面板</span><span class="desc">frp.hyonglin.top</span></span><span class="go">↗</span></a></li>
|
||||
<li><a href="/xinquandashboard"><span class="icon">🖼️</span><span class="meta"><span class="name">Xinquan Dashboard</span><span class="desc">hyonglin.top/xinquandashboard</span></span><span class="go">↗</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- AI 助手 -->
|
||||
<section class="card panel s-ai" style="--d:.4s">
|
||||
<section class="card panel s-ai" style="--d:.36s">
|
||||
<h2>🤖 AI 助手<span class="count">2</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://chat.deepseek.com/" target="_blank" rel="noopener"><span class="icon">🤖</span><span class="meta"><span class="name">DeepSeek</span><span class="desc">chat.deepseek.com</span></span></a></li>
|
||||
<li><a href="https://www.doubao.com/chat/" target="_blank" rel="noopener"><span class="icon">💬</span><span class="meta"><span class="name">豆包</span><span class="desc">doubao.com</span></span></a></li>
|
||||
<li><a href="https://chat.deepseek.com/" target="_blank" rel="noopener"><span class="icon">🤖</span><span class="meta"><span class="name">DeepSeek</span><span class="desc">chat.deepseek.com</span></span><span class="go">↗</span></a></li>
|
||||
<li><a href="https://www.doubao.com/chat/" target="_blank" rel="noopener"><span class="icon">💬</span><span class="meta"><span class="name">豆包</span><span class="desc">doubao.com</span></span><span class="go">↗</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 云服务 -->
|
||||
<section class="card panel s-cloud" style="--d:.46s">
|
||||
<section class="card panel s-cloud" style="--d:.42s">
|
||||
<h2>☁️ 云服务<span class="count">3</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener"><span class="icon">🌐</span><span class="meta"><span class="name">Cloudflare</span><span class="desc">dash.cloudflare.com</span></span></a></li>
|
||||
<li><a href="https://auth.huaweicloud.com/" target="_blank" rel="noopener"><span class="icon">☁️</span><span class="meta"><span class="name">华为云</span><span class="desc">auth.huaweicloud.com</span></span></a></li>
|
||||
<li><a href="https://console.cloud.tencent.com/" target="_blank" rel="noopener"><span class="icon">🐧</span><span class="meta"><span class="name">腾讯云</span><span class="desc">console.cloud.tencent.com</span></span></a></li>
|
||||
<li><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener"><span class="icon">🌐</span><span class="meta"><span class="name">Cloudflare</span><span class="desc">dash.cloudflare.com</span></span><span class="go">↗</span></a></li>
|
||||
<li><a href="https://auth.huaweicloud.com/" target="_blank" rel="noopener"><span class="icon">☁️</span><span class="meta"><span class="name">华为云</span><span class="desc">auth.huaweicloud.com</span></span><span class="go">↗</span></a></li>
|
||||
<li><a href="https://console.cloud.tencent.com/" target="_blank" rel="noopener"><span class="icon">🐧</span><span class="meta"><span class="name">腾讯云</span><span class="desc">console.cloud.tencent.com</span></span><span class="go">↗</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 常用 -->
|
||||
<section class="card panel s-util" style="--d:.52s">
|
||||
<section class="card panel s-util" style="--d:.48s">
|
||||
<h2>🔧 常用<span class="count">3</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://wx.mail.qq.com/" target="_blank" rel="noopener"><span class="icon">📧</span><span class="meta"><span class="name">QQ 邮箱</span><span class="desc">wx.mail.qq.com</span></span></a></li>
|
||||
<li><a href="https://www.bing.com/" target="_blank" rel="noopener"><span class="icon">🔍</span><span class="meta"><span class="name">Bing 搜索</span><span class="desc">bing.com</span></span></a></li>
|
||||
<li><a href="https://www.bilibili.com/" target="_blank" rel="noopener"><span class="icon">📺</span><span class="meta"><span class="name">哔哩哔哩</span><span class="desc">bilibili.com</span></span></a></li>
|
||||
<li><a href="https://wx.mail.qq.com/" target="_blank" rel="noopener"><span class="icon">📧</span><span class="meta"><span class="name">QQ 邮箱</span><span class="desc">wx.mail.qq.com</span></span><span class="go">↗</span></a></li>
|
||||
<li><a href="https://www.bing.com/" target="_blank" rel="noopener"><span class="icon">🔍</span><span class="meta"><span class="name">Bing 搜索</span><span class="desc">bing.com</span></span><span class="go">↗</span></a></li>
|
||||
<li><a href="https://www.bilibili.com/" target="_blank" rel="noopener"><span class="icon">📺</span><span class="meta"><span class="name">哔哩哔哩</span><span class="desc">bilibili.com</span></span><span class="go">↗</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer style="--d:.58s" class="card"><span><a href="/terminal/">终端版</a> · <a href="/" aria-current="page">Bento</a> · <a href="/brutal/">Brutal</a> · <a href="/swiss/">Swiss</a> · <a href="/hud/">HUD</a></span>hyonglin.top</footer>
|
||||
<!-- 娱乐 -->
|
||||
<section class="card panel s-game" style="--d:.54s">
|
||||
<h2>🎮 娱乐<span class="count">1</span></h2>
|
||||
<ul class="tiles">
|
||||
<li class="wide"><a href="/spongebob-1-1.html"><span class="icon">🍍</span><span class="meta"><span class="name">海绵宝宝大冒险 · 比奇堡 1-1</span><span class="desc">横版闯关小游戏 · 方向键移动，空格跳跃，Shift 加速，P 暂停，R 重开</span></span><span class="go">↗</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer style="--d:.6s" class="card">
|
||||
<nav class="switch">
|
||||
<a href="/terminal/">终端版</a>
|
||||
<a href="/" aria-current="page">Bento</a>
|
||||
<a href="/brutal/">Brutal</a>
|
||||
<a href="/swiss/">Swiss</a>
|
||||
<a href="/hud/">HUD</a>
|
||||
</nav>
|
||||
<span>© <span id="year">2025</span> hyonglin.top</span>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* ===== 主题切换：默认深色，点 ☀️/🌙 切换并记住 ===== */
|
||||
(function(){
|
||||
var root = document.documentElement;
|
||||
var btn = document.getElementById('themeBtn');
|
||||
if (!btn) return;
|
||||
var saved = null;
|
||||
try { saved = localStorage.getItem('theme'); } catch (e) {}
|
||||
if (saved === 'dark' || saved === 'light') root.setAttribute('data-theme', saved);
|
||||
function isDark() { return root.getAttribute('data-theme') !== 'light'; }
|
||||
function label() {
|
||||
btn.textContent = isDark() ? '☀️' : '🌙';
|
||||
btn.setAttribute('aria-label', isDark() ? '切换到浅色模式' : '切换到深色模式');
|
||||
}
|
||||
btn.addEventListener('click', function(){
|
||||
var next = isDark() ? 'light' : 'dark';
|
||||
root.setAttribute('data-theme', next);
|
||||
try { localStorage.setItem('theme', next); } catch (e) {}
|
||||
label();
|
||||
});
|
||||
label();
|
||||
})();
|
||||
|
||||
/* ===== 顶栏滚动后浮现毛玻璃底 ===== */
|
||||
(function(){
|
||||
var bar = document.getElementById('topbar');
|
||||
if (!bar) return;
|
||||
function onScroll() { bar.classList.toggle('stuck', window.scrollY > 8); }
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
onScroll();
|
||||
})();
|
||||
|
||||
/* ===== 卡片滚动进入动画（模糊浮现，逐个错峰） ===== */
|
||||
(function(){
|
||||
var cards = Array.prototype.slice.call(document.querySelectorAll('.card'));
|
||||
var reduced = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
if (reduced || !('IntersectionObserver' in window)) {
|
||||
cards.forEach(function(c){ c.classList.add('in'); });
|
||||
return;
|
||||
}
|
||||
var io = new IntersectionObserver(function(entries){
|
||||
entries.forEach(function(en){
|
||||
if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); }
|
||||
});
|
||||
}, { threshold: .08 });
|
||||
cards.forEach(function(c){ io.observe(c); });
|
||||
})();
|
||||
|
||||
/* ===== 卡内聚光：跟随光标的高光点 ===== */
|
||||
(function(){
|
||||
if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
document.querySelectorAll('.card').forEach(function(card){
|
||||
card.addEventListener('pointermove', function(e){
|
||||
var r = card.getBoundingClientRect();
|
||||
card.style.setProperty('--mx', (e.clientX - r.left) + 'px');
|
||||
card.style.setProperty('--my', (e.clientY - r.top) + 'px');
|
||||
}, { passive: true });
|
||||
});
|
||||
})();
|
||||
|
||||
/* ===== Hero 3D 倾斜：随光标轻微透视转动 ===== */
|
||||
(function(){
|
||||
if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
var hero = document.querySelector('.hero');
|
||||
if (!hero) return;
|
||||
hero.addEventListener('pointermove', function(e){
|
||||
var r = hero.getBoundingClientRect();
|
||||
var px = (e.clientX - r.left) / r.width - .5;
|
||||
var py = (e.clientY - r.top) / r.height - .5;
|
||||
hero.style.setProperty('--ry', (px * 5).toFixed(2) + 'deg');
|
||||
hero.style.setProperty('--rx', (-py * 4).toFixed(2) + 'deg');
|
||||
}, { passive: true });
|
||||
hero.addEventListener('pointerleave', function(){
|
||||
hero.style.setProperty('--ry', '0deg');
|
||||
hero.style.setProperty('--rx', '0deg');
|
||||
});
|
||||
})();
|
||||
|
||||
/* ===== 动态光晕：三团背景光斑缓慢漂移 + 鼠标视差，两团柔光跟随光标（带延迟拖尾） ===== */
|
||||
(function(){
|
||||
if (!window.matchMedia || matchMedia('(prefers-reduced-motion: reduce)').matches) return; // 减少动态效果：保持静态
|
||||
@@ -342,15 +644,39 @@
|
||||
apply();
|
||||
})();
|
||||
|
||||
/* ===== 日期 + 时钟 ===== */
|
||||
/* ===== “/” 快捷键聚焦搜索 ===== */
|
||||
(function(){
|
||||
var input = document.querySelector('form.search input');
|
||||
if (!input) return;
|
||||
document.addEventListener('keydown', function(e){
|
||||
var tag = (document.activeElement && document.activeElement.tagName) || '';
|
||||
if (e.key === '/' && tag !== 'INPUT' && tag !== 'SELECT' && tag !== 'TEXTAREA') {
|
||||
e.preventDefault();
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
/* ===== 问候语 ===== */
|
||||
(function(){
|
||||
var el = document.getElementById('greet');
|
||||
if (!el) return;
|
||||
var h = new Date().getHours();
|
||||
var g = h < 5 ? '夜深了' : h < 11 ? '早上好' : h < 13 ? '中午好' : h < 18 ? '下午好' : h < 23 ? '晚上好' : '夜深了';
|
||||
el.textContent = g + ' · hyonglin';
|
||||
})();
|
||||
|
||||
/* ===== 日期 + 时钟（秒数弱化显示） ===== */
|
||||
var week = ['日','一','二','三','四','五','六'];
|
||||
function pad2(n) { return (n < 10 ? '0' : '') + n; }
|
||||
function updateClock() {
|
||||
var now = new Date();
|
||||
var c = document.getElementById('clockval');
|
||||
if (c) c.textContent = pad2(now.getHours()) + ':' + pad2(now.getMinutes()) + ':' + pad2(now.getSeconds());
|
||||
if (c) c.innerHTML = pad2(now.getHours()) + ':' + pad2(now.getMinutes()) + '<span class="sec">:' + pad2(now.getSeconds()) + '</span>';
|
||||
var d = document.getElementById('dateval');
|
||||
if (d) d.textContent = now.getFullYear() + '-' + pad2(now.getMonth()+1) + '-' + pad2(now.getDate()) + ' 周' + week[now.getDay()];
|
||||
if (d) d.innerHTML = now.getFullYear() + '-' + pad2(now.getMonth()+1) + '-' + pad2(now.getDate()) + ' <span class="wk">周' + week[now.getDay()] + '</span>';
|
||||
var y = document.getElementById('year');
|
||||
if (y) y.textContent = now.getFullYear();
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
@@ -0,0 +1,859 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user