Skip to content

Commit f90d262

Browse files
tyuecodetyuecode
committed
feat: 新增「游戏厅 Arcade」——三个能直接玩的经典游戏
延续实验室的「可玩」气质，但更进一步：不是演示，是真能上手玩。 新增 /arcade/，三个纯前端游戏（Canvas/DOM + 原生 JS，零依赖，可离线）： 1. 贪吃蛇：方向键/WASD 控制，空格暂停，最高分存 localStorage 2. 俄罗斯方块：←→移动、↑旋转、↓加速、空格落下，P 暂停，含「下一个」预览 3. 2048：方向键滑动合并，支持触屏滑动，最高分存 localStorage 全部有分数/最高分记忆、游戏结束弹层、再来一局按钮。 首页 hero 加「打会儿游戏」入口，导航/页脚同步。
1 parent 90c473e commit f90d262

5 files changed

Lines changed: 834 additions & 1 deletion

File tree

‎_layouts/default.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ <h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repo
2727

2828
<nav class="site-nav">
2929
<a href="{{ "/lab/" | relative_url }}">🧪 实验室</a>
30+
<a href="{{ "/arcade/" | relative_url }}">🕹️ 游戏厅</a>
3031
<a href="{{ "/search/" | relative_url }}">搜索</a>
3132
<a href="{{ "/reading/" | relative_url }}">好文推荐</a>
3233
<a href="{{ "/stats/" | relative_url }}">数据</a>
@@ -62,6 +63,7 @@ <h1><a href="{{ "/" | absolute_url }}">{{ site.title | default: site.github.repo
6263
<a href="{{ "/tags/" | relative_url }}">标签</a> ·
6364
<a href="{{ "/search/" | relative_url }}">搜索</a> ·
6465
<a href="{{ "/lab/" | relative_url }}">实验室</a> ·
66+
<a href="{{ "/arcade/" | relative_url }}">游戏厅</a> ·
6567
<a href="{{ "/reading/" | relative_url }}">好文推荐</a> ·
6668
<a href="{{ "/stats/" | relative_url }}">数据</a> ·
6769
<a href="{{ "/random/" | relative_url }}">手气不错</a> ·

‎arcade.md‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: 游戏厅
3+
layout: default
4+
permalink: /arcade/
5+
---
6+
7+
<h1>游戏厅 <span class="lab-badge">Arcade</span></h1>
8+
<p class="page-desc">三个能直接玩的经典游戏，纯前端、零依赖、可离线。最高分会存在你的浏览器里。</p>
9+
10+
<div class="lab-tabs" role="tablist">
11+
<button class="lab-tab active" data-arcade="snake" role="tab" aria-selected="true">🐍 贪吃蛇</button>
12+
<button class="lab-tab" data-arcade="tetris" role="tab" aria-selected="false">🧱 俄罗斯方块</button>
13+
<button class="lab-tab" data-arcade="2048" role="tab" aria-selected="false">🔢 2048</button>
14+
</div>
15+
16+
<!-- 贪吃蛇 -->
17+
<section class="lab-panel active" data-arcade-panel="snake">
18+
<p class="lab-hint">方向键或 WASD 控制。吃到食物变长，别撞墙、别咬到自己。空格暂停。</p>
19+
<div class="arcade-stage">
20+
<canvas id="snake-canvas" class="lab-canvas arcade-canvas"></canvas>
21+
<div class="arcade-overlay" id="snake-overlay" hidden>
22+
<div class="arcade-overlay-box">
23+
<div class="arcade-overlay-emoji">💀</div>
24+
<p class="arcade-overlay-title">游戏结束</p>
25+
<p class="arcade-overlay-sub" id="snake-overlay-sub"></p>
26+
<button class="lab-btn" id="snake-restart" type="button">再来一局</button>
27+
</div>
28+
</div>
29+
</div>
30+
<div class="lab-controls">
31+
<button class="lab-btn" data-snake="restart">重新开始</button>
32+
<button class="lab-btn" data-snake="pause">暂停/继续</button>
33+
<span class="lab-readout" id="snake-readout">分数 0 · 最高 0</span>
34+
</div>
35+
</section>
36+
37+
<!-- 俄罗斯方块 -->
38+
<section class="lab-panel" data-arcade-panel="tetris">
39+
<p class="lab-hint">← → 移动，↑ 旋转，↓ 加速，空格 直接落下。P 暂停。</p>
40+
<div class="arcade-stage">
41+
<div class="arcade-tetris-wrap">
42+
<canvas id="tetris-canvas" class="lab-canvas arcade-canvas arcade-tetris"></canvas>
43+
<div class="arcade-side">
44+
<div class="arcade-next-label">下一个</div>
45+
<canvas id="tetris-next" class="arcade-next"></canvas>
46+
</div>
47+
</div>
48+
<div class="arcade-overlay" id="tetris-overlay" hidden>
49+
<div class="arcade-overlay-box">
50+
<div class="arcade-overlay-emoji">🧱</div>
51+
<p class="arcade-overlay-title">游戏结束</p>
52+
<p class="arcade-overlay-sub" id="tetris-overlay-sub"></p>
53+
<button class="lab-btn" id="tetris-restart" type="button">再来一局</button>
54+
</div>
55+
</div>
56+
</div>
57+
<div class="lab-controls">
58+
<button class="lab-btn" data-tetris="restart">重新开始</button>
59+
<button class="lab-btn" data-tetris="pause">暂停/继续</button>
60+
<span class="lab-readout" id="tetris-readout">分数 0 · 行 0 · 等级 1</span>
61+
</div>
62+
</section>
63+
64+
<!-- 2048 -->
65+
<section class="lab-panel" data-arcade-panel="2048">
66+
<p class="lab-hint">方向键或 WASD 滑动合并相同数字，凑出 2048。支持触屏滑动。</p>
67+
<div class="arcade-stage">
68+
<div class="g2048-wrap">
69+
<div class="g2048-board" id="board-2048"></div>
70+
<div class="arcade-overlay" id="g2048-overlay" hidden>
71+
<div class="arcade-overlay-box">
72+
<div class="arcade-overlay-emoji">🎉</div>
73+
<p class="arcade-overlay-title" id="g2048-overlay-title">游戏结束</p>
74+
<p class="arcade-overlay-sub" id="g2048-overlay-sub"></p>
75+
<button class="lab-btn" id="g2048-restart" type="button">再来一局</button>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
<div class="lab-controls">
81+
<button class="lab-btn" data-g2048="restart">重新开始</button>
82+
<span class="lab-readout" id="g2048-readout">分数 0 · 最高 0</span>
83+
</div>
84+
</section>
85+
86+
<script src="{{ "/assets/js/arcade.js" | relative_url }}?v={{ site.time | date: "%s" }}"></script>

‎assets/css/style.scss‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1156,6 +1156,128 @@ kbd {
11561156
font-variant-numeric: tabular-nums;
11571157
}
11581158

1159+
/* ==========================================================================
1160+
游戏厅 Arcade
1161+
========================================================================== */
1162+
.arcade-stage {
1163+
position: relative;
1164+
max-width: 560px;
1165+
margin: 0 auto;
1166+
}
1167+
1168+
.arcade-canvas {
1169+
margin: 0 auto;
1170+
}
1171+
1172+
.arcade-overlay {
1173+
position: absolute;
1174+
inset: 0;
1175+
display: flex;
1176+
align-items: center;
1177+
justify-content: center;
1178+
background: rgba(0, 0, 0, .55);
1179+
border-radius: 6px;
1180+
}
1181+
1182+
.arcade-overlay-box {
1183+
padding: 22px 26px;
1184+
text-align: center;
1185+
background: var(--bg);
1186+
border: 1px solid var(--border);
1187+
border-radius: 10px;
1188+
box-shadow: 0 10px 32px var(--shadow);
1189+
}
1190+
1191+
.arcade-overlay-emoji {
1192+
font-size: 40px;
1193+
line-height: 1;
1194+
margin-bottom: 10px;
1195+
}
1196+
1197+
.arcade-overlay-title {
1198+
margin: 0 0 6px;
1199+
font-size: 17px;
1200+
font-weight: 700;
1201+
color: var(--heading);
1202+
}
1203+
1204+
.arcade-overlay-sub {
1205+
margin: 0 0 16px;
1206+
font-size: 13px;
1207+
color: var(--muted);
1208+
}
1209+
1210+
.arcade-tetris-wrap {
1211+
display: flex;
1212+
gap: 14px;
1213+
align-items: flex-start;
1214+
justify-content: center;
1215+
}
1216+
1217+
.arcade-tetris {
1218+
max-width: 240px;
1219+
}
1220+
1221+
.arcade-side {
1222+
display: flex;
1223+
flex-direction: column;
1224+
gap: 8px;
1225+
}
1226+
1227+
.arcade-next-label {
1228+
font-size: 12px;
1229+
color: var(--muted);
1230+
}
1231+
1232+
.arcade-next {
1233+
width: 80px;
1234+
height: 80px;
1235+
background: var(--code-bg);
1236+
border: 1px solid var(--border);
1237+
border-radius: 4px;
1238+
}
1239+
1240+
/* 2048 棋盘 */
1241+
.g2048-wrap {
1242+
position: relative;
1243+
max-width: 400px;
1244+
margin: 0 auto;
1245+
}
1246+
1247+
.g2048-board {
1248+
display: grid;
1249+
grid-template-columns: repeat(4, 1fr);
1250+
gap: 10px;
1251+
padding: 10px;
1252+
background: var(--panel);
1253+
border: 1px solid var(--border);
1254+
border-radius: 8px;
1255+
}
1256+
1257+
.g2048-cell {
1258+
aspect-ratio: 1;
1259+
display: flex;
1260+
align-items: center;
1261+
justify-content: center;
1262+
font-size: 28px;
1263+
font-weight: 700;
1264+
color: #776e65;
1265+
background: var(--inline-code-bg);
1266+
border-radius: 4px;
1267+
}
1268+
1269+
.g2048-cell-2 { background: #eee4da; }
1270+
.g2048-cell-4 { background: #ede0c8; }
1271+
.g2048-cell-8 { background: #f2b179; }
1272+
.g2048-cell-16 { background: #f59563; }
1273+
.g2048-cell-32 { background: #f67c5f; }
1274+
.g2048-cell-64 { background: #f65e3b; }
1275+
.g2048-cell-128 { background: #edcf72; font-size: 24px; }
1276+
.g2048-cell-256 { background: #edcc61; font-size: 24px; }
1277+
.g2048-cell-512 { background: #edc850; font-size: 24px; }
1278+
.g2048-cell-1024 { background: #edc53f; font-size: 20px; }
1279+
.g2048-cell-2048 { background: #edc22e; font-size: 20px; }
1280+
11591281
/* ==========================================================================
11601282
打印
11611283
========================================================================== */

0 commit comments

Comments
 (0)