一個新的遊戲創意

ejsoon · 2026-07-27T11:55:12+00:00

寫一個html+js，當一個四邊形的內角為36,72,144,108度時，有三種順序組合。在這三種情況中，當最長邊與最短邊之差最小時，給出每種情況的四條邊邊長之比，並畫出三種svg四邊形。 gemini 3.1 pro 這是一個非常有趣的幾何最佳化問題！四邊形的四個內角一旦固定，形狀便有了一個自由度（類似於可以被「拉伸」）。透過將其放置在座標系中並解出閉合條件（$x, y$ 軸的投影總和為 0），我們可以將四條邊長參數化，進而找出使「最長邊與最短邊差異最小」（即最接近等邊）的邊長比例。令黃金比例 $\phi = \frac{1+\sqrt{5}}{2} \approx 1.618$。在所有情況下，當剩餘的兩個自由邊長**相等**時，最長邊與最短邊之差會達到最小。以下是三種內角順序組合的邊長比例解析： ### **三種組合的邊長比例** 1. **情況 1：內角順序 $36^\circ, 72^\circ, 108^\circ, 144^\circ$** * 當差異最小時，對應這四個角之間的邊長比例為： $$\phi^2 : 1 : 1 : \phi$$ *(約為 $2.618 : 1 : 1 : 1.618$)* * **說明**：連結 $144^\circ$ 與 $36^\circ$ 的邊最長，介於 $72^\circ$ 與 $108^\circ$ 之間的兩條邊最短且相等。 2. **情況 2：內角順序 $36^\circ, 72^\circ, 144^\circ, 108^\circ$** * 當差異最小時，邊長比例為： $$2\phi : 1 : 1 : \phi^2$$ *(約為 $3.236 : 1 : 1 : 2.618$)* * **說明**：連結 $108^\circ$ 與 $36^\circ$ 的邊最長，介於 $36^\circ, 72^\circ, 144^\circ$ 之間的兩條邊最短且相等。 3. **情況 3：內角順序 $36^\circ, 108^\circ, 72^\circ, 144^\circ$** * 當差異最小時，邊長比例為： $$2 : 1 : 1 : \phi$$ *(約為 $2 : 1 : 1 : 1.618$)* * **說明**：連結 $144^\circ$ 與 $36^\circ$ 的邊最長（為 $2$），介於 $36^\circ, 108^\circ, 72^\circ$ 之間的兩邊等長且最短。 --- ### **HTML + JavaScript + SVG 實作** 請將以下程式碼存成 `.html` 檔案並在瀏覽器中開啟。這支程式會根據上述求出的最佳化邊長比例，自動計算頂點座標並繪製出三個精確的 SVG 四邊形。 ```html <!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <title>特定內角四邊形最佳化比例</title> <style> body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f8f9fa; color: #333; display: flex; flex-direction: column; align-items: center; padding: 20px; } h1 { color: #2c3e50; margin-bottom: 30px; } .container { display: flex; flex-wrap: wrap; gap: 25px; justify-content: center; max-width: 1000px; } .card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: center; width: 280px; } .card h3 { margin-top: 0; color: #34495e; font-size: 1.1em; } .ratio-text { background: #eef2f5; padding: 8px; border-radius: 6px; font-weight: bold; color: #2980b9; margin-bottom: 15px; font-family: monospace; font-size: 1.2em; } svg { width: 100%; height: 250px; border: 1px dashed #dcdde1; border-radius: 8px; background-color: #ffffff; } polygon { fill: rgba(52, 152, 219, 0.15); stroke: #2980b9; stroke-width: 2.5; stroke-linejoin: round; } text.label { font-size: 14px; fill: #c0392b; font-weight: bold; text-anchor: middle; user-select: none; } </style> </head> <body> <h1>四邊形極值邊長比例與圖形</h1> <div class="container" id="svg-container"></div> <script> const phi = (1 + Math.sqrt(5)) / 2; const phi2 = phi * phi; // 參數定義：angles 為四個頂點的內角(順序), sides 為對應順序的邊長比例 const data = [ { name: "情況 1: 36°, 72°, 108°, 144°", angles: [36, 72, 108, 144], sides: [phi2, 1, 1, phi], ratioText: "φ² : 1 : 1 : φ" }, { name: "情況 2: 36°, 72°, 144°, 108°", angles: [36, 72, 144, 108], sides: [2 * phi, 1, 1, phi2], ratioText: "2φ : 1 : 1 : φ²" }, { name: "情況 3: 36°, 108°, 72°, 144°", angles: [36, 108, 72, 144], sides: [2, 1, 1, phi], ratioText: "2 : 1 : 1 : φ" } ]; const container = document.getElementById('svg-container'); const deg2rad = Math.PI / 180; data.forEach(item => { let pts = [{x: 0, y: 0}]; let currentAngle = 0; // 依據邊長和偏轉角(180 - 內角)計算頂點座標 for(let i = 0; i < 3; i++) { let p = pts[pts.length - 1]; let nx = p.x + item.sides[i] * Math.cos(currentAngle); // SVG 的 Y 軸是向下的，所以要減去 sin 保持幾何直覺（逆時針建構） let ny = p.y - item.sides[i] * Math.sin(currentAngle); pts.push({x: nx, y: ny}); // 下一個轉向角度 currentAngle += (180 - item.angles[i + 1]) * deg2rad; } // 計算 Bounding box 來設定 viewBox let minX = Math.min(...pts.map(p => p.x)); let maxX = Math.max(...pts.map(p => p.x)); let minY = Math.min(...pts.map(p => p.y)); let maxY = Math.max(...pts.map(p => p.y)); let width = maxX - minX; let height = maxY - minY; let pad = Math.max(width, height) * 0.25; // 邊距 // 計算幾何中心以協助放置角度文字標籤 let cx = (minX + maxX) / 2; let cy = (minY + maxY) / 2; let labels = ""; pts.forEach((p, i) => { let dx = p.x - cx; let dy = p.y - cy; let len = Math.sqrt(dx*dx + dy*dy); // 將文字沿著中心向外推 let lx = p.x + (dx/len) * (pad * 0.5); let ly = p.y + (dy/len) * (pad * 0.5) + 5; labels += `<text x="${lx}" y="${ly}" class="label" dominant-baseline="middle">${item.angles[i]}°</text>`; }); let polyPts = pts.map(p => `${p.x},${p.y}`).join(" "); let viewBox = `${minX - pad} ${minY - pad} ${width + 2*pad} ${height + 2*pad}`; // 生成 Card UI let card = document.createElement('div'); card.className = 'card'; card.innerHTML = ` <h3>${item.name}</h3> <div class="ratio-text">${item.ratioText}</div> <svg viewBox="${viewBox}"> <polygon points="${polyPts}" /> ${labels} </svg> `; container.appendChild(card); }); </script> </body> </html> ```

