Skip to content

feat(classic-games): 新增 Mini Dao 小游戏 #1240

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
Open

feat(classic-games): 新增 Mini Dao 小游戏 #1240

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
263 changes: 263 additions & 0 deletions project/classic-games/20260718-0754-dao-lite.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Dao</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-neutral-950 text-neutral-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-neutral-800 pb-4 sm:flex-row sm:items-end sm:justify-between">
<div>
<p class="text-sm font-semibold uppercase tracking-wide text-emerald-300">Classic abstract</p>
<h1 class="text-3xl font-black text-white">Mini Dao</h1>
<p class="mt-1 max-w-2xl text-sm text-neutral-300">Slide pieces like ice until blocked. Form a line, a 2x2 square, or occupy all four corners to win.</p>
</div>
<button id="resetBtn" class="rounded bg-emerald-300 px-4 py-2 text-sm font-bold text-neutral-950 hover:bg-emerald-200">Reset</button>
</header>

<section class="grid gap-4 lg:grid-cols-[1fr_18rem]">
<div class="rounded border border-neutral-800 bg-neutral-900 p-3">
<div id="board" class="grid grid-cols-4 gap-2"></div>
</div>
<aside class="flex flex-col gap-3">
<div class="rounded border border-neutral-800 bg-neutral-900 p-4">
<p class="text-sm font-semibold text-neutral-400">Status</p>
<p id="statusText" class="mt-2 text-xl font-black text-white">Select a green piece.</p>
</div>
<div class="grid grid-cols-2 gap-3">
<div class="rounded border border-neutral-800 bg-neutral-900 p-4">
<p class="text-xs font-semibold uppercase text-neutral-500">Green</p>
<p id="greenCount" class="mt-1 text-2xl font-black text-emerald-300">4</p>
</div>
<div class="rounded border border-neutral-800 bg-neutral-900 p-4">
<p class="text-xs font-semibold uppercase text-neutral-500">Violet</p>
<p id="violetCount" class="mt-1 text-2xl font-black text-violet-300">4</p>
</div>
</div>
<div class="rounded border border-neutral-800 bg-neutral-900 p-4 text-sm text-neutral-300">
<p class="font-bold text-white">Win patterns</p>
<p class="mt-2">A player wins with four in a row, a 2x2 block, or by holding every corner. Green plays against a simple violet response.</p>
</div>
</aside>
</section>
</main>

<script>
const size = 4;
const dirs = [[1, 0], [-1, 0], [0, 1], [0, -1], [1, 1], [1, -1], [-1, 1], [-1, -1]];
const boardEl = document.getElementById("board");
const statusText = document.getElementById("statusText");
const greenCount = document.getElementById("greenCount");
const violetCount = document.getElementById("violetCount");
const resetBtn = document.getElementById("resetBtn");
let board = [];
let selected = null;
let targets = [];
let turn = "G";
let gameOver = false;

function inBounds(row, col) {
return row >= 0 && row < size && col >= 0 && col < size;
}

function freshBoard() {
return [
["G", "", "", "V"],
["", "G", "V", ""],
["", "V", "G", ""],
["V", "", "", "G"]
];
}

function countPieces(player) {
return board.flat().filter((cell) => cell === player).length;
}

function slideTarget(row, col, dr, dc) {
let nextRow = row + dr;
let nextCol = col + dc;
let last = null;
while (inBounds(nextRow, nextCol) && board[nextRow][nextCol] === "") {
last = { row: nextRow, col: nextCol };
nextRow += dr;
nextCol += dc;
}
return last;
}

function legalMoves(row, col, player = turn) {
if (board[row][col] !== player || gameOver) return [];
return dirs.map(([dr, dc]) => slideTarget(row, col, dr, dc)).filter(Boolean);
}

function allMovesFor(player) {
const moves = [];
for (let row = 0; row < size; row += 1) {
for (let col = 0; col < size; col += 1) {
for (const move of legalMoves(row, col, player)) {
moves.push({ fromRow: row, fromCol: col, row: move.row, col: move.col });
}
}
}
return moves;
}

function positionsOf(player) {
const cells = [];
for (let row = 0; row < size; row += 1) {
for (let col = 0; col < size; col += 1) {
if (board[row][col] === player) cells.push([row, col]);
}
}
return cells;
}

