wyf027 · wyf027 · Jul 5, 2026 · Jul 4, 2026 · Jul 5, 2026
diff --git a/project/classic-games/20260705-0715-kenken.html b/project/classic-games/20260705-0715-kenken.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Mini KenKen</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="min-h-screen bg-slate-950 text-slate-100">
+  <main class="mx-auto flex min-h-screen max-w-3xl flex-col gap-4 px-4 py-5">
+    <header class="flex flex-wrap items-center justify-between gap-3">
+      <div>
+        <h1 class="text-2xl font-semibold tracking-normal">Mini KenKen</h1>
+        <p class="text-sm text-slate-400">点击格子循环 1-3；每行每列不重复，并满足左上角笼子运算。</p>
+      </div>
+      <button id="resetBtn" class="rounded bg-violet-400 px-4 py-2 text-sm font-semibold text-slate-950 hover:bg-violet-300">重开</button>
+    </header>
+
+    <section class="grid grid-cols-3 gap-3">
+      <div class="rounded border border-slate-700 bg-slate-900 p-3">
+        <div class="text-xs uppercase text-slate-500">已填</div>
+        <div id="filledCount" class="text-2xl font-semibold">0</div>
+      </div>
+      <div class="rounded border border-slate-700 bg-slate-900 p-3">
+        <div class="text-xs uppercase text-slate-500">错误</div>
+        <div id="errorCount" class="text-2xl font-semibold">0</div>
+      </div>
+      <div class="rounded border border-slate-700 bg-slate-900 p-3">
+        <div class="text-xs uppercase text-slate-500">状态</div>
+        <div id="stateLabel" class="text-2xl font-semibold">进行</div>
+      </div>
+    </section>
+
+    <section class="rounded border border-slate-700 bg-slate-900 p-4">
+      <div class="mb-4 flex items-center justify-between gap-3">
+        <h2 class="text-lg font-semibold">3 x 3 题面</h2>
+        <span id="message" class="text-sm text-violet-300">每行每列必须包含 1、2、3。</span>
+      </div>
+      <div id="board" class="mx-auto grid max-w-sm grid-cols-3 gap-1"></div>
+    </section>
+  </main>
+
+  <script>
+    const boardEl = document.getElementById("board");
+    const filledCountEl = document.getElementById("filledCount");
+    const errorCountEl = document.getElementById("errorCount");
+    const stateLabelEl = document.getElementById("stateLabel");
+    const messageEl = document.getElementById("message");
+    const resetBtn = document.getElementById("resetBtn");
+
+    const size = 3;
+    const cages = [
+      { label: "3+", cells: [[0, 0], [0, 1]], target: 3, op: "+" },
+      { label: "3", cells: [[0, 2]], target: 3, op: "=" },
+      { label: "5+", cells: [[1, 0], [2, 0]], target: 5, op: "+" },
+      { label: "4+", cells: [[1, 1], [1, 2]], target: 4, op: "+" },
+      { label: "3+", cells: [[2, 1], [2, 2]], target: 3, op: "+" }
+    ];
+    let board = [];
+    let solved = false;
+
+    function resetGame() {
+      board = Array.from({ length: size }, () => Array(size).fill(0));
+      solved = false;
+      setMessage("每行每列必须包含 1、2、3。");
+      render();
+    }
+
+    function setMessage(text) {
+      messageEl.textContent = text;
+    }
+
+    function cycleCell(row, col) {
+      if (solved) return;
+      board[row][col] = (board[row][col] + 1) % 4;
+      const errors = getErrors();
+      if (isComplete() && errors.length === 0) {
+        solved = true;
+        setMessage("完成。");
+      } else if (errors.length) {
+        setMessage("有行列或笼子不满足。");
+      } else {
+        setMessage("继续填写。");
+      }
+      render();
+    }
+
+    function isComplete() {
+      return board.flat().every((value) => value > 0);
+    }
+
+    function cageFor(row, col) {
+      return cages.find((cage) => cage.cells.some(([r, c]) => r === row && c === col));
+    }
+
+    function cageLabel(row, col) {
+      const cage = cageFor(row, col);
+      if (!cage) return "";
+      const [firstRow, firstCol] = cage.cells[0];
+      return firstRow === row && firstCol === col ? cage.label : "";
+    }
+
+    function validSet(values) {
+      const filled = values.filter(Boolean);
+      return new Set(filled).size === filled.length;
+    }
+
+    function cageSatisfied(cage) {
+      const values = cage.cells.map(([row, col]) => board[row][col]);
+      if (values.some((value) => value === 0)) return true;
+      if (cage.op === "=") return values[0] === cage.target;
+      if (cage.op === "+") return values.reduce((sum, value) => sum + value, 0) === cage.target;
+      if (cage.op === "/") {
+        const [a, b] = values.sort((x, y) => y - x);
+        return a / b === cage.target;
+      }
+      return false;
+    }
+
+    function getErrors() {
+      const errors = [];
+      for (let i = 0; i < size; i += 1) {
+        const rowValues = board[i];
+        const colValues = board.map((row) => row[i]);
+        if (!validSet(rowValues)) errors.push(`r${i}`);
+        if (!validSet(colValues)) errors.push(`c${i}`);
+      }
+      cages.forEach((cage, index) => {
+        if (!cageSatisfied(cage)) errors.push(`k${index}`);
+      });
+      return errors;
+    }
+
+    function isCellError(row, col) {
+      const errors = getErrors();
+      const rowError = errors.includes(`r${row}`);
+      const colError = errors.includes(`c${col}`);
+      const cageIndex = cages.findIndex((cage) => cage.cells.some(([r, c]) => r === row && c === col));
+      return rowError || colError || errors.includes(`k${cageIndex}`);
+    }
+
+    function renderCell(row, col) {
+      const button = document.createElement("button");
+      const value = board[row][col];
+      button.type = "button";
+      button.className = "relative aspect-square rounded border border-slate-700 bg-slate-800 text-4xl font-semibold hover:border-violet-300";
+      if ((row + col) % 2 === 0) button.classList.add("bg-slate-700");
+      if (value && isCellError(row, col)) button.classList.add("ring-4", "ring-red-400");
+      if (solved) button.classList.add("ring-4", "ring-emerald-300");
+      button.textContent = value || "";
+      const label = document.createElement("span");
+      label.className = "absolute left-1 top-1 text-xs font-semibold text-violet-300";
+      label.textContent = cageLabel(row, col);
+      button.appendChild(label);
+      button.addEventListener("click", () => cycleCell(row, col));
+      return button;
+    }
+
+    function render() {
+      boardEl.innerHTML = "";
+      for (let row = 0; row < size; row += 1) {
+        for (let col = 0; col < size; col += 1) {
+          boardEl.appendChild(renderCell(row, col));
+        }
+      }
+      filledCountEl.textContent = board.flat().filter(Boolean).length;
+      errorCountEl.textContent = getErrors().length;
+      stateLabelEl.textContent = solved ? "完成" : "进行";
+    }
+
+    resetBtn.addEventListener("click", resetGame);
+    resetGame();
+  </script>
+</body>
+</html>