dsh-dock 0.7.0 → 0.8.0

package/features/games/games/racer.jsx

@@ -0,0 +1,169 @@
+/* 趣味游戏 · 极速赛车（经典机台）——纯 Client；canvas 渲染，躲避来车、收集金币，越开越快。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { focusStage, useGameControls } from "./shared.jsx";
+
+const W = 300, H = 420;
+const ROAD_W = 232, ROAD_X = (W - ROAD_W) / 2;
+const CAR_W = 34, CAR_H = 52;
+const CAR_COLORS = ["#f87171", "#fb923c", "#c084fc", "#38bdf8", "#4ade80", "#fde047"];
+function laneX(lane) { return ROAD_X + ROAD_W * (lane + 0.5) / 3 - CAR_W / 2; }
+function overlap(a, b) {
+	return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
+}
+function rect(ctx, x, y, w, h, r, fill) {
+	ctx.fillStyle = fill;
+	ctx.beginPath();
+	ctx.moveTo(x + r, y);
+	ctx.arcTo(x + w, y, x + w, y + h, r);
+	ctx.arcTo(x + w, y + h, x, y + h, r);
+	ctx.arcTo(x, y + h, x, y, r);
+	ctx.arcTo(x, y, x + w, y, r);
+	ctx.closePath();
+	ctx.fill();
+}
+
+export function RacerGame(props) {
+	const canvasRef = useRef(null);
+	const [status, setStatus] = useState("play"); // play | over
+	const game = useRef(null);
+	const keys = useRef({});
+	const statusRef = useRef("play"); statusRef.current = status;
+	const pausedRef = useRef(!!(props && props.paused)); pausedRef.current = !!(props && props.paused);
+
+	const reset = useCallback(() => {
+		game.current = {
+			stars: Array.from({ length: 50 }, () => ({ x: Math.random() * W, y: Math.random() * H, a: .2 + Math.random() * .5 })),
+			player: { x: laneX(1), y: H - CAR_H - 16 },
+			enemies: [], coins: [],
+			dist: 0, coinsGot: 0, spawn: 0, coinSpawn: 0,
+			speed: 3.4, over: false,
+		};
+	}, []);
+
+	useEffect(() => { reset(); setStatus("play"); }, [reset]);
+
+	const launch = useCallback(() => {
+		reset(); setStatus("play");
+	}, [reset]);
+
+	useEffect(() => {
+		const draw = () => {
+			const g = game.current, ctx = canvasRef.current && canvasRef.current.getContext("2d");
+			if (!g || !ctx) return;
+			// 背景
+			ctx.fillStyle = "#0b1024"; ctx.fillRect(0, 0, W, H);
+			ctx.fillStyle = "#1b2bb0";
+			for (const s of g.stars) { ctx.globalAlpha = s.a; ctx.fillRect(s.x, s.y, 1.5, 1.5); }
+			ctx.globalAlpha = 1;
+			// 路面
+			ctx.fillStyle = "#20243a"; ctx.fillRect(ROAD_X, 0, ROAD_W, H);
+			ctx.fillStyle = "rgba(255,255,255,.09)"; ctx.fillRect(ROAD_X + 6, 0, 4, H); ctx.fillRect(ROAD_X + ROAD_W - 10, 0, 4, H);
+			// 车道虚线
+			ctx.fillStyle = "rgba(255,255,255,.16)";
+			for (let i = 1; i < 3; i += 1) {
+				const lx = ROAD_X + ROAD_W * i / 3 - 1;
+				for (let yy = (g.dist % 60); yy < H; yy += 60) ctx.fillRect(lx, yy, 2, 26);
+			}
+			if (pausedRef.current || g.over) { drawHUD(ctx, g); return; }
+			// 挡板移动（玩家车）
+			if (keys.current.left) g.player.x -= 5;
+			if (keys.current.right) g.player.x += 5;
+			g.player.x = Math.max(ROAD_X + 2, Math.min(ROAD_X + ROAD_W - CAR_W - 2, g.player.x));
+			g.dist += g.speed * .16;
+			// 生成来车
+			g.spawn += 1;
+			if (g.spawn > Math.max(20, 56 - g.dist / 600)) {
+				g.spawn = 0;
+				const lane = Math.floor(Math.random() * 3);
+				const v = g.speed * (1.1 + Math.random() * .6);
+				g.enemies.push({ x: laneX(lane), y: -CAR_H - Math.random() * 60, w: CAR_W, h: CAR_H, v, c: CAR_COLORS[Math.floor(Math.random() * CAR_COLORS.length)] });
+			}
+			// 生成金币
+			g.coinSpawn += 1;
+			if (g.coinSpawn > Math.max(30, 70 - g.dist / 500)) {
+				g.coinSpawn = 0;
+				g.coins.push({ x: laneX(Math.floor(Math.random() * 3)), y: -30, r: 11, got: false });
+			}
+			// 更新来车/金币
+			for (const e of g.enemies) e.y += e.v;
+			for (const c of g.coins) c.y += g.speed;
+			g.enemies = g.enemies.filter((e) => e.y < H + 20);
+			g.coins = g.coins.filter((c) => c.y < H + 20);
+			// 碰撞检测
+			for (const e of g.enemies) {
+				if (overlap(g.player, e)) { g.over = true; setStatus("over"); statusRef.current = "over"; }
+			}
+			for (const c of g.coins) {
+				if (!c.got && Math.abs(c.x + c.r - (g.player.x + CAR_W / 2)) < CAR_W / 2 + 8 && Math.abs(c.y - (g.player.y + CAR_H / 2)) < CAR_H / 2 + 10) {
+					c.got = true; g.coinsGot += 1;
+				}
+			}
+			// 画来车
+			for (const e of g.enemies) { rect(ctx, e.x, e.y, e.w, e.h, 7, e.c); ctx.fillStyle = "rgba(255,255,255,.25)"; ctx.fillRect(e.x + 6, e.y + 7, e.w - 12, 12); }
+			// 画金币
+			ctx.fillStyle = "#fde047";
+			for (const c of g.coins) { ctx.beginPath(); ctx.arc(c.x + c.r, c.y, c.r, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "rgba(120,53,15,.4)"; ctx.beginPath(); ctx.arc(c.x + c.r, c.y, c.r * .5, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#fde047"; }
+			// 画玩家车
+			drawCar(ctx, g.player.x, g.player.y, "#22d3ee");
+			drawHUD(ctx, g);
+		};
+		const drawHUD = (ctx, g) => {
+			ctx.fillStyle = "#e7ecff";
+			ctx.font = "bold 13px system-ui, sans-serif";
+			ctx.textBaseline = "top";
+			ctx.fillText("距离 " + Math.floor(g.dist / 60) + " m", 10, 10);
+			ctx.fillStyle = "#fde047";
+			ctx.fillText("金币 × " + g.coinsGot, W - 70, 10);
+		};
+		function drawCar(ctx, x, y, c) {
+			rect(ctx, x, y, CAR_W, CAR_H, 9, c);
+			ctx.fillStyle = "rgba(255,255,255,.3)"; rect(ctx, x + 5, y + 6, CAR_W - 10, 13, 4, "rgba(255,255,255,.3)");
+			ctx.fillStyle = "rgba(15,23,42,.5)"; rect(ctx, x + 5, y + CAR_H - 16, CAR_W - 10, 9, 3, "rgba(15,23,42,.5)");
+			ctx.fillStyle = "rgba(255,255,255,.45)";
+			rect(ctx, x + 3, y + CAR_H - 4, 6, 5, 2, "#fde047");
+			rect(ctx, x + CAR_W - 9, y + CAR_H - 4, 6, 5, 2, "#fde047");
+		}
+		let raf = requestAnimationFrame(function loop() { draw(); raf = requestAnimationFrame(loop); });
+		return () => cancelAnimationFrame(raf);
+	}, []);
+
+	const onKeyDown = useCallback((event) => {
+		if (pausedRef.current) return;
+		if (event.key === "ArrowLeft") { event.preventDefault(); keys.current.left = true; }
+		else if (event.key === "ArrowRight") { event.preventDefault(); keys.current.right = true; }
+		else if (event.key.toLowerCase() === "r") { event.preventDefault(); launch(); }
+	}, [launch]);
+	const onKeyUp = useCallback((event) => {
+		if (event.key === "ArrowLeft") keys.current.left = false;
+		else if (event.key === "ArrowRight") keys.current.right = false;
+	}, []);
+
+	const onPointerMove = useCallback((e) => {
+		const g = game.current, cv = canvasRef.current;
+		if (!g || !cv) return;
+		const rect0 = cv.getBoundingClientRect();
+		const scale = rect0.width / W;
+		g.player.x = Math.max(ROAD_X + 2, Math.min(ROAD_X + ROAD_W - CAR_W - 2, (e.clientX - rect0.left) / scale - CAR_W / 2));
+	}, []);
+	useGameControls(canvasRef, pausedRef.current, onKeyDown, onKeyUp);
+
+	return <section className="dgame-game" aria-label="极速赛车">
+		<div className="dgame-game-head"><div><h3>极速赛车</h3><p>左右移动避开迎面来车、收集金币，越开越快；撞车即结束。距离与金币实时显示在游戏画面左上/右上。</p></div><div className="dgame-score"><span>操作</span><span>←/→ 或鼠标</span></div></div>
+		<div className="dgame-racer">
+			<canvas ref={canvasRef} width={W} height={H} tabIndex={0} onKeyDown={onKeyDown} onKeyUp={onKeyUp} onPointerMove={onPointerMove} onClick={() => focusStage(canvasRef)} className="dgame-racer-canvas" aria-label="极速赛车游戏区域，左右方向键或鼠标控制方向" />
+			{status === "over" ? <div className="dgame-over"><strong>撞车了 · 行驶 {(game.current && Math.floor(game.current.dist / 60)) || 0} 米</strong><button type="button" onClick={launch}>重新出发</button></div> : null}
+		</div>
+		<div className="dgame-controls"><button type="button" aria-label="向左" onClick={() => { keys.current.left = false; if (game.current) game.current.player.x = Math.max(ROAD_X + 2, game.current.player.x - 14); }}>← 左移</button><span>←/→ 或鼠标移动 · R 重开</span><button type="button" aria-label="向右" onClick={() => { keys.current.right = false; if (game.current) game.current.player.x = Math.min(ROAD_X + ROAD_W - CAR_W - 2, game.current.player.x + 14); }}>右移 {'->'}</button></div>
+	</section>;
+}
+
+export function RacerPreview() {
+	return <span className="dgcov-prev dgcov-prev-racer" aria-hidden="true">
+		<i style={{ left: "20%", top: "8%" }} /><i style={{ left: "55%", top: "22%" }} /><i style={{ left: "20%", top: "42%" }} /><i style={{ left: "64%", top: "58%" }} /><i style={{ left: "38%", top: "74%" }} />
+		<b />
+	</span>;
+}
+
+export const racerGame = { Game: RacerGame, Preview: RacerPreview, css: `
+.dgame-racer{position:relative;align-self:center;width:min(100%,300px);margin:0 auto}.dgame-racer-canvas{display:block;width:100%;aspect-ratio:300/420;border:1px solid color-mix(in srgb,rgb(34 211 238) 32%,var(--dsw-alias-border-l1));border-radius:10px;outline:none;background:#0b1024;box-shadow:0 4px 18px rgb(0 0 0/.4)}.dgame-racer-canvas:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,rgb(34 211 238) 35%,transparent)}.dgame-racer .dgame-over{position:absolute;inset:0;border-radius:10px}.dgame-racer-stat{color:var(--dsw-alias-label-tertiary)}
+` };

package/features/games/games/shared.jsx

@@ -0,0 +1,118 @@
+/* 趣味游戏 · 游戏公共工具：键盘焦点与全局按键监听 */
+import { useEffect, useRef } from "react";
+
+function isTypingTarget(event) {
+	const tag = (event.target && event.target.tagName) || "";
+	if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+	if (event.target && event.target.isContentEditable) return true;
+	return false;
+}
+
+/**
+ * 让游戏舞台自动聚焦并在点击时重新夺回焦点；
+ * 同时注册 window 级 keydown，确保方向键/WASD 等即使舞台因弹窗/按钮暂时失焦也能响应。
+ * paused：来自 GameWindow 的暂停/最小化/选择层状态；暂停时不监听按键、不抢焦点。
+ */
+export function useGameControls(stageRef, paused, onKeyDown, onKeyUp) {
+	const pausedRef = useRef(!!paused);
+	pausedRef.current = !!paused;
+
+	// 自动聚焦舞台（延时确保 DOM 已渲染且窗口已显示）
+	useEffect(() => {
+		if (pausedRef.current) return;
+		const el = stageRef && stageRef.current;
+		if (!el) return;
+		const t = setTimeout(() => { try { el.focus({ preventScroll: true }); } catch { /* ignore */ } }, 60);
+		return () => clearTimeout(t);
+	}, [paused]);
+
+	// 全局按键监听：只在窗口打开、未暂停、且不在输入框中时响应。
+	// 事件目标落在游戏舞台（或其子元素，如棋盘格按钮）内时跳过——
+	// 舞台自身的 onKeyDown 会通过冒泡处理该键，避免双重触发。
+	useEffect(() => {
+		const inStage = (event) => {
+			const el = stageRef && stageRef.current;
+			return !!el && (el === event.target || el.contains(event.target));
+		};
+		const handleDown = (event) => {
+			if (pausedRef.current) return;
+			if (isTypingTarget(event)) return;
+			if (inStage(event)) return;
+			if (typeof onKeyDown === "function") onKeyDown(event);
+		};
+		const handleUp = (event) => {
+			if (pausedRef.current) return;
+			if (isTypingTarget(event)) return;
+			if (inStage(event)) return;
+			if (typeof onKeyUp === "function") onKeyUp(event);
+		};
+		window.addEventListener("keydown", handleDown);
+		window.addEventListener("keyup", handleUp);
+		return () => {
+			window.removeEventListener("keydown", handleDown);
+			window.removeEventListener("keyup", handleUp);
+		};
+	}, [onKeyDown, onKeyUp]);
+}
+
+/** 点击舞台时重新聚焦（配合 onClick） */
+export function focusStage(stageRef) {
+	if (stageRef && stageRef.current) {
+		try { stageRef.current.focus({ preventScroll: true }); } catch { /* ignore */ }
+	}
+}
+
+/* ---------- 游戏音效：WebAudio 现场合成，零素材文件；首次交互后惰性初始化 ---------- */
+let _ctx = null;
+function audioCtx() {
+	if (typeof window === "undefined") return null;
+	const AC = window.AudioContext || window.webkitAudioContext;
+	if (!AC) return null;
+	try {
+		if (!_ctx) _ctx = new AC();
+		if (_ctx.state === "suspended") _ctx.resume().catch(() => {});
+		return _ctx;
+	} catch { return null; }
+}
+// name → 音色参数。t 波形 · g 音量 · d 单音时长 · f2 滑向频率 · seq 连奏序列 [频率, 延迟秒]
+const SFX_DEFS = {
+	move: { f: 240, t: "square", d: 0.035, g: 0.07 },
+	rotate: { f: 340, t: "square", d: 0.05, g: 0.08 },
+	lock: { f: 150, t: "triangle", d: 0.08, g: 0.15 },
+	step: { f: 190, t: "triangle", d: 0.03, g: 0.06 },
+	push: { f: 115, t: "triangle", d: 0.07, g: 0.14 },
+	stone: { f: 520, t: "triangle", d: 0.05, g: 0.13, f2: 430 },
+	capture: { f: 175, t: "square", d: 0.09, g: 0.15, f2: 105 },
+	check: { t: "square", g: 0.12, d: 0.24, seq: [[660, 0], [660, 0.14]] },
+	eat: { f: 620, t: "square", d: 0.06, g: 0.11, f2: 920 },
+	bounce: { f: 420, t: "square", d: 0.03, g: 0.07 },
+	brick: { f: 740, t: "square", d: 0.05, g: 0.1, f2: 500 },
+	clear: { t: "sine", g: 0.15, d: 0.28, seq: [[523, 0], [659, 0.09], [784, 0.18], [1047, 0.27]] },
+	win: { t: "sine", g: 0.14, d: 0.34, seq: [[523, 0], [659, 0.11], [784, 0.22], [1047, 0.33], [784, 0.47], [1047, 0.56]] },
+	over: { t: "sawtooth", g: 0.11, d: 0.38, seq: [[392, 0], [311, 0.13], [233, 0.27], [185, 0.44]] },
+};
+export function playSfx(name) {
+	const def = SFX_DEFS[name];
+	const ac = def && audioCtx();
+	if (!ac) return;
+	const t0 = ac.currentTime;
+	const events = def.seq || [[def.f, 0]];
+	for (const [freq, dt] of events) {
+		let osc, gain;
+		try {
+			osc = ac.createOscillator();
+			gain = ac.createGain();
+			osc.type = def.t || "square";
+			osc.frequency.setValueAtTime(freq, t0 + dt);
+			if (def.f2) osc.frequency.exponentialRampToValueAtTime(Math.max(30, def.f2), t0 + dt + def.d);
+			gain.gain.setValueAtTime(0.0001, t0 + dt);
+			gain.gain.exponentialRampToValueAtTime(def.g, t0 + dt + 0.008);
+			gain.gain.exponentialRampToValueAtTime(0.0001, t0 + dt + def.d);
+			osc.connect(gain).connect(ac.destination);
+			osc.start(t0 + dt);
+			osc.stop(t0 + dt + def.d + 0.03);
+		} catch {
+			if (osc) try { osc.stop(); } catch { /* ignore */ }
+		}
+	}
+}

