Lesson 1
重點：純粹的 HTML，沒有任何多餘標籤或樣式設定。

Lesson 1 說明

最簡單的結構

使用 <!DOCTYPE html> 聲明，告訴瀏覽器這是 HTML5 文件。
lang="zh-Hant" 表示此網頁主要語言為繁體中文。

頁面標題

<head> 中的 <title> 決定了瀏覽器分頁上顯示的標題：Fraction Nim - Lesson 1。

內容

在 <body> 放一個標題 <h1>，加上 <p> 段落文字，用 <strong> 簡單做粗體強調。
沒有任何 CSS、JavaScript，讓讀者先熟悉最純粹的 HTML 呈現方式。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 1</title>

</head>

<body>

<h1>Fraction Nim - Lesson 1</h1>

<p>

歡迎來到 <strong>Fraction Nim</strong> 的第一課！

在這裡，我們先透過最基礎的 HTML 了解如何在網頁上顯示文字。

</p>

</body>

</html>

任務刪減到最少文字，執行結果不變

你的答案

Lesson 2

重點：在第一堂課的基礎上，加入「第二個段落」或「更多提示」，同樣不使用 CSS 或 JavaScript，但讓讀者看到如何在網頁中增加額外內容。

Lesson 2 說明

維持同樣的骨架

跟 Lesson 1 相同：<!DOCTYPE html>, <html>, <head>, <body> 架構不變。

多段落

這次在 <body> 裡多了另一個 <p>，示範如何在原本基礎上「插入新文字」。

可用的標籤

<em> 做斜體標註，讓讀者知道還可以使用各種文字樣式標籤。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 1</title>

</head>

<body>

<h1>Fraction Nim - Lesson 1</h1>

<p>

歡迎來到 <strong>Fraction Nim</strong> 的第一課！

在這裡，我們先透過最基礎的 HTML 了解如何在網頁上顯示文字。

</p>

</body>

</html>

任務刪減到最少文字，執行結果不變

你的答案

Lesson 3

重點：在第一堂課的基礎上，加入「第二個段落」或「更多提示」，同樣不使用 CSS 或 JavaScript，但讓讀者看到如何在網頁中增加額外內容。

Lesson 3 說明

新增的 CSS

在 <style> 標籤內，我們加入了兩個簡單的樣式：