function hasLine(player) {
const lines = [];
for (let row = 0; row < size; row += 1) lines.push(Array.from({ length: size }, (_, col) => [row, col]));
for (let col = 0; col < size; col += 1) lines.push(Array.from({ length: size }, (_, row) => [row, col]));
lines.push([[0, 0], [1, 1], [2, 2], [3, 3]]);
lines.push([[0, 3], [1, 2], [2, 1], [3, 0]]);
Comment on lines +121 to +122

@chatgpt-codex-connector chatgpt-codex-connector Bot Jul 18, 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 Remove diagonal lines from the win check

On the shipped starting board, Green occupies the main diagonal and Violet occupies the anti-diagonal. These two entries therefore make both sides already satisfy hasLine(); after any legal first Green move, Green's diagonal is broken while Violet's remains, so checkWinner() declares "Violet wins" before the AI takes a turn. Dao's four-in-a-row win is horizontal/vertical rather than diagonal (GamesCrafters), so these diagonals need to be excluded or the initial layout changed.

Useful? React with 👍 / 👎.

return lines.some((line) => line.every(([row, col]) => board[row][col] === player));
}

function hasSquare(player) {
for (let row = 0; row < size - 1; row += 1) {
for (let col = 0; col < size - 1; col += 1) {
const square = [[row, col], [row + 1, col], [row, col + 1], [row + 1, col + 1]];
if (square.every(([r, c]) => board[r][c] === player)) return true;
}
}
return false;
}

function hasCorners(player) {
return [[0, 0], [0, 3], [3, 0], [3, 3]].every(([row, col]) => board[row][col] === player);
}

function checkWinner() {
for (const player of ["G", "V"]) {
if (hasLine(player) || hasSquare(player) || hasCorners(player)) {
gameOver = true;
statusText.textContent = player === "G" ? "Green wins." : "Violet wins.";
return true;
}
}
const moves = allMovesFor(turn);
if (!moves.length) {
gameOver = true;
statusText.textContent = turn === "G" ? "Green is stuck. Violet wins." : "Violet is stuck. Green wins.";
return true;
}
return false;
}

function movePiece(fromRow, fromCol, toRow, toCol) {
board[toRow][toCol] = board[fromRow][fromCol];
board[fromRow][fromCol] = "";
selected = null;
targets = [];
if (!checkWinner()) {
turn = turn === "G" ? "V" : "G";
statusText.textContent = turn === "G" ? "Select a green piece." : "Violet is thinking.";
}
render();
if (!gameOver && turn === "V") {
window.setTimeout(playComputerTurn, 350);
}
}

function chooseAiMove() {
const moves = allMovesFor("V");
for (const move of moves) {
const copy = board.map((row) => row.slice());
copy[move.row][move.col] = copy[move.fromRow][move.fromCol];
copy[move.fromRow][move.fromCol] = "";
const oldBoard = board;
board = copy;
const winning = hasLine("V") || hasSquare("V") || hasCorners("V");
board = oldBoard;
if (winning) return move;
}
return moves[Math.floor(Math.random() * moves.length)] || null;
}

function playComputerTurn() {
const move = chooseAiMove();
if (!move) {
gameOver = true;
statusText.textContent = "Violet is stuck. Green wins.";
render();
return;
}
movePiece(move.fromRow, move.fromCol, move.row, move.col);
}

function handleCell(row, col) {
if (gameOver || turn !== "G") return;
const target = targets.find((move) => move.row === row && move.col === col);
if (selected && target) {
movePiece(selected.row, selected.col, row, col);
return;
}
if (board[row][col] === "G") {
selected = { row, col };
targets = legalMoves(row, col, "G");
statusText.textContent = targets.length ? "Choose a slide target." : "That piece cannot slide.";
} else {
selected = null;
targets = [];
statusText.textContent = "Select a green piece.";
}
render();
}

function renderBoard() {
boardEl.innerHTML = "";
for (let row = 0; row < size; row += 1) {
for (let col = 0; col < size; col += 1) {
const piece = board[row][col];
const isSelected = selected && selected.row === row && selected.col === col;
const isTarget = targets.some((move) => move.row === row && move.col === col);
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-2xl font-black transition focus:outline-none focus:ring-2 focus:ring-white",
(row + col) % 2 === 0 ? "border-neutral-700 bg-neutral-800" : "border-neutral-700 bg-neutral-700",
piece === "G" ? "text-emerald-300" : "",
piece === "V" ? "text-violet-300" : "",
isSelected ? "ring-2 ring-white" : "",
isTarget ? "border-emerald-200 bg-neutral-600" : "",
"hover:bg-neutral-600"
].join(" ");
button.textContent = piece;
button.addEventListener("click", () => handleCell(row, col));
boardEl.appendChild(button);
}
}
}

function render() {
greenCount.textContent = String(countPieces("G"));
violetCount.textContent = String(countPieces("V"));
renderBoard();
}

function resetGame() {
board = freshBoard();
selected = null;
targets = [];
turn = "G";
gameOver = false;
statusText.textContent = "Select a green piece.";
render();
}

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