Add playable Snake game at /snake/

_includes/header.html

@@ -9,6 +9,9 @@
         <link rel="stylesheet" href="{{ site.baseurl }}/css/default.css" type="text/css" />
         <link rel="stylesheet" href="{{ site.baseurl }}/css/small.css" type="text/css" media="(max-width: 720px)"/>
         <link rel="stylesheet" href="{{ site.baseurl }}/css/syntax.css" type="text/css" />
+        {% if page.extra_css %}
+        <link rel="stylesheet" href="{{ site.baseurl }}{{ page.extra_css }}" type="text/css" />
+        {% endif %}
         <link rel="shortcut icon" href="{{ site.baseurl }}/favicon.ico" type="image/x-icon" />
         <!-- Global site tag (gtag.js) - Google Analytics -->
         <script async src="https://www.googletagmanager.com/gtag/js?id=G-DJ678YCF2C"></script>

_includes/navigation.html

@@ -3,6 +3,7 @@
         <a href="{{ root_url }}/">首页</a>
         <a href="{{ root_url }}/categories/">分类</a>
         <a href="{{ root_url }}/wiki/">维基</a>
+        <a href="{{ root_url }}/snake/">Snake</a>
         <a href="{{ root_url }}/about.html">关于</a>
     </div>
     <div class="nav_rss"><a href="{{ root_url }}/sitemap.xml" style="display:none;">SITEMAP</a><a href="{{ root_url }}/atom.xml" target="_blank">订阅</a></div>

_layouts/game.html

@@ -0,0 +1,12 @@
+{% include header.html %}
+<div id="container">
+    {% include navigation.html %}
+    <div id="main" class="game-page">
+        <h2>{{ page.title }}</h2>
+        {{ content }}
+    </div>
+</div>
+{% include footer.html %}
+{% if page.extra_js %}
+<script src="{{ site.baseurl }}{{ page.extra_js }}"></script>
+{% endif %}

css/snake.css

@@ -0,0 +1,222 @@
+/* Snake — ink & moss accents on the blog's quiet paper look */
+.game-page {
+  max-width: 100%;
+}
+
+.snake-app {
+  --snake-ink: #1e2a24;
+  --snake-moss: #2f6b52;
+  --snake-leaf: #4a9a72;
+  --snake-morsel: #c9782a;
+  --snake-board: #e8eee8;
+  --snake-grid: rgba(30, 42, 36, 0.07);
+  --snake-panel: #f7faf7;
+  --snake-line: #c5d0c5;
+  --snake-muted: #5a6b60;
+  --snake-focus: #204a87;
+
+  margin: 0 auto 1.5em;
+  max-width: 440px;
+  font-family: "Palatino Linotype", "URW Palladio L", palatino, "book antiqua", Georgia, serif;
+}
+
+.snake-hud {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.85rem;
+}
+
+.snake-score-block {
+  display: flex;
+  flex-direction: column;
+  min-width: 4.5rem;
+}
+
+.snake-label {
+  font-size: 0.7rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--snake-muted);
+  line-height: 1.2;
+}
+
+.snake-score {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: var(--snake-ink);
+  line-height: 1.15;
+  font-variant-numeric: tabular-nums;
+  transition: transform 160ms ease, color 160ms ease;
+}
+
+.snake-score.is-bump {
+  transform: scale(1.12);
+  color: var(--snake-moss);
+}
+
+.snake-btn {
+  appearance: none;
+  border: 1px solid var(--snake-line);
+  background: var(--snake-panel);
+  color: var(--snake-ink);
+  font: inherit;
+  font-size: 0.9rem;
+  padding: 0.4rem 0.9rem;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
+}
+
+.snake-btn:hover,
+.snake-btn:focus-visible {
+  background: #e3ebe3;
+  border-color: var(--snake-moss);
+  color: var(--snake-moss);
+  outline: none;
+}
+
+.snake-btn-primary {
+  background: var(--snake-moss);
+  border-color: var(--snake-moss);
+  color: #f5faf6;
+  padding: 0.55rem 1.4rem;
+  font-size: 1rem;
+}
+
+.snake-btn-primary:hover,
+.snake-btn-primary:focus-visible {
+  background: var(--snake-leaf);
+  border-color: var(--snake-leaf);
+  color: #fff;
+}
+
+.snake-stage {
+  position: relative;
+  background:
+    radial-gradient(ellipse at 30% 20%, rgba(74, 154, 114, 0.12), transparent 55%),
+    radial-gradient(ellipse at 80% 90%, rgba(201, 120, 42, 0.08), transparent 50%),
+    var(--snake-board);
+  border: 1px solid var(--snake-line);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
+  line-height: 0;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+#snake-canvas {
+  display: block;
+  width: 100%;
+  height: auto;
+  vertical-align: top;
+}
+
+.snake-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 1.25rem;
+  background: rgba(247, 250, 247, 0.88);
+  backdrop-filter: blur(2px);
+  text-align: center;
+  animation: snake-fade-in 220ms ease;
+}
+
+.snake-overlay[hidden] {
+  display: none;
+}
+
+.snake-overlay-title {
+  margin: 0;
+  font-size: 1.65rem;
+  color: var(--snake-ink);
+  line-height: 1.2;
+}
+
+.snake-overlay-msg {
+  margin: 0 0 0.75rem;
+  max-width: 16rem;
+  font-size: 0.95rem;
+  color: var(--snake-muted);
+  line-height: 1.4;
+}
+
+.snake-pad {
+  display: grid;
+  grid-template-columns: repeat(3, 3.1rem);
+  grid-template-rows: repeat(2, 2.85rem);
+  gap: 0.4rem;
+  justify-content: center;
+  margin-top: 0.85rem;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+}
+
+.snake-pad-btn {
+  appearance: none;
+  border: 1px solid var(--snake-line);
+  background: var(--snake-panel);
+  color: var(--snake-ink);
+  font-size: 0.85rem;
+  line-height: 1;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+}
+
+.snake-pad-btn[data-dir="up"] { grid-column: 2; grid-row: 1; }
+.snake-pad-btn[data-dir="left"] { grid-column: 1; grid-row: 2; }
+.snake-pad-btn[data-dir="down"] { grid-column: 2; grid-row: 2; }
+.snake-pad-btn[data-dir="right"] { grid-column: 3; grid-row: 2; }
+
+.snake-pad-btn:hover,
+.snake-pad-btn:focus-visible {
+  background: #e3ebe3;
+  border-color: var(--snake-moss);
+  color: var(--snake-moss);
+  outline: none;
+}
+
+.snake-pad-btn:active {
+  background: var(--snake-moss);
+  border-color: var(--snake-moss);
+  color: #f5faf6;
+}
+
+.snake-hint {
+  margin: 0.85rem 0 0;
+  font-size: 0.85rem;
+  color: var(--snake-muted);
+  text-align: center;
+  line-height: 1.4;
+}
+
+@keyframes snake-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 720px) {
+  .snake-app {
+    max-width: 100%;
+  }
+
+  .snake-hud {
+    flex-wrap: wrap;
+  }
+
+  .snake-hint {
+    font-size: 0.8rem;
+  }
+}