背景顏色設定：為 body 加上了 background-color: #e0f7fa;，這是一個淺藍色背景。
文字顏色設定：設置了 h1 的顏色為深綠色 (color: #00796b;)，而段落文字的顏色設為較深的灰色 (color: #333;)，讓整體文字更易於閱讀。

效果

當你在瀏覽器中查看這個頁面時，背景會呈現淡藍色，標題文字會顯示為深綠色，而段落文字則顯示為深灰色，這樣讓頁面的外觀更具層次感，且閱讀上更加舒適。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 3</title>

<style>

/* 設定背景顏色與文字顏色 */

body {

margin: 0;

padding: 0;

background-color: #e0f7fa; /* 輕微藍色背景 */

font-family: "Microsoft JhengHei", sans-serif;

text-align: center;

}

#container {

width: 600px;

margin: 0 auto;

padding: 20px;

text-align: left;

background-color: #fff;

border: 1px solid #ccc;

margin-top: 30px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

h1 {

color: #00796b; /* 深綠色標題 */

}

p {

line-height: 1.5;

margin-bottom: 15px;

color: #333; /* 設置文字顏色 */

}

</style>

</head>

<body>

<h1>Fraction Nim - Lesson 3</h1>

<hr>

<p>

在這一課，我們將學會如何使用 CSS 為網頁添加背景顏色與文字顏色。

</p>

<p>

當你為網頁設置了顏色後，整體的視覺效果會變得更有層次，提升讀者的閱讀體驗。

</p>

</div>

</body>

</html>

將顏色改成紫羅蘭(請GPT協助找出顏色代碼)

你的答案

Lesson 4.1 — 基本 HTML 架構與畫布設定

目標：建立最基本的 HTML 架構，並創建一個畫布 (Canvas)。

Lesson 4.1 說明

建立畫布 (Canvas)：我們在頁面中新增了 <canvas> 元素，這是畫圖的地方。其寬度和高度設定為 600px x 400px。
基本結構：頁面使用了最簡單的 HTML 標籤來創建一個包含標題與畫布的區域，並對畫布進行了一些基本的樣式設置。

改成 200 x 200

你的答案

Lesson 4.2 — 在畫布上繪製矩形

目標：使用 JavaScript 在畫布上繪製一個矩形。

Lesson 4.2 說明

繪製矩形：使用 ctx.fillRect() 方法來繪製矩形。此方法需要傳遞四個參數：x 位置、y 位置、寬度和高度。
填充顏色：使用 ctx.fillStyle 設定顏色，這裡我們選擇了綠色（#66ff66）作為堆的顏色。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 4.2</title>

<style>

body {

margin: 0;

padding: 0;

background-color: #f8f8f8;

font-family: "Microsoft JhengHei", sans-serif;

text-align: center;

}

#container {

width: 600px;

margin: 0 auto;

padding: 20px;

text-align: left;

background-color: #fff;

border: 1px solid #ccc;

margin-top: 30px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

h1 {

text-align: center;

margin-bottom: 10px;

}

canvas {

display: block;

margin: 20px auto;

border: 1px solid #ccc;

background-color: #fafafa;

}

</style>

</head>

<body>

<h1>Fraction Nim - Lesson 4.2</h1>

</div>

// 取得畫布元素

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// 畫出基本的遊戲畫布區域

function drawGameCanvas() {

// 設定畫布背景顏色

ctx.fillStyle = '#e0f7fa';

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 畫一個代表「堆」的矩形

ctx.fillStyle = '#66ff66'; // 使用綠色

ctx.fillRect(100, 100, 150, 50); // x, y, width, height

}

// 呼叫函數來繪製畫布內容

drawGameCanvas();

</script>

</body>

</html>

改變舉行大小，改變顏色，改變位置

你的答案

Lesson 4.3 — 在矩形內部顯示文字

目標：在矩形內部顯示「1/8」文字，代表該堆的分數。

Lesson 4.3 說明

顯示文字：使用 ctx.fillText() 方法在畫布上顯示文字。此方法需要指定文字內容及其位置。
設置文字樣式：使用 ctx.font 設定文字的字型和大小，並用 ctx.fillStyle 設定文字顏色。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 4.3</title>

<style>

body {

margin: 0;

padding: 0;

background-color: #f8f8f8;

font-family: "Microsoft JhengHei", sans-serif;

text-align: center;

}

#container {

width: 600px;

margin: 0 auto;

padding: 20px;

text-align: left;

background-color: #fff;

border: 1px solid #ccc;

margin-top: 30px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

h1 {

text-align: center;

margin-bottom: 10px;

}

canvas {

display: block;

margin: 20px auto;

border: 1px solid #ccc;

background-color: #fafafa;

}

</style>

</head>

<body>

<h1>Fraction Nim - Lesson 4.3</h1>

</div>

// 取得畫布元素

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// 畫出基本的遊戲畫布區域

function drawGameCanvas() {

// 設定畫布背景顏色

ctx.fillStyle = '#e0f7fa';

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 畫一個代表「堆」的矩形

ctx.fillStyle = '#66ff66'; // 使用綠色

ctx.fillRect(100, 100, 150, 50); // x, y, width, height

// 在矩形內部顯示「1/8」

ctx.fillStyle = '#000000'; // 設定文字顏色為黑色

ctx.font = '20px Arial'; // 設定文字大小

ctx.fillText("1/8", 160, 130); // 顯示文字在矩形內

}

// 呼叫函數來繪製畫布內容

drawGameCanvas();

</script>

</body>

</html>

多一些方塊與按鈕

你的答案

Lesson 4.4 — 監聽滑鼠點擊並檢查點擊範圍

目標：監聽滑鼠點擊，並檢查玩家是否點擊到「堆」，如果點擊到則顯示訊息。

Lesson 4.4 說明

監聽滑鼠點擊：使用 canvas.addEventListener('click', ...) 監聽滑鼠點擊事件。
計算滑鼠點擊位置：根據滑鼠事件的 clientX 和 clientY 屬性，計算出點擊位置與畫布邊界的偏差。
範圍檢查：檢查滑鼠點擊的位置是否在「堆」的矩形範圍內，如果是，則顯示 alert() 彈窗。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 4.4</title>

<style>

body {

margin: 0;

padding: 0;

background-color: #f8f8f8;

font-family: "Microsoft JhengHei", sans-serif;

text-align: center;

}

#container {

width: 600px;

margin: 0 auto;

padding: 20px;

text-align: left;

background-color: #fff;

border: 1px solid #ccc;

margin-top: 30px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

h1 {

text-align: center;

margin-bottom: 10px;

}

canvas {

display: block;

margin: 20px auto;

border: 1px solid #ccc;

background-color: #fafafa;

}

</style>

</head>

<body>

<h1>Fraction Nim - Lesson 4.4</h1>

</div>

// 取得畫布元素

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// 畫出基本的遊戲畫布區域

function drawGameCanvas() {

// 設定畫布背景顏色

ctx.fillStyle = '#e0f7fa';

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 畫一個代表「堆」的矩形

ctx.fillStyle = '#66ff66'; // 使用綠色

ctx.fillRect(100, 100, 150, 50); // x, y, width, height

// 在矩形內部顯示「1/8」

ctx.fillStyle = '#000000'; // 設定文字顏色為黑色

ctx.font = '20px Arial'; // 設定文字大小

ctx.fillText("1/8", 160, 130); // 顯示文字在矩形內

}

// 呼叫函數來繪製畫布內容

drawGameCanvas();

// 在畫布上監聽滑鼠點擊

canvas.addEventListener('click', (e) => {

const mouseX = e.clientX - canvas.offsetLeft;

const mouseY = e.clientY - canvas.offsetTop;

// 簡單的範圍檢查 (如果滑鼠點擊的區域在堆內)

if (mouseX > 100 && mouseX < 250 && mouseY > 100 && mouseY < 150) {

alert("你點擊了堆！");

}

});

</script>

</body>

</html>

任務刪減到最少文字，執行結果不變

你的答案

Lesson 3

重點：在第一堂課的基礎上，加入「第二個段落」或「更多提示」，同樣不使用 CSS 或 JavaScript，但讓讀者看到如何在網頁中增加額外內容。

Lesson 5 說明

堆積減少的邏輯

我們定義了一個 fraction 變數來表示每堆的分數。每次玩家點擊堆時，fraction 會減少 0.125 (1/8)，並重新繪製畫布，顯示新的堆分數。

繪製遊戲畫布

仍然使用 ctx.fillRect() 來畫堆，並在堆中顯示當前的石頭數量和分數。每當玩家點擊堆時，堆的分數會相應減少，並在畫布中更新。

簡單的範圍檢查

使用滑鼠事件的 clientX 和 clientY 屬性來計算點擊位置，檢查滑鼠是否點擊到了堆的範圍內。如果點擊到，則減少堆的分數。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 5</title>

<style>

body {

margin: 0;

padding: 0;

background-color: #f8f8f8;

font-family: "Microsoft JhengHei", sans-serif;

text-align: center;

}

#container {

width: 600px;

margin: 0 auto;

padding: 20px;

text-align: left;

background-color: #fff;

border: 1px solid #ccc;

margin-top: 30px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

h1 {

text-align: center;

margin-bottom: 10px;

}

hr {

margin: 20px 0;

}

p {

line-height: 1.5;

margin-bottom: 15px;

}

canvas {

display: block;

margin: 20px auto;

border: 1px solid #ccc;

background-color: #fafafa;

}

</style>

</head>

<body>

<h1>Fraction Nim - Lesson 5</h1>

<hr>

<p>

這堂課，我們將實現一個基礎的遊戲邏輯，讓玩家可以點擊畫布上的堆來移除分數。

當玩家點擊堆後，分數將減少，並在畫布上反映出來。

</p>

<p>

下一步，我們將繼續加入更多的遊戲邏輯，例如勝利條件判斷，以及讓 AI 進行操作。

</p>

</div>

// 取得畫布元素

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// 初始堆的分數

let fraction = 0.375; // 初始為 3/8

const maxStones = 8; // 每堆最多 8 顆石頭

// 畫出基本的遊戲畫布區域

function drawGameCanvas() {

// 設定畫布背景顏色

ctx.fillStyle = '#e0f7fa';

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 畫一個代表「堆」的矩形

ctx.fillStyle = '#66ff66'; // 使用綠色

ctx.fillRect(100, 100, 150, 50); // x, y, width, height

// 計算堆中石頭的數量

let stones = Math.round(fraction * maxStones);

// 文字顯示（例如：顯示 1/8）

ctx.fillStyle = '#000000'; // 設定文字顏色為黑色

ctx.font = '20px Arial'; // 設定文字大小

ctx.fillText(`${stones} 顆 / ${fraction.toFixed(3)}`, 160, 130); // 顯示文字在堆的中間

}

// 呼叫函數來繪製畫布內容

drawGameCanvas();

// 在畫布上監聽滑鼠點擊

canvas.addEventListener('click', (e) => {

const mouseX = e.clientX - canvas.offsetLeft;

const mouseY = e.clientY - canvas.offsetTop;

// 簡單的範圍檢查 (如果滑鼠點擊的區域在堆內)

if (mouseX > 100 && mouseX < 250 && mouseY > 100 && mouseY < 150) {

// 當點擊堆時，移除 1/8 的分數

fraction -= 0.125;

if (fraction < 0) fraction = 0; // 保證不會變成負數

drawGameCanvas(); // 更新畫布顯示

}

});

</script>

</body>

</html>

完成此任務

你的答案

Lesson 6.1：繪製圓形 (圓餅圖)

目標：在畫布上畫出一個圓形（代表堆），並根據分數繪製圓的部分區域（扇形）

程式碼解析：

畫圓形邊框：

使用 ctx.arc() 繪製圓形的邊框，並用 ctx.stroke() 來顯示圓形的邊界。這讓畫布上首先呈現一個完整的圓形。

畫扇形：

我們繼續使用 ctx.arc() 來繪製扇形。fraction 變數表示扇形的比例，通過 fraction * 2 * Math.PI 計算出該扇形的角度，然後根據這個角度畫出相應的部分。

顏色設置：

圓形邊框顏色設為黑色，扇形顏色設為紅色 (ctx.fillStyle = 'red')。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 6.1</title>

<style>

body {

margin: 0;

padding: 0;

background-color: #f8f8f8;

font-family: "Microsoft JhengHei", sans-serif;

text-align: center;

}

#container {

width: 600px;

margin: 0 auto;

padding: 20px;

text-align: left;

background-color: #fff;

border: 1px solid #ccc;

margin-top: 30px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

h1 {

text-align: center;

margin-bottom: 10px;

}

canvas {

display: block;

margin: 20px auto;

border: 1px solid #ccc;

background-color: #fafafa;

}

</style>

</head>

<body>

<h1>Fraction Nim - Lesson 6.1</h1>

<p>這堂課將繪製一個圓形來代表堆，並根據分數顯示部分扇形。</p>

</div>

// 取得畫布元素

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// 初始堆的分數

let fraction = 0.5; // 這個堆的分數為 0.5

// 繪製圓形與扇形

function drawGameCanvas() {

// 設定畫布背景顏色

ctx.fillStyle = '#e0f7fa';

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 畫圓形邊框

const x = 150, y = 200, radius = 100;

ctx.beginPath();

ctx.arc(x, y, radius, 0, 2 * Math.PI); // 畫完整圓

ctx.lineWidth = 2; // 圓的邊框粗細

ctx.strokeStyle = '#000'; // 邊框顏色

ctx.stroke(); // 繪製圓邊框

// 計算扇形的角度 (這裡以 0.5 來繪製一半圓)

const angle = fraction * 2 * Math.PI;

// 畫扇形

ctx.beginPath();

ctx.moveTo(x, y); // 從圓心開始

ctx.arc(x, y, radius, 0, angle, false); // 畫扇形

ctx.closePath();

ctx.fillStyle = 'red'; // 扇形顏色

ctx.fill(); // 填充扇形

}

// 呼叫繪製畫布

drawGameCanvas();

</script>

</body>

</html>

畫出3個

你的答案

Lesson 6.2 — 顯示分數並更新目標：在繪製的圓形中顯示每個堆的分數，並根據分數更新扇形。

Lesson 6.2 說明：

繪製圓形與扇形：

我們使用 ctx.arc() 繪製圓形，並透過計算 fraction * 2 * Math.PI 來決定扇形的角度。
使用 ctx.fillText() 顯示當前堆的分數。

互動功能：

當玩家點擊圓形時，堆的分數會減少 0.125，並更新畫布顯示。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 6.2</title>

<style>

body {

margin: 0;

padding: 0;

background-color: #f8f8f8;

font-family: "Microsoft JhengHei", sans-serif;

text-align: center;

}

#container {

width: 600px;

margin: 0 auto;

padding: 20px;

text-align: left;

background-color: #fff;

border: 1px solid #ccc;

margin-top: 30px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

h1 {

text-align: center;

margin-bottom: 10px;

}

canvas {

display: block;

margin: 20px auto;

border: 1px solid #ccc;

background-color: #fafafa;

}

</style>

</head>

<body>

<h1>Fraction Nim - Lesson 6.2</h1>

<p>這堂課將在圓形中顯示每個堆的分數，並更新圓形的扇形。</p>

<p>當玩家點擊圓形時，分數將減少並更新顯示。</p>

</div>

// 取得畫布元素

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// 初始堆的分數

let fraction = 0.5; // 初始分數為 0.5

// 繪製圓形與扇形並顯示分數

function drawGameCanvas() {

// 設定畫布背景顏色

ctx.fillStyle = '#e0f7fa';

ctx.fillRect(0, 0, canvas.width, canvas.height);

// 畫圓形邊框

const x = 150, y = 200, radius = 100;

ctx.beginPath();

ctx.arc(x, y, radius, 0, 2 * Math.PI); // 畫完整圓

ctx.lineWidth = 2; // 圓的邊框粗細

ctx.strokeStyle = '#000'; // 邊框顏色

ctx.stroke(); // 繪製圓邊框

// 計算扇形的角度 (這裡以 0.5 來繪製一半圓)

const angle = fraction * 2 * Math.PI;

// 畫扇形

ctx.beginPath();

ctx.moveTo(x, y); // 從圓心開始

ctx.arc(x, y, radius, 0, angle, false); // 畫扇形

ctx.closePath();

ctx.fillStyle = 'red'; // 扇形顏色

ctx.fill();

// 顯示分數文字

ctx.fillStyle = '#000000'; // 設定文字顏色

ctx.font = '20px Arial'; // 設定文字大小

ctx.fillText(fraction.toFixed(3), x, y); // 顯示文字在圓形中

}

// 呼叫繪製畫布

drawGameCanvas();

// 在畫布上監聽滑鼠點擊

canvas.addEventListener('click', (e) => {

const mouseX = e.clientX - canvas.offsetLeft;

const mouseY = e.clientY - canvas.offsetTop;

// 簡單的範圍檢查 (如果滑鼠點擊的區域在堆內)

if (Math.sqrt(Math.pow(mouseX - 150, 2) + Math.pow(mouseY - 200, 2)) <= 100) {

fraction -= 0.125; // 減少該堆的分數

if (fraction < 0) fraction = 0; // 保證不會變成負數

drawGameCanvas(); // 重新繪製畫布

}

});

</script>

</body>

</html>

任務刪減到最少文字，執行結果不變

你的答案

Lesson 7.1：繪製堆疊的圓形

目標：繪製多顆圓形來代表每個堆，並顯示堆的總數量和對應的分數。

Lesson 7.1 說明：

繪製堆疊圓形：

我們在畫布上繪製多顆圓形，代表堆積的分數，每顆圓形依據堆的數量堆疊在一起。這樣能清楚地視覺化每個堆的石頭數量。

顯示堆的數量與分數：

在每個堆的底部顯示堆的數量和對應的分數（例如：4 顆 / 0.50）。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 7.1</title>

<style>

body {

margin: 0;

padding: 0;

background-color: #f8f8f8;

font-family: "Microsoft JhengHei", sans-serif;

text-align: center;

}

#container {

width: 600px;

margin: 0 auto;

padding: 20px;

text-align: left;

background-color: #fff;

border: 1px solid #ccc;

margin-top: 30px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

h1 {

text-align: center;

margin-bottom: 10px;

}

canvas {

display: block;

margin: 20px auto;

border: 1px solid #ccc;

background-color: #fafafa;

}

</style>

</head>

<body>

<h1>Fraction Nim - Lesson 7.1</h1>

<p>這堂課將繪製堆疊的圓形來表示每個堆的數量與分數。</p>

</div>

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// 代表堆的數據

const piles = [

{ color: 'red', count: 4, fraction: 0.50 },

{ color: 'blue', count: 1, fraction: 0.13 },

{ color: 'green', count: 3, fraction: 0.38 }

];

// 畫圓形堆疊

function drawPile(x, y, pile) {

for (let i = 0; i < pile.count; i++) {

ctx.beginPath();

ctx.arc(x, y - i * 40, 20, 0, 2 * Math.PI); // 每顆圓形之間的間距為 40

ctx.fillStyle = pile.color;

ctx.fill();

ctx.stroke();

}

// 顯示堆的數量與分數

ctx.fillStyle = '#000';

ctx.font = '14px Arial';

ctx.fillText(`${pile.count} 顆 / ${pile.fraction.toFixed(3)}`, x - 20, y + 10);

}

// 繪製所有堆

function drawGameCanvas() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

// 繪製每個堆

piles.forEach((pile, index) => {

const x = 150 + index * 200; // 每個堆水平位置間隔 200

const y = 300; // 每個堆的垂直位置

drawPile(x, y, pile);

});

}