package/features/games/games/snake.jsx

@@ -0,0 +1,144 @@
+/* 趣味游戏 · 贪吃蛇（经典机台）——纯 Client；吃到食物变长，撞墙或咬到自身结束。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { focusStage, useGameControls, playSfx } from "./shared.jsx";
+
+const SIZE = 16;
+const DIRS = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1], w: [-1, 0], s: [1, 0], a: [0, -1], d: [0, 1], W: [-1, 0], S: [1, 0], A: [0, -1], D: [0, 1] };
+const OPPOSITE = { "-1,0": [1, 0], "1,0": [-1, 0], "0,1": [0, -1], "0,-1": [0, 1] };
+// 三档速度：随得分缓慢提速，下限保证可玩性。
+const SPEED_MODES = {
+	slow: { label: "慢速", stepMs: 4, base: 320, min: 180 },
+	normal: { label: "中速", stepMs: 3, base: 220, min: 120 },
+	fast: { label: "快速", stepMs: 2, base: 140, min: 80 },
+};
+function loadSpeedMode() {
+	try { return SPEED_MODES[localStorage.getItem("dsh-dock.snake.speed")] ? localStorage.getItem("dsh-dock.snake.speed") : "slow"; } catch { return "slow"; }
+}
+
+function randFood(snake) {
+	while (true) {
+		const r = Math.floor(Math.random() * SIZE), c = Math.floor(Math.random() * SIZE);
+		if (!snake.some((s) => s.r === r && s.c === c)) return { r, c };
+	}
+}
+function initial() {
+	const snake = [{ r: 7, c: 5 }, { r: 7, c: 4 }, { r: 7, c: 3 }];
+	return { snake, dir: [0, 1], food: randFood(snake), score: 0, over: false, started: false };
+}
+function step(state, dir) {
+	const head = state.snake[0];
+	const nr = head.r + dir[0], nc = head.c + dir[1];
+	const body = state.snake.slice(0, -1);
+	if (nr < 0 || nr >= SIZE || nc < 0 || nc >= SIZE || body.some((s) => s.r === nr && s.c === nc)) {
+		return Object.assign({}, state, { over: true });
+	}
+	const ate = state.food.r === nr && state.food.c === nc;
+	let snake = [{ r: nr, c: nc }, ...state.snake];
+	if (ate) {
+		playSfx("eat");
+		const food = randFood(snake);
+		return Object.assign({}, state, { snake, food, score: state.score + 1 });
+	}
+	snake.pop();
+	return Object.assign({}, state, { snake });
+}
+
+export function SnakeGame(props) {
+	const [state, setState] = useState(initial);
+	const [paused, setPaused] = useState(false);
+	// 速度档位：默认慢速，可随时切换（重开不重置）。
+	const [speedMode, setSpeedMode] = useState(loadSpeedMode);
+	const stageRef = useRef(null);
+	const dirRef = useRef(state.dir);
+	const overRef = useRef(state.over); overRef.current = state.over;
+	const pausedRef = useRef(!!(props && props.paused) || paused); pausedRef.current = !!(props && props.paused) || paused;
+
+	const start = useCallback(() => { const init = initial(); init.started = true; dirRef.current = init.dir; setState(init); setPaused(false); }, []);
+	// 待机 → 开始：按回车/空格，或直接按方向键起步。
+	const begin = useCallback(() => { setState((s) => (s.started || s.over ? s : Object.assign({}, s, { started: true }))); }, []);
+	const changeDir = useCallback((nv) => {
+		if (overRef.current || pausedRef.current) return;
+		const cur = dirRef.current;
+		const opp = OPPOSITE[cur[0] + "," + cur[1]];
+		if (opp && opp[0] === nv[0] && opp[1] === nv[1]) return;
+		dirRef.current = nv;
+		begin();
+	}, [begin]);
+
+	useEffect(() => {
+		if (state.over) playSfx("over");
+	}, [state.over]);
+
+	useEffect(() => {
+		if (!state.started || state.over || pausedRef.current) return;
+		const mode = SPEED_MODES[speedMode] || SPEED_MODES.slow;
+		const speed = Math.max(mode.min, mode.base - state.score * mode.stepMs);
+		const timer = setInterval(() => setState((s) => (s.over || !s.started || pausedRef.current ? s : step(s, dirRef.current))), speed);
+		return () => clearInterval(timer);
+	}, [state.started, state.over, state.score, props.paused, paused, speedMode]);
+
+	const pickSpeed = useCallback((m) => {
+		setSpeedMode(m);
+		try { localStorage.setItem("dsh-dock.snake.speed", m); } catch { /* ignore */ }
+	}, []);
+
+	const onKeyDown = useCallback((event) => {
+		const d = DIRS[event.key];
+		if (d) { event.preventDefault(); changeDir(d); return; }
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			if (overRef.current || !state.started || pausedRef.current) start();
+			else setPaused((p) => !p);
+			return;
+		}
+		if (event.key.toLowerCase() === "p") { event.preventDefault(); setPaused((p) => !p); }
+		else if (event.key.toLowerCase() === "r") { event.preventDefault(); start(); }
+	}, [changeDir, start, state.started]);
+
+	useGameControls(stageRef, pausedRef.current, onKeyDown);
+
+	const cells = [];
+	for (let r = 0; r < SIZE; r += 1) {
+		for (let c = 0; c < SIZE; c += 1) {
+			const idx = state.snake.findIndex((s) => s.r === r && s.c === c);
+			const isFood = state.food.r === r && state.food.c === c;
+			let cls = "dgame-snake-cell";
+			if (idx >= 0) cls += " bob" + (idx === 0 ? " head" : idx < 4 ? " body2" : "");
+			if (isFood) cls += " food";
+			cells.push(<i key={r + "-" + c} className={cls} aria-hidden="true" />);
+		}
+	}
+
+	return <section className="dgame-game" aria-label="贪吃蛇">
+		<div className="dgame-game-head"><div><h3>贪吃蛇</h3><p>回车开始/暂停，方向键控制移动；吃到食物变长并缓慢提速，撞墙或咬到自己就结束。</p></div><div className="dgame-score"><span>长度 <strong>{state.score + 3}</strong></span><span>得分 {state.score}</span></div></div>
+		<div className="dgame-snake-speeds" role="radiogroup" aria-label="游戏速度">
+			<span>速度</span>
+			{Object.entries(SPEED_MODES).map(([m, cfg]) => (
+				<button key={m} type="button" role="radio" aria-checked={speedMode === m} className={speedMode === m ? "on" : ""} onClick={() => pickSpeed(m)}>{cfg.label}</button>
+			))}
+		</div>
+		<div className="dgame-snake-stage" ref={stageRef} tabIndex={0} onKeyDown={onKeyDown} onClick={() => focusStage(stageRef)} aria-label="贪吃蛇游戏区域，使用方向键控制移动，回车开始">
+			<div className="dgame-snake-grid">{cells}</div>
+			{state.over ? <div className="dgame-over"><strong>撞上了 · 得 {state.score} 分</strong><button type="button" onClick={start}>重新开始</button></div> : null}
+			{!state.started && !state.over ? <div className="dgame-over"><strong>按 Enter 或方向键开始</strong><button type="button" onClick={start}>开始游戏</button></div> : null}
+			{state.started && !state.over && pausedRef.current ? <div className="dgame-over"><strong>已暂停</strong><button type="button" onClick={() => setPaused(false)}>继续（P）</button></div> : null}
+		</div>
+		<div className="dgame-controls"><button type="button" aria-label="向上" onClick={() => changeDir([-1, 0])}>↑</button><span>方向键 / WASD · 回车 开始/暂停 · R 重开</span><button type="button" aria-label="向下" onClick={() => changeDir([1, 0])}>↓</button></div>
+	</section>;
+}
+
+export function SnakePreview() {
+	return <span className="dgcov-prev dgcov-prev-snake" aria-hidden="true">
+		<i style={{ left: "12%", top: "62%" }} /><i style={{ left: "24%", top: "62%" }} /><i style={{ left: "36%", top: "62%" }} /><i style={{ left: "48%", top: "62%" }} /><i style={{ left: "60%", top: "62%" }} />
+		<b />
+	</span>;
+}
+
+export const snakeGame = { Game: SnakeGame, Preview: SnakePreview, css: `
+.dgame-snake-speeds{display:flex;gap:6px;align-items:center;align-self:center;justify-content:center}
+.dgame-snake-speeds span{font-size:11px;color:var(--dsw-alias-label-tertiary)}
+.dgame-snake-speeds button{min-width:44px;height:26px;padding:0 8px;border:1px solid var(--dsw-alias-border-l2);border-radius:7px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font:inherit;font-size:11px;cursor:pointer;transition:all .15s ease}
+.dgame-snake-speeds button.on{color:#bbf7d0;border-color:color-mix(in srgb,#4ade80 55%,transparent);background:color-mix(in srgb,#4ade80 16%,transparent)}
+.dgame-snake-speeds button:hover{border-color:#4ade80;color:var(--dsw-alias-label-primary)}
+.dgame-snake-stage{position:relative;align-self:center;width:min(100%,300px);aspect-ratio:1/1;border:1px solid color-mix(in srgb,rgb(74 222 128) 32%,var(--dsw-alias-border-l1));border-radius:10px;overflow:hidden;outline:none;background:radial-gradient(circle at 50% -10%,color-mix(in srgb,#166534 30%,transparent),transparent 55%),#0a1420}.dgame-snake-stage:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,rgb(74 222 128) 35%,transparent)}.dgame-snake-grid{display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(16,1fr);width:100%;height:100%}.dgame-snake-cell{position:relative}.dgame-snake-cell.food::after{content:'';position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fecaca,#ef4444 70%);box-shadow:0 0 9px color-mix(in srgb,#ef4444 70%,transparent)}.dgame-snake-cell.bob::after{content:'';position:absolute;inset:20%;border-radius:26%;background:linear-gradient(135deg,#4ade80,#16a34a)}.dgame-snake-cell.head::after{background:linear-gradient(135deg,#bbf7d0,#22c55e);border-radius:30% 30% 28% 28%;box-shadow:0 1px 6px color-mix(in srgb,#22c55e 60%,transparent)}.dgame-snake-cell.head::before{content:'';position:absolute;left:30%;top:30%;width:9%;height:9%;border-radius:50%;background:#0b1b12}.dgame-snake-cell.body2::after{background:linear-gradient(135deg,#34d399,#0d9f6e)}
+` };