136 帖子

分页： 10 / 10
- 前往页面…：
上一页
1
…
6
7
8
9
10

BobMaster: 锋芒初露; 帖子： 1466; 注册时间： 2020年 12月 7日 08:05; 来自： 神秘的东方; 我的状态： 🎯; 联系：
联系 BobMaster

网站网易云

Re: 一個新的遊戲創意

引用

帖子由 BobMaster » 2026年 8月 13日 23:55

试试GPT Sol模型会做出什么~

人生如音乐，欢乐且自由

136 帖子

分页： 10 / 10
- 前往页面…：
上一页
1
…
6
7
8
9
10

相似主题

回复总数

阅读次数

最新帖子

一個完全不懂編程的人用AI做的遊戲

最新帖子由 BobMaster « 2026年 7月 19日 12:30
发表于位于 Javascript
回复总数： 1
由 ejsoon » 2026年 7月 19日 12:15 » 位于 Javascript

1 回复总数

8224 阅读次数

最新帖子由 BobMaster
2026年 7月 19日 12:30
一個新遊戲gyges

最新帖子由 ejsoon « 2026年 2月 11日 15:21
发表于位于益智弈棋
回复总数： 1
由 ejsoon » 2026年 2月 11日 14:22 » 位于益智弈棋

1 回复总数

8893 阅读次数

最新帖子由 ejsoon
2026年 2月 11日 15:21
在MindUp頻道上見到的幾個新的益智小遊戲

最新帖子由 ejsoon « 2025年 12月 9日 21:51
发表于位于益智弈棋
回复总数： 1
由 ejsoon » 2025年 12月 9日 15:43 » 位于益智弈棋

1 回复总数

7380 阅读次数

最新帖子由 ejsoon
2025年 12月 9日 21:51
tony ann，一個新的華人大師誕生了

最新帖子由 ejsoon « 2025年 8月 28日 22:47
发表于位于音乐厅

由 ejsoon » 2025年 8月 28日 22:47 » 位于音乐厅

0 回复总数

8972 阅读次数

最新帖子由 ejsoon
2025年 8月 28日 22:47

回到 “益智弈棋”

在线用户

正浏览此版面之用户：没有注册用户和 19 访客