dsh-dock 0.7.1 → 0.8.0

package/features/games/games/breakout.jsx

@@ -1,5 +1,6 @@
 /* 趣味游戏 · 打砖块（经典机台）——纯 Client；canvas 渲染，方向键/鼠标/触摸控制挡板。 */
 import { useCallback, useEffect, useRef, useState } from "react";
+import { focusStage, useGameControls, playSfx } from "./shared.jsx";
 
 const W = 320, H = 360;
 const BRICK_COLS = 8, BRICK_ROWS = 5, BRICK_GAP = 4, BRICK_TOP = 22, BRICK_H = 18;
@@ -109,9 +110,9 @@ export function BreakoutGame(props) {
 		if (g) { g.ball.x = W / 2; g.ball.y = H - PADDLE_BOTTOM - PADDLE_H - BALL_R - 1; g.ball.vx = 0; g.ball.vy = 0; g.launched = false; }
 	}, []);
 
-	// rAF 主循环。
+	// rAF 主循环。注意：本地函数不能叫 draw，否则会遮蔽模块级渲染函数导致递归自调用。
 	useEffect(() => {
-		const draw = () => {
+		const frame = () => {
 			const g = game.current;
 			const ctx = canvasRef.current && canvasRef.current.getContext("2d");
 			if (!g || !ctx) return;
@@ -133,6 +134,7 @@ export function BreakoutGame(props) {
 				if (b.y - BALL_R < 0) { b.y = BALL_R; b.vy = Math.abs(b.vy); }
 				// 挡板
 				if (b.vy > 0 && b.y + BALL_R >= g.paddle.y && b.y - BALL_R <= g.paddle.y + PADDLE_H && b.x >= g.paddle.x - BALL_R && b.x <= g.paddle.x + PADDLE_W + BALL_R) {
+					playSfx("bounce");
 					const rel = (b.x - (g.paddle.x + PADDLE_W / 2)) / (PADDLE_W / 2);
 					const ang = rel * .6;
 					const sp = Math.hypot(b.vx, b.vy);
@@ -146,6 +148,7 @@ export function BreakoutGame(props) {
 					if (!br.alive) continue;
 					if (collideRect(b.x, b.y, BALL_R, br.x, br.y, br.w, br.h)) {
 						br.alive = false;
+						playSfx("brick");
 						const cx = br.x + br.w / 2, cy = br.y + br.h / 2;
 						const dx = b.x - cx, dy = b.y - cy;
 						if (Math.abs(dx / br.w) > Math.abs(dy / br.h)) { b.vx = -b.vx; b.x += b.vx * 2; }
@@ -154,6 +157,7 @@ export function BreakoutGame(props) {
 						scoreRef.current += 10;
 						const remain = g.bricks.some((x) => x.alive);
 						if (!remain) {
+							playSfx("win");
 							setStatus("win"); setLevel((l) => l + 1);
 							if (statusRef.current !== "over") statusRef.current = "win";
 						}
@@ -164,13 +168,14 @@ export function BreakoutGame(props) {
 				if (b.y - BALL_R > H) {
 					const nl = livesRef.current - 1;
 					livesRef.current = nl; setLives(nl);
+					playSfx(nl <= 0 ? "over" : "step");
 					if (nl <= 0) { setStatus("over"); statusRef.current = "over"; }
 					else resetBall();
 				}
 			}
 			draw(ctx, g);
 		};
-		let raf = requestAnimationFrame(function loop() { draw(); raf = requestAnimationFrame(loop); });
+		let raf = requestAnimationFrame(function loop() { frame(); raf = requestAnimationFrame(loop); });
 		return () => cancelAnimationFrame(raf);
 	}, [resetBall]);
 
@@ -193,15 +198,12 @@ export function BreakoutGame(props) {
 		const scale = rect.width / W;
 		g.paddle.x = Math.max(0, Math.min(W - PADDLE_W, (e.clientX - rect.left) / scale - PADDLE_W / 2));
 	}, []);
-	useEffect(() => {
-		if (pausedRef.current) return;
-		if (canvasRef.current) canvasRef.current.focus();
-	}, [props.paused]);
+	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>得分 <strong>{score}</strong></span><span>命 {lives} · 第 {level} 关</span></div></div>
 		<div className="dgame-breakout">
-			<canvas ref={canvasRef} width={W} height={H} tabIndex={0} onKeyDown={onKeyDown} onKeyUp={onKeyUp} onPointerMove={onPointerMove} className="dgame-breakout-canvas" aria-label="打砖块游戏区域，左右方向键或鼠标移动挡板，空格发球" />
+			<canvas ref={canvasRef} width={W} height={H} tabIndex={0} onKeyDown={onKeyDown} onKeyUp={onKeyUp} onPointerMove={onPointerMove} onClick={() => focusStage(canvasRef)} className="dgame-breakout-canvas" aria-label="打砖块游戏区域，左右方向键或鼠标移动挡板，空格发球" />
 			{status === "win" ? <div className="dgame-over"><strong>全消！进入第 {level} 关</strong><button type="button" onClick={() => { start(level); setStatus("play"); statusRef.current = "play"; }}>下一关</button></div> : null}
 			{status === "over" ? <div className="dgame-over"><strong>球掉光了 · 得 {score} 分</strong><button type="button" onClick={() => { start(1); setScore(0); setLives(3); setStatus("play"); statusRef.current = "play"; livesRef.current = 3; }}>重新开始</button></div> : null}
 		</div>

package/features/games/games/gomoku.jsx

@@ -1,5 +1,21 @@
 /* 趣味游戏 · 五子棋（棋盘对战）——纯 Client；玩家执黑先手，AI 执白。 */
 import { useCallback, useEffect, useRef, useState } from "react";
+import { focusStage, useGameControls, playSfx } from "./shared.jsx";
+
+// 正规棋盘：SVG 精确绘制（viewBox 1500×1500，交点对齐各格中心）。外框加粗，五个星位点。
+const GOMOKU_LINES = (() => {
+	const P = (n) => n * 100 + 50;
+	const parts = [<rect key="frame" x={P(0)} y={P(0)} width={1400} height={1400} strokeWidth={6.5} fill="none" />];
+	let k = 0;
+	for (let i = 1; i <= 13; i += 1) {
+		parts.push(<line key={k++} x1={P(i)} y1={P(0)} x2={P(i)} y2={P(14)} />);
+		parts.push(<line key={k++} x1={P(0)} y1={P(i)} x2={P(14)} y2={P(i)} />);
+	}
+	for (const [r, c] of [[3, 3], [3, 11], [7, 7], [11, 3], [11, 11]]) {
+		parts.push(<circle key={k++} className="dgame-gomoku-star" cx={P(c)} cy={P(r)} r={15} />);
+	}
+	return parts;
+})();
 
 const SIZE = 15;
 const DIRS = [[0, 1], [1, 0], [1, 1], [1, -1]];
@@ -35,16 +51,17 @@ function patternScore(count, openEnds) {
 	if (count === 1) return openEnds === 2 ? 10 : 1;
 	return 0;
 }
-function checkWin(board, r, c, color) {
+// 返回连成五子（含以上）的坐标数组；未连成返回 null。
+function winLine(board, r, c, color) {
 	for (const [dr, dc] of DIRS) {
-		let count = 1;
+		const cells = [[r, c]];
 		let rr = r + dr, cc = c + dc;
-		while (inBoard(rr, cc) && board[rr][cc] === color) { count += 1; rr += dr; cc += dc; }
+		while (inBoard(rr, cc) && board[rr][cc] === color) { cells.push([rr, cc]); rr += dr; cc += dc; }
 		rr = r - dr; cc = c - dc;
-		while (inBoard(rr, cc) && board[rr][cc] === color) { count += 1; rr -= dr; cc -= dc; }
-		if (count >= 5) return true;
+		while (inBoard(rr, cc) && board[rr][cc] === color) { cells.push([rr, cc]); rr -= dr; cc -= dc; }
+		if (cells.length >= 5) return cells;
 	}
-	return false;
+	return null;
 }
 function boardFull(board) {
 	for (const row of board) for (const cell of row) if (!cell) return false;
@@ -90,10 +107,13 @@ export function GomokuGame(props) {
 	const [board, setBoard] = useState(emptyBoard);
 	const [turn, setTurn] = useState("b");
 	const [winner, setWinner] = useState(null);
+	const [winCells, setWinCells] = useState(null);
+	const [showResult, setShowResult] = useState(false);
 	const [last, setLast] = useState(null);
 	const [history, setHistory] = useState([]);
 	const [thinking, setThinking] = useState(false);
 	const boardRef = useRef(board);
+	const stageRef = useRef(null);
 	boardRef.current = board;
 	const turnRef = useRef(turn);
 	turnRef.current = turn;
@@ -101,8 +121,10 @@ export function GomokuGame(props) {
 	winRef.current = winner;
 
 	const finish = useCallback((b, r, c, color) => {
-		if (checkWin(b, r, c, color)) setWinner(color);
-		else if (boardFull(b)) setWinner("draw");
+		const line = winLine(b, r, c, color);
+		if (line) { setWinner(color); setWinCells(line); setShowResult(true); playSfx(color === "b" ? "win" : "over"); }
+		else if (boardFull(b)) { setWinner("draw"); setWinCells(null); setShowResult(true); playSfx("clear"); }
+		else playSfx("stone");
 	}, []);
 
 	const place = useCallback((r, c, color) => {
@@ -137,39 +159,86 @@ export function GomokuGame(props) {
 	}, [thinking, place]);
 
 	const reset = useCallback(() => {
-		setBoard(emptyBoard()); setTurn("b"); setWinner(null); setLast(null); setHistory([]); setThinking(false);
+		setBoard(emptyBoard()); setTurn("b"); setWinner(null); setWinCells(null); setShowResult(false); setLast(null); setHistory([]); setThinking(false);
 	}, []);
 	const undo = useCallback(() => {
-		if (winner || thinking || history.length < 2) return;
-		// 回退两步：撤掉 AI 与玩家。
+		if (thinking || history.length < 2) return;
+		// 回退两步：撤掉 AI 与玩家（对局结束后也允许撤回继续）。
 		const h = history.slice(0, -2);
 		const next = emptyBoard();
 		for (const m of h) next[m.r][m.c] = m.color;
 		setBoard(next); boardRef.current = next;
-		setHistory(h); setTurn("b"); setWinner(null); setLast(h.length ? h[h.length - 1] : null);
-	}, [history, winner, thinking]);
+		setHistory(h); setTurn("b"); setWinner(null); setWinCells(null); setShowResult(false);
+		setLast(h.length ? h[h.length - 1] : null);
+	}, [history, thinking]);
+
+	const onKeyDown = useCallback((event) => {
+		if (event.key.toLowerCase() === "r") { event.preventDefault(); reset(); }
+		else if (event.key.toLowerCase() === "u") { event.preventDefault(); undo(); }
+	}, [reset, undo]);
+	useGameControls(stageRef, props.paused, onKeyDown);
 
 	const statusText = winner === "b" ? "你赢了 · 五子连珠" : winner === "w" ? "AI 赢了 · 再试一次" : winner === "draw" ? "和棋 · 棋盘已满" : (turn === "b" ? "轮到你落子（黑）" : "AI 思考中…（白）");
 
 	return <section className="dgame-game" aria-label="五子棋">
 		<div className="dgame-game-head"><div><h3>五子棋</h3><p>你执黑先手，AI 执白；先在横竖斜任一线连成五子者胜。</p></div><div className="dgame-score"><span>回合</span><strong className="dg-gomoku-status">{statusText}</strong><button type="button" onClick={undo}>撤销</button><button type="button" onClick={reset}>重开</button></div></div>
-		<div className="dgame-gomoku-board" role="grid" aria-label="十五路五子棋棋盘">
-			{board.map((row, r) => row.map((cell, c) => (
-				<button type="button" key={r + "-" + c} role="gridcell" className={"dgame-gomoku-cell" + (cell ? " filled " + cell : "") + (last && last.r === r && last.c === c ? " last" : "")}
+		<div className="dgame-gomoku-board" ref={stageRef} tabIndex={0} onKeyDown={onKeyDown} onClick={() => focusStage(stageRef)} role="grid" aria-label="十五路五子棋棋盘">
+			<svg className="dgame-gomoku-lines" viewBox="0 0 1500 1500" preserveAspectRatio="none" aria-hidden="true">{GOMOKU_LINES}</svg>
+			{board.map((row, r) => row.map((cell, c) => {
+				const isWin = winCells && winCells.some(([wr, wc]) => wr === r && wc === c);
+				return <button type="button" key={r + "-" + c} role="gridcell" className={"dgame-gomoku-cell" + (cell ? " filled " + cell : "") + (last && last.r === r && last.c === c ? " last" : "") + (isWin ? " wincell" : "")}
 					aria-label={"第" + (r + 1) + "行第" + (c + 1) + "列" + (cell === "b" ? " 黑子" : cell === "w" ? " 白子" : " 空格")}
-					onClick={() => onCell(r, c)}>{cell ? <i className={"dgame-gomoku-stone " + cell} /> : null}</button>
-			)))}
+					onClick={() => { focusStage(stageRef); onCell(r, c); }}>{cell ? <i className={"dgame-gomoku-stone " + (cell === "b" ? "black" : "white")} /> : null}</button>;
+			}))}
+			{winner && showResult ? (
+				<div className="dgame-gomoku-result" role="status">
+					<div className={"dgame-gomoku-result-card " + winner}>
+						<span className="dgame-gomoku-result-icon" aria-hidden="true">{winner === "b" ? "🎉" : winner === "w" ? "🤖" : "🤝"}</span>
+						<strong>{winner === "b" ? "你赢了！" : winner === "w" ? "AI 赢了" : "和棋"}</strong>
+						<p>{winner === "b" ? "五子连珠，漂亮！" : winner === "w" ? "再接再厉，卷土重来。" : "棋盘已满，平分秋色。"}</p>
+						<div className="dgame-gomoku-result-actions">
+							<button type="button" onClick={(e) => { e.stopPropagation(); setShowResult(false); }}>查看棋盘</button>
+							<button type="button" onClick={(e) => { e.stopPropagation(); reset(); }}>再来一局</button>
+						</div>
+					</div>
+				</div>
+			) : null}
 		</div>
 		<div className="dgame-controls"><button type="button" onClick={undo}>撤销</button><span>{statusText}</span><button type="button" onClick={reset}>重开</button></div>
 	</section>;
 }
 
 export function GomokuPreview() {
+	// 迷你 9 路棋盘：木纹 + 加粗外框 + 星位 + 黑白对弈石子，与真实棋盘同款画法。
+	const P = (n) => n * 100 + 50;
+	const stones = [[3, 3, "b"], [6, 3, "w"], [4, 4, "w"], [5, 5, "b"], [2, 6, "w"], [6, 6, "b"]];
 	return <span className="dgcov-prev dgcov-prev-gomoku" aria-hidden="true">
-		{[[6, 6], [7, 7], [8, 8], [9, 9], [7, 8], [8, 7]].map(([r, c], i) => <i key={i} style={{ left: (c + 1) * 10 + "%", top: (r + 1) * 9.5 + "%" }} className={i % 3 === 0 || i === 5 ? "black" : "white"} />)}
+		<svg viewBox="0 0 900 900" preserveAspectRatio="xMidYMid slice">
+			<rect x={P(0)} y={P(0)} width={800} height={800} fill="none" strokeWidth={11} />
+			{[1, 2, 3, 4, 5, 6, 7].map((i) => [
+				<line key={"v" + i} x1={P(i)} y1={P(0)} x2={P(i)} y2={P(8)} />,
+				<line key={"h" + i} x1={P(0)} y1={P(i)} x2={P(8)} y2={P(i)} />,
+			])}
+			<circle className="dgp-star" cx={P(4)} cy={P(4)} r={16} />
+			{stones.map(([r, c, col], i) => <circle key={i} className={"dgp-stone-" + col} cx={P(c)} cy={P(r)} r={40} />)}
+		</svg>
 	</span>;
 }
 
 export const gomokuGame = { Game: GomokuGame, Preview: GomokuPreview, css: `
-.dgame-gomoku-board{display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);align-self:center;width:min(100%,320px);aspect-ratio:1/1;padding:6px;border-radius:8px;background:linear-gradient(135deg,#d9a441,#c08a2c);border:1px solid color-mix(in srgb,#8a5a1c 60%,transparent);box-shadow:0 4px 18px rgb(0 0 0/.35),inset 0 0 0 2px rgba(0,0,0,.18);background-image:repeating-linear-gradient(90deg,transparent 0 calc(100%/14),rgba(0,0,0,.16) calc(100%/14) calc(100%/14 + 1px)),repeating-linear-gradient(0deg,transparent 0 calc(100%/14),rgba(0,0,0,.16) calc(100%/14) calc(100%/14 + 1px))}.dgame-gomoku-cell{position:relative;background:transparent;border:none;cursor:pointer;padding:0;margin:0;outline:none}.dgame-gomoku-cell:focus-visible::after{content:'';position:absolute;inset:8%;border:2px solid rgba(255,255,255,.7);border-radius:50%}.dgame-gomoku-stone{position:absolute;inset:12%;border-radius:50%;display:block}.dgame-gomoku-stone.black{background:radial-gradient(circle at 34% 30%,#4b5563,#111827 68%);box-shadow:0 2px 5px rgb(0 0 0/.5),inset 0 1px 1px rgba(255,255,255,.25)}.dgame-gomoku-stone.white{background:radial-gradient(circle at 34% 30%,#ffffff,#cbd5e1 70%);box-shadow:0 2px 5px rgb(0 0 0/.4),inset 0 1px 1px rgba(255,255,255,.9)}.dgame-gomoku-cell.last .dgame-gomoku-stone::after{content:'';position:absolute;inset:32%;border-radius:50%;background:rgba(255,80,80,.9)}.dg-gomoku-status{font-size:12px;color:var(--dsw-alias-label-tertiary)}
+.dgame-gomoku-board{position:relative;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);align-self:center;width:min(100%,min(90vw,330px));aspect-ratio:1/1;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,#7c4f16 65%,transparent);box-shadow:0 12px 32px rgb(0 0 0/.5),inset 0 1px 0 rgba(255,236,200,.55),inset 0 -3px 9px rgba(90,50,10,.35),inset 3px 0 8px rgba(255,224,170,.28),inset -3px 0 8px rgba(120,70,20,.25);outline:none;background:repeating-linear-gradient(94deg,rgba(124,79,22,.05) 0 2px,transparent 2px 11px),repeating-linear-gradient(87deg,rgba(255,238,196,.05) 0 2px,transparent 2px 14px),radial-gradient(120% 110% at 30% 10%,#edc97f,#dcae62 52%,#cc9a52 80%,#bb8844)}.dgame-gomoku-lines{position:absolute;inset:12px;pointer-events:none}.dgame-gomoku-lines line{stroke:#66431a;stroke-width:3;fill:none}.dgame-gomoku-star{fill:#66431a}.dgame-gomoku-cell{position:relative;z-index:1;background:transparent;border:none;cursor:pointer;padding:0;margin:0;outline:none;min-width:0;min-height:0}.dgame-gomoku-cell:focus-visible::after{content:'';position:absolute;inset:8%;border:2px solid rgba(255,255,255,.7);border-radius:50%}.dgame-gomoku-stone{position:absolute;inset:10%;border-radius:50%;display:block}.dgame-gomoku-stone.black{background:radial-gradient(circle at 34% 30%,#4b5563,#111827 68%);box-shadow:0 2px 5px rgb(0 0 0/.5),inset 0 1px 1px rgba(255,255,255,.25)}.dgame-gomoku-stone.white{background:radial-gradient(circle at 34% 30%,#ffffff,#cbd5e1 70%);box-shadow:0 2px 5px rgb(0 0 0/.4),inset 0 1px 1px rgba(255,255,255,.9)}.dgame-gomoku-cell.last .dgame-gomoku-stone::after{content:'';position:absolute;inset:32%;border-radius:50%;background:rgba(255,80,80,.9)}.dg-gomoku-status{font-size:12px;color:var(--dsw-alias-label-tertiary)}
+.dgame-gomoku-cell.wincell .dgame-gomoku-stone{animation:dg-gomoku-win 1s ease-in-out infinite;z-index:1}
+@keyframes dg-gomoku-win{0%,100%{box-shadow:0 2px 5px rgb(0 0 0/.5),0 0 0 0 rgba(255,214,102,.85)}50%{box-shadow:0 2px 5px rgb(0 0 0/.5),0 0 0 6px rgba(255,214,102,0)}}
+.dgame-gomoku-result{position:absolute;inset:-1px;z-index:5;display:grid;place-items:center;background:rgba(10,10,20,.55);backdrop-filter:blur(2px);border-radius:8px;animation:dg-gomoku-fade .25s ease-out}
+.dgame-gomoku-result-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 26px;border-radius:14px;background:linear-gradient(160deg,#241f38,#171427);border:1px solid color-mix(in srgb,var(--dgame-accent,#a78bfa) 45%,transparent);box-shadow:0 12px 40px rgb(0 0 0/.55),0 0 0 4px rgba(167,139,250,.08);animation:dg-gomoku-pop .35s cubic-bezier(.22,1.6,.36,1);text-align:center}
+.dgame-gomoku-result-card strong{font-size:18px;color:#fff}
+.dgame-gomoku-result-card.b strong{color:#fbbf24}.dgame-gomoku-result-card.w strong{color:#e5e7eb}.dgame-gomoku-result-card.draw strong{color:#cbd5e1}
+.dgame-gomoku-result-icon{font-size:28px;line-height:1;animation:dg-gomoku-bounce 1.2s ease-in-out infinite}
+.dgame-gomoku-result-card p{margin:0;font-size:12px;color:var(--dsw-alias-label-tertiary,#9ca3af)}
+.dgame-gomoku-result-actions{display:flex;gap:10px;margin-top:6px}
+.dgame-gomoku-result-actions button{padding:6px 14px;border-radius:8px;border:1px solid color-mix(in srgb,var(--dgame-accent,#a78bfa) 40%,transparent);background:rgba(167,139,250,.14);color:#ede9fe;font-size:13px;cursor:pointer}
+.dgame-gomoku-result-actions button:hover{background:rgba(167,139,250,.28)}
+@keyframes dg-gomoku-fade{from{opacity:0}to{opacity:1}}
+@keyframes dg-gomoku-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
+@keyframes dg-gomoku-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
 ` };

package/features/games/games/racer.jsx

@@ -1,5 +1,6 @@
 /* 趣味游戏 · 极速赛车（经典机台）——纯 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;
@@ -144,15 +145,12 @@ export function RacerGame(props) {
 		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));
 	}, []);
-	useEffect(() => {
-		if (pausedRef.current) return;
-		if (canvasRef.current) canvasRef.current.focus();
-	}, [props.paused]);
+	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} className="dgame-racer-canvas" aria-label="极速赛车游戏区域，左右方向键或鼠标控制方向" />
+			<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>

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

@@ -1,9 +1,19 @@
 /* 趣味游戏 · 贪吃蛇（经典机台）——纯 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 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) {
@@ -13,7 +23,7 @@ function randFood(snake) {
 }
 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 };
+	return { snake, dir: [0, 1], food: randFood(snake), score: 0, over: false, started: false };
 }
 function step(state, dir) {
 	const head = state.snake[0];
@@ -25,6 +35,7 @@ function step(state, dir) {
 	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 });
 	}
@@ -35,38 +46,56 @@ function step(state, dir) {
 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(); dirRef.current = init.dir; setState(init); setPaused(false); }, []);
+	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 || pausedRef.current) return;
-		const speed = Math.max(70, 150 - state.score * 5);
-		const timer = setInterval(() => setState((s) => (s.over || pausedRef.current ? s : step(s, dirRef.current))), speed);
-		return () => clearInterval(timer);
-	}, [state.over, state.score, props.paused, paused]);
+		if (state.over) playSfx("over");
+	}, [state.over]);
 
 	useEffect(() => {
-		if (pausedRef.current || state.over) return;
-		if (stageRef.current) stageRef.current.focus();
-	}, [state.over, props.paused, paused]);
+		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]);
+	}, [changeDir, start, state.started]);
+
+	useGameControls(stageRef, pausedRef.current, onKeyDown);
 
 	const cells = [];
 	for (let r = 0; r < SIZE; r += 1) {
@@ -81,13 +110,20 @@ export function SnakeGame(props) {
 	}
 
 	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-stage" ref={stageRef} tabIndex={0} onKeyDown={onKeyDown} 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.over && pausedRef.current ? <div className="dgame-over"><strong>已暂停</strong><button type="button" onClick={() => setPaused(false)}>继续（P）</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 · P 暂停 · R 重开</span><button type="button" aria-label="向下" onClick={() => changeDir([1, 0])}>↓</button></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>;
 }
 
@@ -99,5 +135,10 @@ export function SnakePreview() {
 }
 
 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)}
 ` };