package/features/games/games/sokoban.jsx

@@ -0,0 +1,180 @@
+/* 趣味游戏 · 推箱子（经典机台）——纯 Client；把箱子推到目标点上即可过关。 */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { focusStage, useGameControls, playSfx } from "./shared.jsx";
+
+// 关卡：'#' 墙 · ' ' 地板 · '.' 目标 · '$' 箱子 · '@' 人 · '*' 箱子在目标 · '+' 人在目标
+const LEVELS = [
+	["######", "#    #", "#@$ .#", "#    #", "######"],
+	["######", "# @  #", "# $  #", "# .  #", "######"],
+	["#######", "# @   #", "# $$  #", "# ..  #", "#######"],
+	["######", "#@   #", "# $  #", "#  . #", "#    #", "######"],
+	["#######", "# @   #", "# $   #", "#  $ .#", "#   . #", "#######"],
+	["########", "#      #", "# $ $  #", "# . .  #", "#   @  #", "########"],
+	// —— 扩充关：由易到难（已用求解器验证全部可解）——
+	["########", "#  ##  #", "#@ $ . #", "#  ##  #", "########"],
+	["########", "#  @   #", "# $$$  #", "# ...  #", "#      #", "########"],
+	["########", "#@     #", "# $ $  #", "#  #   #", "# . #. #", "########"],
+	["########", "#    @ #", "# $$   #", "#  ..# #", "#      #", "########"],
+	["########", "#@     #", "# $ $  #", "#      #", "# .# . #", "########"],
+	["#########", "#       #", "# $ $ $ #", "#  ...  #", "#   @   #", "#       #", "#########"],
+	["#########", "#   @   #", "# $#$$  #", "#  ...  #", "#  ##   #", "#########"],
+	["#########", "#@  #   #", "# $   $ #", "# ###   #", "#  . .  #", "#########"],
+	["#########", "#     ###", "# $$ #  #", "# .. #@ #", "# $$ #  #", "# ..    #", "#########"],
+];
+
+function cloneGrid(grid) {
+	return grid.map((row) => row.slice());
+}
+function parse(rows) {
+	return rows.map((row) => row.split(""));
+}
+function findPlayer(grid) {
+	for (let r = 0; r < grid.length; r += 1) {
+		for (let c = 0; c < grid[r].length; c += 1) {
+			if (grid[r][c] === "@" || grid[r][c] === "+") return { r, c };
+		}
+	}
+	return { r: 0, c: 0 };
+}
+function isTarget(ch) {
+	return ch === "." || ch === "*" || ch === "+";
+}
+function isBox(ch) {
+	return ch === "$" || ch === "*";
+}
+// 获胜：没有箱子错位（不存在 '$'）。
+function won(grid) {
+	for (const row of grid) for (const ch of row) if (ch === "$") return false;
+	return true;
+}
+function makeInitial(levelIndex) {
+	const grid = parse(LEVELS[levelIndex]);
+	return { grid, moves: 0, pushes: 0, level: levelIndex, wonNew: false, history: [] };
+}
+
+function step(state, dr, dc) {
+	if (state.wonNew) return state;
+	const grid = cloneGrid(state.grid);
+	const p = findPlayer(grid);
+	const nr = p.r + dr, nc = p.c + dc;
+	if (nr < 0 || nr >= grid.length || nc < 0 || nc >= grid[0].length) return state;
+	const target = grid[nr][nc];
+	if (target === "#") return state;
+	grid[p.r][p.c] = isTarget(grid[p.r][p.c]) ? "." : " ";
+	if (isBox(target)) {
+		const br = nr + dr, bc = nc + dc;
+		if (br < 0 || br >= grid.length || bc < 0 || bc >= grid[0].length) return state;
+		const beyond = grid[br][bc];
+		if (beyond === "#" || isBox(beyond)) return state;
+		playSfx("push");
+		grid[br][bc] = isTarget(beyond) ? "*" : "$";
+		grid[nr][nc] = isTarget(target) ? "+" : "@";
+		return Object.assign({}, state, {
+			grid,
+			moves: state.moves + 1,
+			pushes: state.pushes + 1,
+			wonNew: won(grid),
+			history: state.history.concat([{ grid: state.grid, moves: state.moves, pushes: state.pushes }]),
+		});
+	}
+	grid[nr][nc] = isTarget(target) ? "+" : "@";
+	playSfx("step");
+	return Object.assign({}, state, {
+		grid,
+		moves: state.moves + 1,
+		wonNew: won(grid),
+		history: state.history.concat([{ grid: state.grid, moves: state.moves, pushes: state.pushes }]),
+	});
+}
+function undo(state) {
+	if (!state.history.length) return state;
+	const prev = state.history[state.history.length - 1];
+	return Object.assign({}, state, {
+		grid: cloneGrid(prev.grid),
+		moves: prev.moves,
+		pushes: prev.pushes,
+		history: state.history.slice(0, -1),
+		wonNew: false,
+	});
+}
+
+const DIRS = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1], w: [-1, 0], s: [1, 0], a: [0, -1], d: [0, 1], W: [-1, 0], S: [1, 0], A: [0, -1], D: [0, 1] };
+
+export function SokobanGame(props) {
+	const [level, setLevel] = useState(0);
+	const [state, setState] = useState(() => makeInitial(0));
+	const stageRef = useRef(null);
+	const levelRef = useRef(level);
+	levelRef.current = level;
+
+	const move = useCallback((dr, dc) => setState((s) => step(s, dr, dc)), []);
+	const prevWon = useRef(false);
+	useEffect(() => {
+		if (state.wonNew && !prevWon.current) playSfx("win");
+		prevWon.current = state.wonNew;
+	}, [state.wonNew]);
+	const nextLevel = useCallback(() => {
+		const n = (levelRef.current + 1) % LEVELS.length;
+		setLevel(n);
+		setState(makeInitial(n));
+	}, []);
+	const pickLevel = useCallback((i) => { setLevel(i); setState(makeInitial(i)); }, []);
+	const reset = useCallback(() => setState(makeInitial(levelRef.current)), []);
+
+	const onKeyDown = useCallback((event) => {
+		const d = DIRS[event.key];
+		if (d) { event.preventDefault(); move(d[0], d[1]); return; }
+		if (event.key.toLowerCase() === "u") { event.preventDefault(); setState((s) => undo(s)); }
+		else if (event.key.toLowerCase() === "r") { event.preventDefault(); reset(); }
+		else if (event.key === "Enter" && state.wonNew) { event.preventDefault(); nextLevel(); }
+	}, [move, state.wonNew, reset, nextLevel]);
+
+	useGameControls(stageRef, props.paused, onKeyDown);
+
+	const grid = state.grid;
+	const rows = grid.length, cols = grid[0].length;
+	// 宽度同时钳制：单元格理想宽、容器可用宽、按关卡长宽比折算的视口可用高——保证等比完整显示不裁切。
+	const width = "min(" + (cols * 26) + "px, 100%, calc((100vh - 250px) * " + cols + " / " + rows + "))";
+
+	return <section className="dgame-game" aria-label="推箱子">
+		<div className="dgame-game-head"><div><h3>推箱子</h3><p>用方向键把箱子推到目标格子上；全部到位即过关（U 撤销、R 重置）。</p></div><div className="dgame-score"><span>步数 <strong>{state.moves}</strong></span><span>推箱 {state.pushes}</span></div></div>
+		<div className="dgame-sokoban-levels" role="tablist" aria-label="选择关卡">
+			{LEVELS.map((_, i) => <span key={i}><button type="button" role="tab" aria-selected={i === level} className={i === level ? "on" : ""} onClick={() => pickLevel(i)}>{i + 1}</button></span>)}
+			<button type="button" onClick={() => setState((s) => undo(s))}>撤销</button>
+			<button type="button" onClick={reset}>重置</button>
+		</div>
+		<div className="dgame-sokoban-stage" ref={stageRef} tabIndex={0} onKeyDown={onKeyDown} onClick={() => focusStage(stageRef)} style={{ width, gridTemplateColumns: "repeat(" + cols + ",1fr)", gridTemplateRows: "repeat(" + rows + ",1fr)", aspectRatio: cols + " / " + rows }} aria-label="推箱子游戏区域，使用方向键移动，U 撤销，R 重置">
+			{grid.map((row, r) => row.map((ch, c) => {
+				let cls = "dgame-soko-cell";
+				if (ch === "#") cls += " wall";
+				else if (ch === "." || ch === "*" || ch === "+") cls += " target";
+				if (ch === "$" || ch === "*") cls += " box";
+				if (ch === "@" || ch === "+") cls += " player";
+				return <i key={r + "-" + c} className={cls} aria-hidden="true" />;
+			}))}
+			{state.wonNew ? <div className="dgame-over"><strong>全搞定！第 {level + 1} 关通过</strong><button type="button" onClick={nextLevel}>{level + 1 < LEVELS.length ? "下一关" : "重新开始"}</button></div> : null}
+		</div>
+		<div className="dgame-controls"><button type="button" aria-label="向上" onClick={() => move(-1, 0)}>↑</button><span>方向键 / WASD · U 撤销 · R 重置</span><button type="button" aria-label="向下" onClick={() => move(1, 0)}>↓</button></div>
+	</section>;
+}
+
+export function SokobanPreview() {
+	// 迷你关卡画面：墙/地/箱/目标/小人色块，与真实游戏元素一致。
+	const ROWS = [
+		"#######",
+		"#     #",
+		"# .$@ #",
+		"# .*  #",
+		"#######",
+	];
+	const cls = { "#": "wall", " ": "floor", ".": "target", "$": "box", "*": "boxT", "@": "player", "+": "player" };
+	return <span className="dgcov-prev dgcov-prev-soko" aria-hidden="true">
+		<span className="dgp-soko-grid">
+			{ROWS.flatMap((row, r) => row.split("").map((ch, c) => <i key={r + "-" + c} className={"dgp-soko-" + cls[ch]} />))}
+		</span>
+	</span>;
+}
+
+export const sokobanGame = { Game: SokobanGame, Preview: SokobanPreview, css: `
+.dgame-sokoban-stage{position:relative;display:grid;align-self:center;gap:0;padding:6px;border:1px solid color-mix(in srgb,rgb(250 204 21) 32%,var(--dsw-alias-border-l1));border-radius:8px;background:linear-gradient(180deg,#181420,#14101f);outline:none;box-shadow:inset 0 0 26px rgb(0 0 0/.4)}.dgame-sokoban-stage:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,rgb(250 204 21) 30%,transparent)}.dgame-soko-cell{position:relative;display:block;min-width:0;min-height:0}.dgame-soko-cell.wall{background:linear-gradient(180deg,#3a3350,#241f3a);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.4)}.dgame-soko-cell.target::before{content:'';position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fde68a,#f59e0b 70%);box-shadow:0 0 8px color-mix(in srgb,#f59e0b 55%,transparent);opacity:.9}.dgame-soko-cell.box::after{content:'';position:absolute;inset:12%;border-radius:5px;background:linear-gradient(135deg,#d4a24a,#8a5a1c);box-shadow:0 2px 5px rgb(0 0 0/.45),inset 0 1px 0 rgba(255,255,255,.4);border:1px solid color-mix(in srgb,#fde68a 45%,transparent)}.dgame-soko-cell.box.target::after{background:linear-gradient(135deg,#34d399,#0f766e);border-color:#a7f3d0}.dgame-soko-cell.player::before{content:'';position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e0f2fe,#38bdf8 70%);box-shadow:0 0 9px color-mix(in srgb,#38bdf8 70%,transparent)}.dgame-sokoban-levels{display:flex;gap:6px;align-items:center;align-self:center;flex-wrap:wrap;width:min(100%,340px);justify-content:center}.dgame-sokoban-levels button{min-width:30px;height:28px;border:1px solid var(--dsw-alias-border-l2);border-radius:7px;background:var(--dsw-alias-bg-layer-1);color:var(--dsw-alias-label-secondary);font:inherit;font-size:11px;cursor:pointer;transition:all .15s ease}.dgame-sokoban-levels button.on{color:#fde68a;border-color:color-mix(in srgb,#f59e0b 60%,transparent);background:color-mix(in srgb,#f59e0b 18%,transparent)}.dgame-sokoban-levels button:hover{border-color:var(--dgame-accent);color:var(--dsw-alias-label-primary)}
+` };