Skip to content

feat(classic-games): 新增 Mini Obstruction 小游戏 #1223

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
+194 −0
Open

feat(classic-games): 新增 Mini Obstruction 小游戏 #1223

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
194 changes: 194 additions & 0 deletions project/classic-games/20260717-2324-obstruction-lite.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Obstruction</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-4xl 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-cyan-300">Classic Grid Game</p>
<h1 class="text-3xl font-bold text-white sm:text-4xl">Mini Obstruction</h1>
</div>
<button id="restartBtn" class="rounded-md bg-cyan-400 px-4 py-2 text-sm font-bold text-zinc-950 transition hover:bg-cyan-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/70 p-3 shadow-2xl shadow-cyan-950/20 sm:p-4">
<div id="board" class="grid aspect-square w-full grid-cols-6 gap-2"></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-12 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="humanCount" class="mt-1 text-2xl font-bold text-cyan-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="aiCount" class="mt-1 text-2xl font-bold text-amber-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-emerald-300">36</p>
</div>
</div>

<div class="rounded-lg border border-zinc-800 bg-zinc-900 p-4 text-sm leading-6 text-zinc-300">
<p>Take turns placing a marker. Each move blocks the eight neighboring squares. If your turn starts with no legal square, you lose.</p>
</div>
</aside>
</section>
</main>

<script>
const size = 6;
const boardEl = document.getElementById("board");
const messageEl = document.getElementById("message");
const humanCountEl = document.getElementById("humanCount");
const aiCountEl = document.getElementById("aiCount");
const openCountEl = document.getElementById("openCount");
const restartBtn = document.getElementById("restartBtn");

let board = [];
let locked = false;
let gameOver = false;
let moves = { H: 0, A: 0 };

function startGame() {
board = Array.from({ length: size * size }, () => "");
locked = false;
gameOver = false;
moves = { H: 0, A: 0 };
setMessage("Your move. Pick any open square to claim it and block its neighbors.");
render();
}

function rowOf(index) {
return Math.floor(index / size);
}

function colOf(index) {
return index % size;
}

function neighborsOf(index) {
const row = rowOf(index);
const col = colOf(index);
const neighbors = [];
for (let dr = -1; dr <= 1; dr += 1) {
for (let dc = -1; dc <= 1; dc += 1) {
if (dr === 0 && dc === 0) continue;
const nextRow = row + dr;
const nextCol = col + dc;
if (nextRow >= 0 && nextRow < size && nextCol >= 0 && nextCol < size) {
neighbors.push(nextRow * size + nextCol);
}
}
}
return neighbors;
}

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

function applyMove(index, owner) {
board[index] = owner;
moves[owner] += 1;
neighborsOf(index).forEach((neighbor) => {
if (board[neighbor] === "") board[neighbor] = "B";
});
}

function scoreCell(index) {
const snapshot = board.slice();
snapshot[index] = "A";
neighborsOf(index).forEach((neighbor) => {
if (snapshot[neighbor] === "") snapshot[neighbor] = "B";
});
const humanOptions = snapshot.filter((cell) => cell === "").length;
const centerBias = 6 - Math.abs(rowOf(index) - 2.5) - Math.abs(colOf(index) - 2.5);
return humanOptions * -10 + centerBias;
}

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

function chooseCell(index) {
if (locked || gameOver || board[index] !== "") return;
applyMove(index, "H");
if (checkGame("A", "You win. The AI has no legal square left.")) return;
locked = true;
setMessage("AI is choosing a blocking square...");
render();
window.setTimeout(() => {
const aiIndex = chooseAiMove();
if (aiIndex !== undefined) applyMove(aiIndex, "A");
Comment on lines +140 to +142

@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 pending AI turns when restarting

When the player clicks New Game during this 260 ms AI delay, the scheduled callback still runs against the freshly reset board because startGame() does not clear or invalidate the timeout. This makes the new game unexpectedly receive an AI move and blocked neighbors immediately after restart, so the reset state is corrupted unless the user waits for the old AI turn to finish.

Useful? React with 👍 / 👎.

locked = false;
if (!checkGame("H", "AI wins. You have no legal square left.")) {
setMessage("Your move. Look for the square that leaves the AI boxed in.");
}
render();
}, 260);
}

function checkGame(nextOwner, text) {
if (availableCells().length > 0) {
render();
return false;
}
gameOver = true;
locked = true;
setMessage(text);
render();
return true;
}

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

function render() {
boardEl.innerHTML = "";
board.forEach((cell, index) => {
const button = document.createElement("button");
button.type = "button";
button.setAttribute("aria-label", `Cell ${index + 1}`);
button.className = [
"aspect-square rounded-md border text-xl font-black transition sm:text-2xl",
cell === "H" ? "border-cyan-300 bg-cyan-400 text-zinc-950 shadow-lg shadow-cyan-500/20" : "",
cell === "A" ? "border-amber-300 bg-amber-300 text-zinc-950 shadow-lg shadow-amber-500/20" : "",
cell === "B" ? "cursor-not-allowed border-zinc-800 bg-zinc-800 text-zinc-600" : "",
cell === "" ? "border-zinc-700 bg-zinc-950 hover:border-cyan-300 hover:bg-zinc-800" : "",
].join(" ");
button.disabled = locked || gameOver || cell !== "";
button.textContent = cell === "H" ? "Y" : cell === "A" ? "AI" : cell === "B" ? "×" : "";
button.addEventListener("click", () => chooseCell(index));
boardEl.appendChild(button);
});
humanCountEl.textContent = moves.H;
aiCountEl.textContent = moves.A;
openCountEl.textContent = availableCells().length;
}

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