drawGameCanvas();

</script>

</body>

</html>

調整位置

你的答案

Lesson 3

重點：在第一堂課的基礎上，加入「第二個段落」或「更多提示」，同樣不使用 CSS 或 JavaScript，但讓讀者看到如何在網頁中增加額外內容。

Lesson 7.2 說明：

互動功能：

當玩家點擊圓形時，該堆的 count 會減少，並且 fraction 也會根據移除的石頭數量減少。

更新畫布：

每次移除一顆石頭或減少分數後，畫布會重新繪製，顯示更新後的堆狀態。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 7.2</title>

<style>

body {

margin: 0;

padding: 0;

background-color: #f8f8f8;

font-family: "Microsoft JhengHei", sans-serif;

text-align: center;

}

#container {

width: 600px;

margin: 0 auto;

padding: 20px;

text-align: left;

background-color: #fff;

border: 1px solid #ccc;

margin-top: 30px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

h1 {

text-align: center;

margin-bottom: 10px;

}

canvas {

display: block;

margin: 20px auto;

border: 1px solid #ccc;

background-color: #fafafa;

}

</style>

</head>

<body>

<h1>Fraction Nim - Lesson 7.2</h1>

<p>這堂課將實現點擊堆來移除分數，並更新堆的狀態。</p>

