-
Notifications
You must be signed in to change notification settings - Fork 2
feat(classic-games): 新增 Mini Game of Goose 小游戏 #1229
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.
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
main
Choose a base branch
from
codex/classic-game-20260718-0224-game-of-goose-lite
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+163
−0
Open
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
163 changes: 163 additions & 0 deletions
163
project/classic-games/20260718-0224-game-of-goose-lite.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,163 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Mini Game of Goose</title> | ||
| <script src="https://cdn.tailwindcss.com"></script> | ||
| </head> | ||
| <body class="min-h-screen bg-amber-950 text-amber-50"> | ||
| <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-emerald-300">Classic Race Board</p> | ||
| <h1 class="text-3xl font-bold text-white sm:text-4xl">Mini Game of Goose</h1> | ||
| </div> | ||
| <button id="resetBtn" class="rounded-md bg-emerald-300 px-4 py-2 text-sm font-bold text-amber-950 transition hover:bg-emerald-200"> | ||
| New Game | ||
| </button> | ||
| </header> | ||
|
|
||
| <section class="grid gap-4 lg:grid-cols-[1fr_18rem]"> | ||
| <div class="rounded-lg border border-amber-800 bg-amber-900 p-4 shadow-2xl shadow-amber-950/40"> | ||
| <div id="board" class="grid grid-cols-4 gap-2 sm:grid-cols-6"></div> | ||
| </div> | ||
|
|
||
| <aside class="flex flex-col gap-4"> | ||
| <div class="rounded-lg border border-amber-800 bg-amber-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-amber-100"></p> | ||
| </div> | ||
|
|
||
| <button id="rollBtn" class="rounded-md bg-emerald-300 px-4 py-3 text-sm font-black uppercase tracking-wide text-amber-950 transition hover:bg-emerald-200 disabled:cursor-not-allowed disabled:opacity-50"> | ||
| Roll Die | ||
| </button> | ||
|
|
||
| <div class="grid grid-cols-3 gap-2 text-center lg:grid-cols-1"> | ||
| <div class="rounded-lg border border-amber-800 bg-amber-900 p-3"> | ||
| <p class="text-xs uppercase tracking-wide text-amber-300">You</p> | ||
| <p id="humanPos" class="mt-1 text-2xl font-bold text-emerald-300">0</p> | ||
| </div> | ||
| <div class="rounded-lg border border-amber-800 bg-amber-900 p-3"> | ||
| <p class="text-xs uppercase tracking-wide text-amber-300">AI</p> | ||
| <p id="aiPos" class="mt-1 text-2xl font-bold text-rose-300">0</p> | ||
| </div> | ||
| <div class="rounded-lg border border-amber-800 bg-amber-900 p-3"> | ||
| <p class="text-xs uppercase tracking-wide text-amber-300">Die</p> | ||
| <p id="dieValue" class="mt-1 text-2xl font-bold text-white">-</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="rounded-lg border border-amber-800 bg-amber-900 p-4 text-sm leading-6 text-amber-100"> | ||
| <p>Reach square 24 exactly. Goose squares move you ahead again, trap squares push you back.</p> | ||
| </div> | ||
| </aside> | ||
| </section> | ||
| </main> | ||
|
|
||
| <script> | ||
| const finish = 24; | ||
| const gooseSquares = new Set([5, 9, 14, 18]); | ||
| const trapSquares = new Map([[7, -3], [13, -4], [20, -5]]); | ||
| const board = document.getElementById("board"); | ||
| const message = document.getElementById("message"); | ||
| const rollBtn = document.getElementById("rollBtn"); | ||
| const resetBtn = document.getElementById("resetBtn"); | ||
| const humanPos = document.getElementById("humanPos"); | ||
| const aiPos = document.getElementById("aiPos"); | ||
| const dieValue = document.getElementById("dieValue"); | ||
|
|
||
| let positions = { H: 0, A: 0 }; | ||
| let locked = false; | ||
| let done = false; | ||
|
|
||
| function startGame() { | ||
| positions = { H: 0, A: 0 }; | ||
| locked = false; | ||
| done = false; | ||
| dieValue.textContent = "-"; | ||
| setMessage("Roll the die. You need to land exactly on 24."); | ||
| render(); | ||
| } | ||
|
|
||
| function rollDie() { | ||
| return Math.floor(Math.random() * 6) + 1; | ||
| } | ||
|
|
||
| function takeTurn(player) { | ||
| if (done) return; | ||
| const die = rollDie(); | ||
| dieValue.textContent = die; | ||
| movePlayer(player, die); | ||
| if (checkWin(player)) return; | ||
| if (player === "H") { | ||
| locked = true; | ||
| setMessage("AI is rolling..."); | ||
| render(); | ||
| window.setTimeout(() => { | ||
| takeTurn("A"); | ||
| locked = false; | ||
| if (!done) setMessage("Your turn. Roll for an exact finish."); | ||
| render(); | ||
| }, 450); | ||
| } | ||
| } | ||
|
|
||
| function movePlayer(player, die) { | ||
| let next = positions[player] + die; | ||
| if (next > finish) next = finish - (next - finish); | ||
| let note = player === "H" ? "You" : "AI"; | ||
| note += ` rolled ${die} and moved to ${next}.`; | ||
| if (gooseSquares.has(next)) { | ||
| next = Math.min(finish, next + die); | ||
| note += ` Goose square sends ${player === "H" ? "you" : "AI"} ahead to ${next}.`; | ||
| } | ||
| if (trapSquares.has(next)) { | ||
| next = Math.max(0, next + trapSquares.get(next)); | ||
| note += ` Trap square slides back to ${next}.`; | ||
| } | ||
| positions[player] = next; | ||
| setMessage(note); | ||
| } | ||
|
|
||
| function checkWin(player) { | ||
| if (positions[player] !== finish) return false; | ||
| done = true; | ||
| locked = true; | ||
| setMessage(player === "H" ? "You win. You reached square 24." : "AI wins. It reached square 24."); | ||
| render(); | ||
| return true; | ||
| } | ||
|
|
||
| function setMessage(text) { | ||
| message.textContent = text; | ||
| } | ||
|
|
||
| function render() { | ||
| board.innerHTML = ""; | ||
| for (let i = 1; i <= finish; i += 1) { | ||
| const cell = document.createElement("div"); | ||
| const hasHuman = positions.H === i; | ||
| const hasAi = positions.A === i; | ||
| const isGoose = gooseSquares.has(i); | ||
| const isTrap = trapSquares.has(i); | ||
| cell.className = [ | ||
| "flex aspect-square flex-col items-center justify-center rounded-md border text-center text-sm font-bold", | ||
| isGoose ? "border-emerald-300 bg-emerald-500/20 text-emerald-100" : "", | ||
| isTrap ? "border-rose-300 bg-rose-500/20 text-rose-100" : "", | ||
| !isGoose && !isTrap ? "border-amber-800 bg-amber-950 text-amber-100" : "", | ||
| ].join(" "); | ||
| cell.innerHTML = `<span>${i}</span><span class="mt-1 text-xs">${hasHuman ? "You" : ""}${hasHuman && hasAi ? " / " : ""}${hasAi ? "AI" : ""}</span>`; | ||
| board.appendChild(cell); | ||
| } | ||
| humanPos.textContent = positions.H; | ||
| aiPos.textContent = positions.A; | ||
| rollBtn.disabled = locked || done; | ||
| } | ||
|
|
||
| rollBtn.addEventListener("click", () => takeTurn("H")); | ||
| resetBtn.addEventListener("click", startGame); | ||
| startGame(); | ||
| </script> | ||
| </body> | ||
| </html> | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If the user clicks New Game during the 450 ms delay after a human roll, the timeout scheduled here is still active and will call
takeTurn("A")against the freshly resetpositions, so the new game can start with the AI already moved and an old-turn status message. Store the timeout id and clear it instartGame(), or guard the callback with a game/version token.Useful? React with 👍 / 👎.