正在開發新遊戲：星•球
Re: 正在開發新遊戲：星•球
代码： 全选
阿基米德多面體（Archimedean Solids）是一類**半正多面體**。它們由兩種或兩種以上的正多邊形組成，且每個頂點的情況（頂點組合）完全相同。
阿基米德多面體共有 **13 種**（如果不算上對稱異構體，如手性扭棱立方體）。
以下是這 13 種多面體及其組合方式（頂點配置）：
---
### 1. 截角系列 (Truncated Solids)
透過切去正多面體的頂點而得。
| 名稱 | 組成面 | 頂點配置 (Vertex Config) |
| --- | --- | --- |
| **截角正四面體** | 4 個正三角形、4 個正六邊形 | $3 \cdot 6 \cdot 6$ |
| **截角正六面體 (截角立方體)** | 8 個正三角形、6 個正八邊形 | $3 \cdot 8 \cdot 8$ |
| **截角正八面體** | 6 個正方形、8 個正六邊形 | $4 \cdot 6 \cdot 6$ |
| **截角正十二面體** | 20 個正三角形、12 個正十邊形 | $3 \cdot 10 \cdot 10$ |
| **截角正二十面體** | 12 個正五邊形、20 個正六邊形 | $5 \cdot 6 \cdot 6$ |
> **註：** 截角正二十面體就是我們熟悉的**足球**形狀。
---
### 2. 準正多面體 (Quasiregular Solids)
具有高度對稱性，邊界特徵介於兩種正多面體之間。
| 名稱 | 組成面 | 頂點配置 |
| --- | --- | --- |
| **截半立方體** | 8 個正三角形、6 個正方形 | $3 \cdot 4 \cdot 3 \cdot 4$ |
| **截半二十面體** | 20 個正三角形、12 個正五邊形 | $3 \cdot 5 \cdot 3 \cdot 5$ |
---
### 3. 斜方截半系列 (Rhombicosidodecahedron series)
這類多面體看起來像是將正多面體的面「拉開」並用正方形填充縫隙。
| 名稱 | 組成面 | 頂點配置 |
| --- | --- | --- |
| **小斜方截半立方體** | 8 個正三角形、18 個正方形 | $3 \cdot 4 \cdot 4 \cdot 4$ |
| **大斜方截半立方體 (截角截半立方體)** | 12 個正方形、8 個正六邊形、6 個正八邊形 | $4 \cdot 6 \cdot 8$ |
| **小斜方截半二十面體** | 20 個正三角形、30 個正方形、12 個正五邊形 | $3 \cdot 4 \cdot 5 \cdot 4$ |
| **大斜方截半二十面體 (截角截半二十面體)** | 30 個正方形、20 個正六邊形、12 個正十邊形 | $4 \cdot 6 \cdot 10$ |
---
### 4. 扭棱系列 (Snub Solids)
這類多面體具有手性（有左旋和右旋之分），由大量的正三角形組成。
| 名稱 | 組成面 | 頂點配置 |
| --- | --- | --- |
| **扭棱立方體** | 32 個正三角形、6 個正方形 | $3 \cdot 3 \cdot 3 \cdot 3 \cdot 4$ |
| **扭棱二十面體** | 80 個正三角形、12 個正五邊形 | $3 \cdot 3 \cdot 3 \cdot 3 \cdot 5$ |
---
### 如何閱讀「頂點配置」？
頂點配置（如 $3 \cdot 6 \cdot 6$）代表在該多面體的每一個頂點上，圍繞它的多邊形種類。例如：
* **$3 \cdot 6 \cdot 6$**：表示每個頂點都連接了一個正三角形和兩個正六邊形。
* **$4 \cdot 6 \cdot 10$**：表示每個頂點連接了一個正方形、一個正六邊形和一個正十邊形。https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 正在開發新遊戲：星•球
把所有情況羅列出來，並分類：只有單個數、只有3,4、只有3,5、只有4,5、有三個數。
更改：要填滿五個位置
代码： 全选
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>數字組合儲存器 V4</title>
<style>
:root {
--primary-color: #2c3e50;
--accent-color: #3498db;
--bg-color: #f4f7f6;
--border-color: #d1d8dd;
}
body {
font-family: "Microsoft JhengHei", sans-serif;
background-color: var(--bg-color);
margin: 0; padding: 15px;
color: #333;
}
.container { max-width: 1000px; margin: auto; }
.header-bar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px; border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
}
.btn-group { display: flex; gap: 8px; }
.btn-tool {
padding: 6px 14px; cursor: pointer; border: 1px solid #aaa;
background: white; border-radius: 4px; font-size: 0.85rem;
}
h2 {
font-size: 1.1rem; color: var(--primary-color);
margin: 25px 0 12px; border-left: 4px solid var(--accent-color);
padding-left: 10px;
}
.wrap-container {
display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 10px;
}
.combo-box {
flex: 1 1 calc(33.333% - 12px);
min-width: 150px;
background: white; border-radius: 6px;
border: 1px solid var(--border-color);
display: flex; flex-direction: column;
}
@media (max-width: 600px) {
.combo-box { flex: 1 1 calc(50% - 12px); }
}
.number-header {
background: #f8f9fa; color: #2c3e50; text-align: center;
padding: 6px; font-size: 1.3rem; font-weight: bold;
border-bottom: 1px solid var(--border-color);
letter-spacing: 2px;
}
textarea {
width: 100%; border: none; padding: 10px; box-sizing: border-box;
resize: none; font-size: 1rem; line-height: 1.5; outline: none;
overflow: hidden;
font-family: inherit;
/* 設定最小高度，確保空的時候也能顯示一行 */
min-height: 2.5em;
}
.footer-bar {
margin-top: 50px; padding: 25px 0; border-top: 1px solid #ccc;
display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;
}
.btn-main {
padding: 12px 24px; background: var(--primary-color);
color: white; border: none; border-radius: 6px; cursor: pointer;
font-size: 1rem; font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="header-bar">
<h1 style="font-size: 1.4rem; margin: 0;">組合儲存器</h1>
<div class="btn-group">
<button class="btn-tool" onclick="undo()">Undo</button>
<button class="btn-tool" onclick="redo()">Redo</button>
</div>
</div>
<div id="display-area"></div>
<div class="footer-bar">
<button class="btn-main" onclick="downloadData()" style="background: #27ae60;">Download (JSON)</button>
<button class="btn-main" onclick="document.getElementById('uploadInput').click()">Upload (JSON)</button>
<input type="file" id="uploadInput" style="display:none" accept=".txt,.json" onchange="uploadData(this)">
</div>
</div>
<script>
const nums = [3, 4, 5];
const toFullWidth = str => str.toString().replace(/[0-9]/g, s => String.fromCharCode(s.charCodeAt(0) + 0xFEE0));
let history = [];
let historyStep = -1;
// 1. 自動調整高度的核心函數
function autoResize(el) {
if (!el) return;
el.style.height = 'auto';
// 只有當有文字時才設定 scrollHeight，否則依賴 CSS 的 min-height
if (el.value !== "") {
el.style.height = el.scrollHeight + 'px';
}
}
// 2. 監聽視窗大小變動 (處理切換電腦版/手機版模式)
window.addEventListener('resize', () => {
document.querySelectorAll('textarea').forEach(autoResize);
});
function getRepetitiveCombos(arr, n) {
const res = [];
const gen = (curr, start) => {
if (curr.length === n) { res.push(curr.join('')); return; }
for (let i = start; i < arr.length; i++) gen([...curr, arr[i]], i);
};
gen([], 0); return res;
}
const allKeys = getRepetitiveCombos(nums, 5);
const categories = [
{ title: "只有單個數", filter: k => new Set(k).size === 1 },
{ title: "只有３, ４", filter: k => new Set(k).size === 2 && ![...k].some(v => v == '5') },
{ title: "只有３, ５", filter: k => new Set(k).size === 2 && ![...k].some(v => v == '4') },
{ title: "只有４, ５", filter: k => new Set(k).size === 2 && ![...k].some(v => v == '3') },
{ title: "有三個數", filter: k => new Set(k).size === 3 }
];
const displayArea = document.getElementById('display-area');
categories.forEach(cat => {
const matched = allKeys.filter(cat.filter);
if (matched.length > 0) {
const h2 = document.createElement('h2'); h2.innerText = cat.title;
const wrap = document.createElement('div'); wrap.className = 'wrap-container';
matched.forEach(key => {
const box = document.createElement('div');
box.className = 'combo-box';
box.innerHTML = `
<div class="number-header">${toFullWidth(key)}</div>
<textarea id="txt-${key}" placeholder="..." oninput="handleInput('${key}', this)"></textarea>
`;
wrap.appendChild(box);
});
displayArea.appendChild(h2); displayArea.appendChild(wrap);
}
});
function saveState() {
const currentState = {};
allKeys.forEach(k => { currentState[k] = document.getElementById('txt-'+k).value; });
if (historyStep === -1 || JSON.stringify(currentState) !== JSON.stringify(history[historyStep])) {
history = history.slice(0, historyStep + 1);
history.push(currentState);
historyStep++;
localStorage.setItem('starball_v4_latest', JSON.stringify(currentState));
}
}
function handleInput(key, el) {
autoResize(el);
saveState();
}
function loadState(state) {
if (!state) return;
Object.keys(state).forEach(k => {
const el = document.getElementById('txt-'+k);
if (el) {
el.value = state[k];
// 延遲執行確保 DOM 已渲染完成
setTimeout(() => autoResize(el), 0);
}
});
}
function undo() {
if (historyStep > 0) {
historyStep--;
loadState(history[historyStep]);
}
}
function redo() {
if (historyStep < history.length - 1) {
historyStep++;
loadState(history[historyStep]);
}
}
function downloadData() {
const data = history[historyStep] || {};
const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'text/plain'});
const now = new Date();
const ts = now.getFullYear() +
String(now.getMonth()+1).padStart(2,'0') +
String(now.getDate()).padStart(2,'0') + "_" +
String(now.getHours()).padStart(2,'0') +
String(now.getMinutes()).padStart(2,'0') +
String(now.getSeconds()).padStart(2,'0');
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `starballgame_${ts}.txt`;
a.click();
}
function uploadData(input) {
const file = input.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
try {
const data = JSON.parse(e.target.result);
loadState(data);
saveState();
alert('數據已匯入！');
} catch (err) { alert('檔案格式錯誤'); }
};
reader.readAsText(file);
}
window.onload = () => {
const saved = localStorage.getItem('starball_v4_latest');
if (saved) {
const data = JSON.parse(saved);
loadState(data);
history = [data];
historyStep = 0;
} else {
saveState();
}
};
</script>
</body>
</html>
上次由 ejsoon 在 2026年 5月 8日 12:51，总共编辑 1 次。
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 正在開發新遊戲：星•球
代码： 全选
這是一個包含 13 種阿基米德多面體的 HTML 表格代碼。為了確保圖片能正常顯示，我使用了來自 **Wikimedia Commons** 的標準 SVG 資源。
你可以將以下代碼保存為 `.html` 文件並在瀏覽器中打開。
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿基米德多面體列表</title>
<style>
body { font-family: sans-serif; line-height: 1.6; padding: 20px; background-color: #f4f4f9; }
table { width: 100%; border-collapse: collapse; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
th, td { border: 1px solid #ddd; padding: 12px; text-align: center; }
th { background-color: #2c3e50; color: white; }
tr:nth-child(even) { background-color: #f9f9f9; }
img { width: 80px; height: 80px; transition: transform 0.3s; }
img:hover { transform: scale(1.5); }
.config { font-family: "Courier New", monospace; color: #e74c3c; font-weight: bold; }
</style>
</head>
<body>
<h2 style="text-align: center;">阿基米德多面體 (Archimedean Solids)</h2>
<table>
<thead>
<tr>
<th>名稱</th>
<th>圖示 (SVG)</th>
<th>組成面 (正多邊形)</th>
<th>頂點組合</th>
</tr>
</thead>
<tbody>
<tr>
<td>截角正四面體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Truncated_tetrahedron.svg" alt="Truncated tetrahedron"></td>
<td>4個三角形、4個六邊形</td>
<td class="config">3.6.6</td>
</tr>
<tr>
<td>截半立方體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Cuboctahedron.svg" alt="Cuboctahedron"></td>
<td>8個三角形、6個正方形</td>
<td class="config">3.4.3.4</td>
</tr>
<tr>
<td>截角正六面體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Truncated_cube.svg" alt="Truncated cube"></td>
<td>8個三角形、6個八邊形</td>
<td class="config">3.8.8</td>
</tr>
<tr>
<td>截角正八面體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/Truncated_octahedron.svg" alt="Truncated octahedron"></td>
<td>6個正方形、8個六邊形</td>
<td class="config">4.6.6</td>
</tr>
<tr>
<td>小斜方截半立方體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/1d/Rhombicuboctahedron.svg" alt="Rhombicuboctahedron"></td>
<td>8個三角形、18個正方形</td>
<td class="config">3.4.4.4</td>
</tr>
<tr>
<td>大斜方截半立方體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/a/ad/Great_rhombicuboctahedron.svg" alt="Great rhombicuboctahedron"></td>
<td>12個正方形、8個六邊形、6個八邊形</td>
<td class="config">4.6.8</td>
</tr>
<tr>
<td>扭棱立方體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Snub_cube.svg" alt="Snub cube"></td>
<td>32個三角形、6個正方形</td>
<td class="config">3.3.3.3.4</td>
</tr>
<tr>
<td>截半二十面體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Icosidodecahedron.svg" alt="Icosidodecahedron"></td>
<td>20個三角形、12個五邊形</td>
<td class="config">3.5.3.5</td>
</tr>
<tr>
<td>截角正十二面體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Truncated_dodecahedron.svg" alt="Truncated dodecahedron"></td>
<td>20個三角形、12個十邊形</td>
<td class="config">3.10.10</td>
</tr>
<tr>
<td>截角正二十面體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/7/7b/Truncated_icosahedron.svg" alt="Truncated icosahedron"></td>
<td>12個五邊形、20個六邊形</td>
<td class="config">5.6.6</td>
</tr>
<tr>
<td>小斜方截半二十面體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/9/90/Rhombicosidodecahedron.svg" alt="Rhombicosidodecahedron"></td>
<td>20個三角形、30個正方形、12個五邊形</td>
<td class="config">3.4.5.4</td>
</tr>
<tr>
<td>大斜方截半二十面體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/2/22/Great_rhombicosidodecahedron.svg" alt="Great rhombicosidodecahedron"></td>
<td>30個正方形、20個六邊形、12個十邊形</td>
<td class="config">4.6.10</td>
</tr>
<tr>
<td>扭棱二十面體</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/b/bb/Snub_dodecahedron.svg" alt="Snub dodecahedron"></td>
<td>80個三角形、12個五邊形</td>
<td class="config">3.3.3.3.5</td>
</tr>
</tbody>
</table>
</body>
</html>
```
### 重點說明：
1. **SVG 圖片來源**：使用了 Wikimedia Commons 的圖標，這些圖標質量高且加載速度快，且支持透明背景，適合各種主題。
2. **頂點組合 (Vertex Configuration)**：雖然你沒要求，但我額外加上了這一欄，因為這是區分阿基米德多面體的關鍵數學指標。
3. **交互效果**：在 CSS 中加入了 `hover` 效果，當鼠標懸停在圖片上時會略微放大，方便看清細節。
4. **響應式設計**：表格會根據窗口大小調整寬度。https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 正在開發新遊戲：星•球
代码： 全选
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿基米德多面體詳解 - 進階版</title>
<style>
body { font-family: "Segoe UI", "Microsoft JhengHei", sans-serif; line-height: 1.6; padding: 30px; background-color: #f0f2f5; color: #333; }
h1 { text-align: center; color: #1a3a5a; }
h2 { background-color: #34495e; color: white; padding: 10px 15px; border-radius: 5px; margin-top: 30px; font-size: 1.2em; }
table { width: 100%; border-collapse: collapse; background: white; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-radius: 8px; overflow: hidden; table-layout: fixed; }
th, td { border: 1px solid #e0e0e0; padding: 12px; text-align: left; word-break: break-all; }
th { background-color: #ecf0f1; color: #2c3e50; font-weight: bold; }
.img-col { width: 100px; text-align: center; cursor: pointer; }
img { width: 80px; height: 80px; object-fit: contain; display: block; margin: auto; background: #eee; }
.num-combo { cursor: pointer; transition: background 0.3s; color: #2980b9; font-weight: bold; }
.num-combo:hover { background-color: #d1ecf1; }
.num-combo.selected { background-color: #f1c40f !important; }
.reason-cell { cursor: pointer; min-height: 40px; }
textarea { width: 100%; box-sizing: border-box; font-family: inherit; }
.btn-container { text-align: center; margin-top: 40px; }
.download-btn { padding: 12px 25px; background: #27ae60; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; }
.download-btn:hover { background: #219150; }
</style>
</head>
<body>
<h1>阿基米德多面體詳解 (互動存儲版)</h1>
<div id="table-container">
</div>
<div class="btn-container">
<button class="download-btn" onclick="downloadHTML()">下載當前資料 (HTML)</button>
</div>
<input type="file" id="imageInput" accept="image/*" style="display:none">
<script>
// 初始化數據
const data = [
{ cat: "一、截角系列", name: "截角正四面體", faces: "4 個正三角形、4 個正六邊形", num: "44445", reason: "" },
{ cat: "一、截角系列", name: "截角正六面體 (截角立方體)", faces: "8 個正三角形、6 個正八邊形", num: "33345", reason: "" },
{ cat: "一、截角系列", name: "截角正八面體", faces: "6 個正方形、8 個正六邊形", num: "44555", reason: "" },
{ cat: "一、截角系列", name: "截角正十二面體", faces: "20 個正三角形、12 個正十邊形", num: "33455", reason: "" },
{ cat: "一、截角系列", name: "截角正二十面體", faces: "12 個正五邊形、20 個正六邊形", num: "45555", reason: "" },
{ cat: "二、準正多面體", name: "截半立方體", faces: "8 個正三角形、6 個正方形", num: "33344", reason: "" },
{ cat: "二、準正多面體", name: "截半二十面體", faces: "20 個正三角形、12 個正五邊形", num: "33355", reason: "" },
{ cat: "三、斜方截半系列", name: "小斜方截半立方體", faces: "8 個正三角形、18 個正方形", num: "33444", reason: "" },
{ cat: "三、斜方截半系列", name: "大斜方截半立方體", faces: "12 個正方形、8 個正六邊形、6 個正八邊形", num: "34455", reason: "" },
{ cat: "三、斜方截半系列", name: "小斜方截半二十面體", faces: "20 個正三角形、30 個正方形、12 個正五邊形", num: "33445", reason: "" },
{ cat: "三、斜方截半系列", name: "大斜方截半二十面體", faces: "30 個正方形、20 個正六邊形、12 個正十邊形", num: "34445", reason: "" },
{ cat: "四、扭棱系列", name: "扭棱立方體", faces: "32 個正三角形、6 個正方形", num: "33334", reason: "" },
{ cat: "四、扭棱系列", name: "扭棱二十面體", faces: "80 個正三角形、12 個正五邊形", num: "33335", reason: "" },
{ cat: "五、其他星狀/基礎形體", name: "正四面體", faces: "4個正三角形", num: "33333", reason: "" },
{ cat: "五、其他星狀/基礎形體", name: "立方體", faces: "6個正方形", num: "44444", reason: "" },
{ cat: "五、其他星狀/基礎形體", name: "正十二面體", faces: "12個正五邊形", num: "55555", reason: "" },
{ cat: "五、其他星狀/基礎形體", name: "正八面體", faces: "8個正三角形", num: "34444", reason: "" },
{ cat: "五、其他星狀/基礎形體", name: "正二十面體", faces: "20個正三角形", num: "35555", reason: "" },
{ cat: "五、其他星狀/基礎形體", name: "圓椎/圓柱/球", faces: "非多面體", num: "33555", reason: "圓椎" }
];
function renderTable() {
const container = document.getElementById('table-container');
const categories = [...new Set(data.map(item => item.cat))];
container.innerHTML = '';
categories.forEach(cat => {
const h2 = document.createElement('h2');
h2.innerText = cat;
container.appendChild(h2);
const table = document.createElement('table');
table.innerHTML = `<thead><tr><th>名稱</th><th class="img-col">圖片</th><th>組成面</th><th>數字組合</th><th>理由</th></tr></thead><tbody></tbody>`;
const tbody = table.querySelector('tbody');
data.filter(item => item.cat === cat).forEach(item => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.name}</td>
<td class="img-col" onclick="triggerUpload(this)"><img src="about:blank" alt="點擊上傳"></td>
<td>${item.faces}</td>
<td class="num-combo" onclick="handleSwap(this)">${item.num}</td>
<td class="reason-cell" onclick="editReason(this)">${item.reason}</td>
`;
tbody.appendChild(tr);
});
container.appendChild(table);
});
}
// --- 圖片上傳功能 ---
let currentImgTarget = null;
function triggerUpload(td) {
currentImgTarget = td.querySelector('img');
document.getElementById('imageInput').click();
}
document.getElementById('imageInput').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file && currentImgTarget) {
const reader = new FileReader();
reader.onload = (e) => { currentImgTarget.src = e.target.result; };
reader.readAsDataURL(file);
}
});
// --- 數字交換功能 ---
let selectedCombo = null;
function handleSwap(td) {
if (!selectedCombo) {
selectedCombo = td;
td.classList.add('selected');
} else if (selectedCombo === td) {
td.classList.remove('selected');
selectedCombo = null;
} else {
const temp = td.innerText;
td.innerText = selectedCombo.innerText;
selectedCombo.innerText = temp;
selectedCombo.classList.remove('selected');
selectedCombo = null;
}
}
// --- 理由編輯功能 ---
function editReason(td) {
if (td.querySelector('textarea')) return;
const oldText = td.innerText;
const textarea = document.createElement('textarea');
textarea.value = oldText;
td.innerHTML = '';
td.appendChild(textarea);
textarea.focus();
textarea.onkeydown = function(e) {
if (e.key === 'Escape') {
td.innerText = this.value;
}
};
textarea.onblur = function() {
td.innerText = this.value;
};
}
// --- 下載功能 ---
function downloadHTML() {
// 下載前清除選中狀態
if(selectedCombo) selectedCombo.classList.remove('selected');
const timestamp = new Date().toISOString().replace(/[-T:]/g, '').split('.')[0];
const filename = `starball_${timestamp.substring(0,8)}_${timestamp.substring(8,14)}.html`;
// 複製當前文件內容
const htmlContent = document.documentElement.outerHTML;
const blob = new Blob([htmlContent], { type: 'text/html' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
}
// 執行初始渲染
renderTable();
</script>
</body>
</html>https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 正在開發新遊戲：星•球
一，文件名中的日期，要用new Date()取得當前時間。
二，要保存圖片base64，數字，理由這些數據。
三，增加一個「上載保存資料(HTML)」，當上傳後，資料將填入。
代码： 全选
改進下載功能：
一，文件名中的日期，要用new Date()取得當前時間。
二，要保存圖片base64，數字，理由這些數據。
三，增加一個「上載保存資料(HTML)」，當上傳後，資料將填入。https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
Re: 正在開發新遊戲：星•球
代码： 全选
```html
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>阿基米德多面體詳解 - 進階版</title>
<style>
body{
font-family:"Segoe UI","Microsoft JhengHei",sans-serif;
line-height:1.6;
padding:30px;
background-color:#f0f2f5;
color:#333;
}
h1{
text-align:center;
color:#1a3a5a;
}
h2{
background-color:#34495e;
color:white;
padding:10px 15px;
border-radius:5px;
margin-top:30px;
font-size:1.2em;
}
table{
width:100%;
border-collapse:collapse;
background:white;
margin-bottom:20px;
box-shadow:0 4px 6px rgba(0,0,0,0.1);
border-radius:8px;
overflow:hidden;
table-layout:fixed;
}
th,td{
border:1px solid #e0e0e0;
padding:12px;
text-align:left;
word-break:break-all;
}
th{
background-color:#ecf0f1;
color:#2c3e50;
font-weight:bold;
}
.img-col{
width:100px;
text-align:center;
cursor:pointer;
}
img{
width:80px;
height:80px;
object-fit:contain;
display:block;
margin:auto;
background:#eee;
}
.num-combo{
cursor:pointer;
transition:background 0.3s;
color:#2980b9;
font-weight:bold;
}
.num-combo:hover{
background-color:#d1ecf1;
}
.num-combo.selected{
background-color:#f1c40f !important;
}
.reason-cell{
cursor:pointer;
min-height:40px;
}
textarea{
width:100%;
box-sizing:border-box;
font-family:inherit;
}
.btn-container{
text-align:center;
margin-top:40px;
}
.download-btn{
padding:12px 25px;
background:#27ae60;
color:white;
border:none;
border-radius:5px;
cursor:pointer;
font-size:1rem;
margin:5px;
}
.download-btn:hover{
background:#219150;
}
</style>
</head>
<body>
<h1>阿基米德多面體詳解 (互動存儲版)</h1>
<div id="table-container"></div>
<div class="btn-container">
<button class="download-btn" onclick="downloadHTML()">
下載當前資料 (HTML)
</button>
<button class="download-btn" onclick="uploadHTML()">
上載保存資料 (HTML)
</button>
</div>
<input type="file" id="imageInput" accept="image/*" style="display:none">
<input type="file" id="htmlInput" accept=".html" style="display:none">
<script>
const data = [
{
cat:"一、截角系列",
name:"截角正四面體",
faces:"4 個正三角形、4 個正六邊形",
num:"44445",
reason:"",
img:""
},
{
cat:"一、截角系列",
name:"截角正六面體 (截角立方體)",
faces:"8 個正三角形、6 個正八邊形",
num:"33345",
reason:"",
img:""
},
{
cat:"一、截角系列",
name:"截角正八面體",
faces:"6 個正方形、8 個正六邊形",
num:"44555",
reason:"",
img:""
},
{
cat:"一、截角系列",
name:"截角正十二面體",
faces:"20 個正三角形、12 個正十邊形",
num:"33455",
reason:"",
img:""
},
{
cat:"一、截角系列",
name:"截角正二十面體",
faces:"12 個正五邊形、20 個正六邊形",
num:"45555",
reason:"",
img:""
},
{
cat:"二、準正多面體",
name:"截半立方體",
faces:"8 個正三角形、6 個正方形",
num:"33344",
reason:"",
img:""
},
{
cat:"二、準正多面體",
name:"截半二十面體",
faces:"20 個正三角形、12 個正五邊形",
num:"33355",
reason:"",
img:""
},
{
cat:"三、斜方截半系列",
name:"小斜方截半立方體",
faces:"8 個正三角形、18 個正方形",
num:"33444",
reason:"",
img:""
},
{
cat:"三、斜方截半系列",
name:"大斜方截半立方體",
faces:"12 個正方形、8 個正六邊形、6 個正八邊形",
num:"34455",
reason:"",
img:""
},
{
cat:"三、斜方截半系列",
name:"小斜方截半二十面體",
faces:"20 個正三角形、30 個正方形、12 個正五邊形",
num:"33445",
reason:"",
img:""
},
{
cat:"三、斜方截半系列",
name:"大斜方截半二十面體",
faces:"30 個正方形、20 個正六邊形、12 個正十邊形",
num:"34445",
reason:"",
img:""
},
{
cat:"四、扭棱系列",
name:"扭棱立方體",
faces:"32 個正三角形、6 個正方形",
num:"33334",
reason:"",
img:""
},
{
cat:"四、扭棱系列",
name:"扭棱二十面體",
faces:"80 個正三角形、12 個正五邊形",
num:"33335",
reason:"",
img:""
},
{
cat:"五、其他星狀/基礎形體",
name:"正四面體",
faces:"4個正三角形",
num:"33333",
reason:"",
img:""
},
{
cat:"五、其他星狀/基礎形體",
name:"立方體",
faces:"6個正方形",
num:"44444",
reason:"",
img:""
},
{
cat:"五、其他星狀/基礎形體",
name:"正十二面體",
faces:"12個正五邊形",
num:"55555",
reason:"",
img:""
},
{
cat:"五、其他星狀/基礎形體",
name:"正八面體",
faces:"8個正三角形",
num:"34444",
reason:"",
img:""
},
{
cat:"五、其他星狀/基礎形體",
name:"正二十面體",
faces:"20個正三角形",
num:"35555",
reason:"",
img:""
},
{
cat:"五、其他星狀/基礎形體",
name:"圓椎/圓柱/球",
faces:"非多面體",
num:"33555",
reason:"圓椎",
img:""
}
];
function renderTable(){
const container = document.getElementById('table-container');
const categories = [...new Set(data.map(item => item.cat))];
container.innerHTML = '';
categories.forEach(cat => {
const h2 = document.createElement('h2');
h2.innerText = cat;
container.appendChild(h2);
const table = document.createElement('table');
table.innerHTML =
`
<thead>
<tr>
<th>名稱</th>
<th class="img-col">圖片</th>
<th>組成面</th>
<th>數字組合</th>
<th>理由</th>
</tr>
</thead>
<tbody></tbody>
`;
const tbody = table.querySelector('tbody');
data
.filter(item => item.cat === cat)
.forEach(item => {
const tr = document.createElement('tr');
tr.innerHTML =
`
<td>${item.name}</td>
<td class="img-col" onclick="triggerUpload(this)">
<img src="${item.img || 'about:blank'}">
</td>
<td>${item.faces}</td>
<td class="num-combo" onclick="handleSwap(this)">
${item.num}
</td>
<td class="reason-cell" onclick="editReason(this)">
${item.reason}
</td>
`;
tbody.appendChild(tr);
});
container.appendChild(table);
});
}
let currentImgTarget = null;
let currentDataItem = null;
function triggerUpload(td){
currentImgTarget = td.querySelector('img');
const tr = td.parentNode;
const name = tr.children[0].innerText;
currentDataItem = data.find(v => v.name === name);
document.getElementById('imageInput').click();
}
document
.getElementById('imageInput')
.addEventListener('change', function(e){
const file = e.target.files[0];
if(file && currentImgTarget){
const reader = new FileReader();
reader.onload = function(e){
const base64 = e.target.result;
currentImgTarget.src = base64;
if(currentDataItem){
currentDataItem.img = base64;
}
};
reader.readAsDataURL(file);
}
});
let selectedCombo = null;
let selectedItem = null;
function handleSwap(td){
const tr = td.parentNode;
const name = tr.children[0].innerText;
const item = data.find(v => v.name === name);
if(!selectedCombo){
selectedCombo = td;
selectedItem = item;
td.classList.add('selected');
}else if(selectedCombo === td){
td.classList.remove('selected');
selectedCombo = null;
selectedItem = null;
}else{
const temp = item.num;
item.num = selectedItem.num;
selectedItem.num = temp;
td.innerText = item.num;
selectedCombo.innerText = selectedItem.num;
selectedCombo.classList.remove('selected');
selectedCombo = null;
selectedItem = null;
}
}
function editReason(td){
if(td.querySelector('textarea')) return;
const tr = td.parentNode;
const name = tr.children[0].innerText;
const item = data.find(v => v.name === name);
const textarea = document.createElement('textarea');
textarea.value = item.reason;
td.innerHTML = '';
td.appendChild(textarea);
textarea.focus();
function save(){
item.reason = textarea.value;
td.innerText = item.reason;
}
textarea.onkeydown = function(e){
if(e.key === 'Escape'){
save();
}
};
textarea.onblur = save;
}
function downloadHTML(){
if(selectedCombo){
selectedCombo.classList.remove('selected');
}
const clonedDoc =
document.documentElement.cloneNode(true);
const scripts =
clonedDoc.querySelectorAll("script");
scripts.forEach(script => {
if(script.innerHTML.includes("const data =")){
script.innerHTML =
script.innerHTML.replace(
/const data = \[[\s\S]*?\];/,
`const data = ${JSON.stringify(data, null, 4)};`
);
}
});
const now = new Date();
const pad = n => String(n).padStart(2,'0');
const filename =
`starball_${
now.getFullYear()
}${
pad(now.getMonth()+1)
}${
pad(now.getDate())
}_${
pad(now.getHours())
}${
pad(now.getMinutes())
}${
pad(now.getSeconds())
}.html`;
const htmlContent =
'<!DOCTYPE html>\n' + clonedDoc.outerHTML;
const blob =
new Blob(
[htmlContent],
{type:'text/html'}
);
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();
URL.revokeObjectURL(link.href);
}
function uploadHTML(){
document.getElementById('htmlInput').click();
}
document
.getElementById('htmlInput')
.addEventListener('change', function(e){
const file = e.target.files[0];
if(!file) return;
const reader = new FileReader();
reader.onload = function(e){
const text = e.target.result;
const match =
text.match(
/const data = (\[[\s\S]*?\]);/
);
if(!match){
alert("未找到保存資料");
return;
}
try{
const loadedData = eval(match[1]);
data.length = 0;
loadedData.forEach(v => data.push(v));
renderTable();
alert("資料已載入");
}catch(err){
console.error(err);
alert("資料解析失敗");
}
};
reader.readAsText(file);
});
renderTable();
</script>
</body>
</html>
```
https://ejsoon.vip/
弈趣極光：享受思維樂趣
弈趣極光：享受思維樂趣
在线用户
正浏览此版面之用户： Google [Bot] 和 1 访客