</div>

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

// 代表堆的數據

const piles = [

{ color: 'red', count: 4, fraction: 0.50 },

{ color: 'blue', count: 1, fraction: 0.13 },

{ color: 'green', count: 3, fraction: 0.38 }

];

// 畫圓形堆疊

function drawPile(x, y, pile) {

for (let i = 0; i < pile.count; i++) {

ctx.beginPath();

ctx.arc(x, y - i * 40, 20, 0, 2 * Math.PI); // 每顆圓形之間的間距為 40

ctx.fillStyle = pile.color;

ctx.fill();

ctx.stroke();

}

// 顯示堆的數量與分數

ctx.fillStyle = '#000';

ctx.font = '14px Arial';

ctx.fillText(`${pile.count} 顆 / ${pile.fraction.toFixed(3)}`, x - 20, y + 10);

}

// 繪製所有堆

function drawGameCanvas() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

// 繪製每個堆

piles.forEach((pile, index) => {

const x = 150 + index * 200; // 每個堆水平位置間隔 200

const y = 300; // 每個堆的垂直位置

drawPile(x, y, pile);

});

}

// 點擊堆來移除分數

canvas.addEventListener('click', (e) => {

const mouseX = e.clientX - canvas.offsetLeft;

const mouseY = e.clientY - canvas.offsetTop;

piles.forEach((pile, index) => {

const x = 150 + index * 200;

const y = 300;

// 檢查是否點擊到堆

for (let i = 0; i < pile.count; i++) {

const dx = mouseX - x;

const dy = mouseY - (y - i * 40);

if (Math.sqrt(dx * dx + dy * dy) <= 20) {

pile.count -= 1; // 移除一顆石頭

pile.fraction -= 0.125; // 減少分數

if (pile.count < 0) pile.count = 0; // 保證石頭數量不小於 0

if (pile.fraction < 0) pile.fraction = 0; // 保證分數不小於 0

drawGameCanvas(); // 重新繪製畫布

return;

}

});

drawGameCanvas(); // 初始繪製畫布

</script>

</body>

</html>

你的答案

Lesson 8：勝利條件與遊戲結束判斷

目標：當所有堆的分數降至 0 時，顯示「玩家勝利」，並停止遊戲。

<!DOCTYPE html>

<head>

<title>Fraction Nim - Lesson 8</title>

<style>

body {

margin: 0;

padding: 0;

background-color: #f8f8f8;

font-family: "Microsoft JhengHei", sans-serif;

text-align: center;

}

#container {

width: 600px;

margin: 0 auto;

padding: 20px;

text-align: left;

background-color: #fff;

border: 1px solid #ccc;

margin-top: 30px;

box-shadow: 0 0 5px rgba(0,0,0,0.1);

}

h1 {

text-align: center;

margin-bottom: 10px;

}

canvas {

display: block;

margin: 20px auto;

border: 1px solid #ccc;

background-color: #fafafa;

}

#feedback {

margin-top: 20px;

text-align: center;

font-size: 16px;

color: #333;

}

</style>

</head>

<body>

<h1>Fraction Nim - Lesson 8</h1>

<p>這堂課將顯示玩家點擊了哪個堆，並回饋移除的石頭數量。</p>

<div id="feedback">等待玩家操作...</div>

</div>

const canvas = document.getElementById('gameCanvas');

const ctx = canvas.getContext('2d');

const feedback = document.getElementById('feedback');

// 代表堆的數據

const piles = [

{ color: 'red', count: 4, fraction: 0.50 },

{ color: 'blue', count: 1, fraction: 0.13 },

{ color: 'green', count: 3, fraction: 0.38 }

];

// 畫圓形堆疊

function drawPile(x, y, pile) {

for (let i = 0; i < pile.count; i++) {

ctx.beginPath();

ctx.arc(x, y - i * 40, 20, 0, 2 * Math.PI); // 每顆圓形之間的間距為 40

ctx.fillStyle = pile.color;

ctx.fill();

ctx.stroke();

}

// 顯示堆的數量與分數

ctx.fillStyle = '#000';

ctx.font = '14px Arial';

ctx.fillText(`${pile.count} 顆 / ${pile.fraction.toFixed(3)}`, x - 20, y + 10);

}

// 繪製所有堆

function drawGameCanvas() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

// 繪製每個堆

piles.forEach((pile, index) => {

const x = 150 + index * 200; // 每個堆水平位置間隔 200

const y = 300; // 每個堆的垂直位置

drawPile(x, y, pile);

});

}

