feat: add snek game pixel stream example

2025-10-03 21:20:10 +02:00
parent 1383f6d32f
commit be1a2f1e21
5 changed files with 1752 additions and 0 deletions
--- a/test/pixelstream/snek/public/index.html
+++ b/test/pixelstream/snek/public/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Snek 16x16</title>
+  <style>
+    :root {
+      color-scheme: dark;
+    }
+    body {
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+      background: #0b0b0b;
+      color: #e8e8e8;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      margin: 0;
+      padding: 24px 12px;
+    }
+    h2 { margin: 0 0 4px 0; font-weight: 600; }
+    #board {
+      width: 640px;  /* make it big */
+      height: 640px; /* make it big */
+      image-rendering: pixelated;
+      border: 1px solid #333;
+      background: #000;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    }
+    .hud {
+      display: flex;
+      gap: 20px;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .status {
+      display: inline-flex;
+      gap: 8px;
+      align-items: center;
+    }
+    .dot { width: 10px; height: 10px; border-radius: 50%; background: #a33; }
+    .dot.ok { background: #3a3; }
+    .pill { padding: 2px 8px; border: 1px solid #333; border-radius: 999px; font-size: 12px; }
+    .hint { color: #aaa; font-size: 12px; }
+  </style>
+</head>
+<body>
+  <h2>16×16 Snek</h2>
+  <div class="hud">
+    <div>Score: <span id="score">0</span></div>
+    <div class="status"><span class="dot" id="ws-dot"></span><span class="pill" id="ws-label">WS: connecting…</span></div>
+  </div>
+  <canvas id="board" width="16" height="16"></canvas>
+  <div class="hint">Arrow keys to move. Space to restart.</div>
+  <script src="app.js"></script>
+</body>
+</html>