正在開發新遊戲:星•球

分享身边的点滴趣事
回复
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5501
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

正在開發新遊戲:星•球

帖子 ejsoon »

星•球是我多年以前創作的遊戲,現在要重新開發。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5501
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

Re: 正在開發新遊戲:星•球

帖子 ejsoon »

代码: 全选

阿基米德多面體(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/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5501
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

Re: 正在開發新遊戲:星•球

帖子 ejsoon »

寫一個html+css+js程式,對3,4,5進行組合,只考慮所有組合情況,數字只由小到大排列,可以只取一個或兩個數字。數字用全形顯示。

把所有情況羅列出來,並分類:只有單個數、只有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: "只有3, 4", filter: k => new Set(k).size === 2 && ![...k].some(v => v == '5') },
        { title: "只有3, 5", filter: k => new Set(k).size === 2 && ![...k].some(v => v == '4') },
        { title: "只有4, 5", 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/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5501
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

Re: 正在開發新遊戲:星•球

帖子 ejsoon »

把阿基米德多面體,按「名稱、svg圖片、組成面」做成html表格。提供完整的html代碼。

代码: 全选

這是一個包含 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/
弈趣極光:享受思維樂趣
头像
ejsoon
一枝独秀
一枝独秀
帖子: 5501
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 179 次
被圈友点赞: 206 次
联系:

Re: 正在開發新遊戲:星•球

帖子 ejsoon »

https://ejsoon.vip/
弈趣極光:享受思維樂趣
回复

在线用户

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