// 點擊堆來移除分數並回饋訊息

canvas.addEventListener('click', (e) => {

const mouseX = e.clientX - canvas.offsetLeft;

const mouseY = e.clientY - canvas.offsetTop;

piles.forEach((pile, index) => {

const x = 150 + index * 200;

const y = 300;

// 檢查是否點擊到堆

for (let i = 0; i < pile.count; i++) {

const dx = mouseX - x;

const dy = mouseY - (y - i * 40);

if (Math.sqrt(dx * dx + dy * dy) <= 20) {

pile.count -= 1; // 移除一顆石頭

pile.fraction -= 0.125; // 減少分數

if (pile.count < 0) pile.count = 0; // 保證石頭數量不小於 0

if (pile.fraction < 0) pile.fraction = 0; // 保證分數不小於 0

// 更新回饋訊息

feedback.textContent = `你從 ${pile.color} 堆中移除了一顆石頭！`;

drawGameCanvas(); // 重新繪製畫布

return;

}

});

drawGameCanvas(); // 初始繪製畫布

</script>

</body>

</html>

ChatGPT-Assist-AI-Solving

搜尋此網誌

ChatGPT生成Fraction Nim AI策略對戰遊戲

Lesson 1
重點：純粹的 HTML，沒有任何多餘標籤或樣式設定。

Lesson 1 說明

Lesson 2

Lesson 3

Lesson 4.1 — 基本 HTML 架構與畫布設定

Lesson 4.1 說明

Lesson 4.2 — 在畫布上繪製矩形

Lesson 4.2 說明

Lesson 4.3 — 在矩形內部顯示文字

Lesson 4.3 說明

Lesson 4.4 — 監聽滑鼠點擊並檢查點擊範圍

Lesson 4.4 說明

Lesson 3

Lesson 5 說明

Lesson 6.1：繪製圓形 (圓餅圖)

程式碼解析：

Lesson 6.2 — 顯示分數並更新目標：在繪製的圓形中顯示每個堆的分數，並根據分數更新扇形。

Lesson 6.2 說明：

Lesson 7.1：繪製堆疊的圓形

Lesson 7.1 說明：

Lesson 3

Lesson 7.2 說明：

Lesson 8：勝利條件與遊戲結束判斷

ChatGPT生成Fraction Nim AI策略對戰遊戲

Lesson 1 重點：純粹的 HTML，沒有任何多餘標籤或樣式設定。

Lesson 1 說明

Lesson 2

Lesson 3

Lesson 4.1 — 基本 HTML 架構與畫布設定

Lesson 4.1 說明

Lesson 4.2 — 在畫布上繪製矩形

Lesson 4.2 說明

Lesson 4.3 — 在矩形內部顯示文字

Lesson 4.3 說明

Lesson 4.4 — 監聽滑鼠點擊並檢查點擊範圍

Lesson 4.4 說明

Lesson 3

Lesson 5 說明

Lesson 6.1：繪製圓形 (圓餅圖)

程式碼解析：

Lesson 6.2 — 顯示分數並更新 目標：在繪製的圓形中顯示每個堆的分數，並根據分數更新扇形。

Lesson 6.2 說明：

Lesson 7.1：繪製堆疊的圓形

Lesson 7.1 說明：

Lesson 3

Lesson 7.2 說明：

Lesson 8：勝利條件與遊戲結束判斷

Lesson 1
重點：純粹的 HTML，沒有任何多餘標籤或樣式設定。

Lesson 6.2 — 顯示分數並更新目標：在繪製的圓形中顯示每個堆的分數，並根據分數更新扇形。