Skip to content

feat(classic-games): 新增 Mini N-Queens 小游戏 #1236

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 N-Queens 小游戏 #1236

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-0554-n-queens-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 N-Queens</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-5xl flex-col gap-5 px-4 py-6">
<header class="flex flex-col gap-3 border-b border-slate-800 pb-4 sm:flex-row sm:items-end sm:justify-between">
<div>
<p class="text-sm font-semibold uppercase tracking-wide text-cyan-300">Classic puzzle</p>
<h1 class="text-3xl font-black text-white">Mini N-Queens</h1>
<p class="mt-1 max-w-2xl text-sm text-slate-300">Place 6 queens on the board so no two share a row, column, or diagonal.</p>
</div>
<div class="flex gap-2">
<button id="hintBtn" class="rounded bg-cyan-400 px-4 py-2 text-sm font-bold text-slate-950 hover:bg-cyan-300">Hint</button>
<button id="resetBtn" class="rounded border border-slate-600 px-4 py-2 text-sm font-bold text-slate-100 hover:bg-slate-800">Reset</button>
</div>
</header>

<section class="grid gap-4 lg:grid-cols-[1fr_18rem]">
<div class="rounded border border-slate-800 bg-slate-900 p-3">
<div id="board" class="grid grid-cols-6 gap-2"></div>
</div>

<aside class="flex flex-col gap-3">
<div class="rounded border border-slate-800 bg-slate-900 p-4">
<p class="text-sm font-semibold text-slate-400">Status</p>
<p id="statusText" class="mt-2 text-xl font-black text-white">Place your queens.</p>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="rounded border border-slate-800 bg-slate-900 p-4">
<p class="text-xs font-semibold uppercase text-slate-500">Queens</p>
<p id="queenCount" class="mt-1 text-2xl font-black text-white">0/6</p>
</div>
<div class="rounded border border-slate-800 bg-slate-900 p-4">
<p class="text-xs font-semibold uppercase text-slate-500">Conflicts</p>
<p id="conflictCount" class="mt-1 text-2xl font-black text-white">0</p>
</div>
</div>
<div class="rounded border border-slate-800 bg-slate-900 p-4 text-sm text-slate-300">
<p class="font-bold text-white">Rules</p>
<p class="mt-2">Click a square to add or remove a queen. Red queens are attacking another queen. Solve the puzzle when all 6 queens are safe.</p>
</div>
</aside>
</section>
</main>

<script>
const size = 6;
const solution = [1, 3, 5, 0, 2, 4];
const queens = new Set();
const boardEl = document.getElementById("board");
const statusText = document.getElementById("statusText");
const queenCount = document.getElementById("queenCount");
const conflictCount = document.getElementById("conflictCount");
const resetBtn = document.getElementById("resetBtn");
const hintBtn = document.getElementById("hintBtn");

function keyOf(row, col) {
return `${row},${col}`;
}

function parseKey(key) {
return key.split(",").map(Number);
}

function conflictsFor(row, col) {
const conflicts = [];
for (const key of queens) {
const [queenRow, queenCol] = parseKey(key);
if (queenRow === row && queenCol === col) {
continue;
}
const sameRow = queenRow === row;
const sameCol = queenCol === col;
const sameDiag = Math.abs(queenRow - row) === Math.abs(queenCol - col);
if (sameRow || sameCol || sameDiag) {
conflicts.push(key);
}
}
return conflicts;
}

function boardStats() {
let conflictPairs = 0;
const unsafeQueens = new Set();
const placed = [...queens];
for (let first = 0; first < placed.length; first += 1) {
const [rowA, colA] = parseKey(placed[first]);
for (let second = first + 1; second < placed.length; second += 1) {
const [rowB, colB] = parseKey(placed[second]);
const attacking = rowA === rowB || colA === colB || Math.abs(rowA - rowB) === Math.abs(colA - colB);
if (attacking) {
conflictPairs += 1;
unsafeQueens.add(placed[first]);
unsafeQueens.add(placed[second]);
}
}
}
return {
placed: queens.size,
conflictPairs,
unsafeQueens,
solved: queens.size === size && conflictPairs === 0
};
}

function toggleQueen(row, col) {
const key = keyOf(row, col);
if (queens.has(key)) {
queens.delete(key);
} else if (queens.size < size) {
queens.add(key);
}
render();
}

function placeHint() {
for (let row = 0; row < size; row += 1) {
const rowHasQueen = [...queens].some((key) => parseKey(key)[0] === row);
if (!rowHasQueen) {
queens.add(keyOf(row, solution[row]));

@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 Cap hint placements at six queens

When the board already contains six queens but they are not one per row, Hint remains enabled because the puzzle is unsolved; clicking it finds an empty row and adds another queen here, bypassing the queens.size < size guard used by manual placement. This lets the UI reach states like 7/6 queens and makes the puzzle impossible to complete until the player manually removes extra pieces.

Useful? React with 👍 / 👎.

render();
return;
}
}
}

function resetGame() {
queens.clear();
render();
}

function renderBoard(stats) {
boardEl.innerHTML = "";
for (let row = 0; row < size; row += 1) {
for (let col = 0; col < size; col += 1) {
const key = keyOf(row, col);
const hasQueen = queens.has(key);
const unsafe = stats.unsafeQueens.has(key);
const button = document.createElement("button");
button.type = "button";
button.setAttribute("aria-label", `row ${row + 1}, column ${col + 1}`);
button.className = [
"aspect-square rounded border text-xl font-black transition focus:outline-none focus:ring-2 focus:ring-cyan-300",
(row + col) % 2 === 0 ? "border-slate-700 bg-slate-800" : "border-slate-700 bg-slate-700",
hasQueen && unsafe ? "border-rose-300 bg-rose-500 text-white" : "",
hasQueen && !unsafe ? "border-amber-200 bg-amber-300 text-slate-950" : "",
!hasQueen ? "hover:bg-cyan-900" : ""
].join(" ");
button.textContent = hasQueen ? "Q" : "";
button.addEventListener("click", () => toggleQueen(row, col));
boardEl.appendChild(button);
}
}
}

function render() {
const stats = boardStats();
renderBoard(stats);
queenCount.textContent = `${stats.placed}/${size}`;
conflictCount.textContent = String(stats.conflictPairs);
if (stats.solved) {
statusText.textContent = "Solved. Every queen is safe.";
statusText.className = "mt-2 text-xl font-black text-emerald-300";
} else if (stats.conflictPairs > 0) {
statusText.textContent = "Resolve the attacking queens.";
statusText.className = "mt-2 text-xl font-black text-rose-300";
} else if (stats.placed === size) {
statusText.textContent = "All queens placed safely.";
statusText.className = "mt-2 text-xl font-black text-emerald-300";
} else {
statusText.textContent = "Place your queens.";
statusText.className = "mt-2 text-xl font-black text-white";
}
hintBtn.disabled = stats.solved;
hintBtn.classList.toggle("opacity-50", stats.solved);
}

resetBtn.addEventListener("click", resetGame);
hintBtn.addEventListener("click", placeHint);
render();
</script>
</body>
</html>