Skip to content

feat(classic-games): 新增 Mini Dawson's Kayles 小游戏 #1226

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wyf027 wants to merge 1 commit into
base: main
Choose a base branch
from
+188 −0
Open

feat(classic-games): 新增 Mini Dawson's Kayles 小游戏 #1226

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 188 additions & 0 deletions project/classic-games/20260718-0054-dawsons-kayles-lite.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Dawson's Kayles</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-zinc-950 text-zinc-100">
<main class="mx-auto flex min-h-screen w-full max-w-5xl flex-col gap-5 px-4 py-6 sm:py-8">
<header class="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
<div>
<p class="text-sm font-semibold uppercase tracking-wide text-lime-300">Classic Impartial Game</p>
<h1 class="text-3xl font-bold text-white sm:text-4xl">Mini Dawson's Kayles</h1>
</div>
<button id="resetBtn" class="rounded-md bg-lime-400 px-4 py-2 text-sm font-bold text-zinc-950 transition hover:bg-lime-300">
New Game
</button>
</header>

<section class="grid gap-4 lg:grid-cols-[1fr_18rem]">
<div class="rounded-lg border border-zinc-800 bg-zinc-900 p-4 shadow-2xl shadow-lime-950/20">
<div id="lane" class="grid grid-cols-5 gap-2 sm:grid-cols-10"></div>
</div>

<aside class="flex flex-col gap-4">
<div class="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
<h2 class="text-lg font-semibold text-white">Status</h2>
<p id="message" class="mt-2 min-h-16 text-sm leading-6 text-zinc-300"></p>
</div>

<div class="grid grid-cols-3 gap-2 text-center lg:grid-cols-1">
<div class="rounded-lg border border-zinc-800 bg-zinc-900 p-3">
<p class="text-xs uppercase tracking-wide text-zinc-500">You</p>
<p id="humanMoves" class="mt-1 text-2xl font-bold text-lime-300">0</p>
</div>
<div class="rounded-lg border border-zinc-800 bg-zinc-900 p-3">
<p class="text-xs uppercase tracking-wide text-zinc-500">AI</p>
<p id="aiMoves" class="mt-1 text-2xl font-bold text-rose-300">0</p>
</div>
<div class="rounded-lg border border-zinc-800 bg-zinc-900 p-3">
<p class="text-xs uppercase tracking-wide text-zinc-500">Open</p>
<p id="openCount" class="mt-1 text-2xl font-bold text-cyan-300">15</p>
</div>
</div>

<div class="rounded-lg border border-zinc-800 bg-zinc-900 p-4 text-sm leading-6 text-zinc-300">
<p>Choose one open pin. That pin and its immediate neighbors become unavailable. If your turn starts with no open pin, you lose.</p>
</div>
</aside>
</section>
</main>

<script>
const pinCount = 15;
const lane = document.getElementById("lane");
const message = document.getElementById("message");
const humanMoves = document.getElementById("humanMoves");
const aiMoves = document.getElementById("aiMoves");
const openCount = document.getElementById("openCount");
const resetBtn = document.getElementById("resetBtn");

let board = [];
let locked = false;
let done = false;
let scores = { H: 0, A: 0 };

function startGame() {
board = Array.from({ length: pinCount }, () => "");
locked = false;
done = false;
scores = { H: 0, A: 0 };
setMessage("Your move. Pick a pin that leaves the AI with awkward gaps.");
render();
}

function legalMoves() {
return board
.map((cell, index) => cell === "" ? index : -1)
.filter((index) => index >= 0);
}

function applyMove(index, owner) {
board[index] = owner;
scores[owner] += 1;
[index - 1, index + 1].forEach((neighbor) => {
if (neighbor >= 0 && neighbor < pinCount && board[neighbor] === "") {
board[neighbor] = "X";
}
});
}

function chooseCell(index) {
if (locked || done || board[index] !== "") return;
applyMove(index, "H");
if (finishIfNoMoves("You win. The AI has no legal pin left.")) return;
locked = true;
setMessage("AI is choosing a pin...");
render();
window.setTimeout(runAiTurn, 260);

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 17, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Cancel stale AI timeouts on reset

Because this timeout is not stored/cancelled or tied to a game generation, pressing New Game during the 260 ms AI delay resets the board while the old callback still runs against the fresh state. In that scenario the AI immediately makes a move in the new game, or interleaves with the player's first move, corrupting the reset game; clear the pending timeout or ignore stale callbacks when startGame() runs.

Useful? React with 👍 / 👎.

}

function runAiTurn() {
const move = chooseAiMove();
if (move !== undefined) applyMove(move, "A");
locked = false;
if (!finishIfNoMoves("AI wins. You have no legal pin left.")) {
setMessage("Your move. Try to split the row into losing fragments.");
}
render();
}

function chooseAiMove() {
return legalMoves()
.map((index) => ({ index, score: scoreMove(index) }))
.sort((a, b) => b.score - a.score)[0]?.index;
}

function scoreMove(index) {
const copy = board.slice();
copy[index] = "A";
[index - 1, index + 1].forEach((neighbor) => {
if (neighbor >= 0 && neighbor < pinCount && copy[neighbor] === "") copy[neighbor] = "X";
});
const runs = openRuns(copy);
const singletons = runs.filter((run) => run === 1).length;
const options = copy.filter((cell) => cell === "").length;
return singletons * 6 - options + (index % 2 === 0 ? 1 : 0);
}

function openRuns(cells) {
const runs = [];
let current = 0;
cells.forEach((cell) => {
if (cell === "") {
current += 1;
} else if (current) {
runs.push(current);
current = 0;
}
});
if (current) runs.push(current);
return runs;
}

function finishIfNoMoves(text) {
if (legalMoves().length > 0) {
render();
return false;
}
done = true;
locked = true;
setMessage(text);
render();
return true;
}

function setMessage(text) {
message.textContent = text;
}

function render() {
lane.innerHTML = "";
board.forEach((cell, index) => {
const button = document.createElement("button");
button.type = "button";
button.className = [
"aspect-square rounded-md border text-lg font-black transition sm:text-xl",
cell === "" ? "border-zinc-700 bg-zinc-950 hover:border-lime-300 hover:bg-zinc-800" : "",
cell === "H" ? "border-lime-300 bg-lime-400 text-zinc-950 shadow-lg shadow-lime-500/20" : "",
cell === "A" ? "border-rose-300 bg-rose-400 text-zinc-950 shadow-lg shadow-rose-500/20" : "",
cell === "X" ? "cursor-not-allowed border-zinc-800 bg-zinc-800 text-zinc-600" : "",
].join(" ");
button.textContent = cell === "H" ? "Y" : cell === "A" ? "AI" : cell === "X" ? "×" : index + 1;
button.disabled = locked || done || cell !== "";
button.addEventListener("click", () => chooseCell(index));
lane.appendChild(button);
});
humanMoves.textContent = scores.H;
aiMoves.textContent = scores.A;
openCount.textContent = legalMoves().length;
}

resetBtn.addEventListener("click", startGame);
startGame();
</script>
</body>
</html>