https://github.com/timcsy/4-cube-puzzle

立體四方塊 4 Cube Puzzle：國中科展的現代互動重製（TypeScript + Three.js + C++）
https://github.com/timcsy/4-cube-puzzle

Last synced: 5 days ago
JSON representation

立體四方塊 4 Cube Puzzle：國中科展的現代互動重製（TypeScript + Three.js + C++）

• Host: GitHub
• URL: https://github.com/timcsy/4-cube-puzzle
• Owner: timcsy
• Created: 2026-06-09T08:10:28.000Z (10 days ago)
• Default Branch: main
• Last Pushed: 2026-06-09T08:41:44.000Z (10 days ago)
• Last Synced: 2026-06-09T10:13:02.809Z (10 days ago)
• Language: C++
• Homepage: https://timcsy.github.io/4-cube-puzzle/
• Size: 2.78 MB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 立體四方塊 · 4 Cube Puzzle（現代重製版）

> 國中科展研究《方塊圓舞曲─探討立體四方塊解法》的現代化重製。

> 原始研究：**張頌宇、謝荏全、蕭亦淳**。

把一份用 Dev-C++、Visual Basic、PhotoImpact、Freehand 完成的國中科展，

重寫成今天的樣子：**TypeScript 解法引擎 + Three.js 互動 3D 視覺化 + 現代 C++ + Markdown 文件**。

🎮 **線上試玩 → https://timcsy.github.io/4-cube-puzzle/**

![立體四方塊](docs/images/model-1.jpg)

## 這是什麼遊戲？

四個正方體，每面用兩條對角線切成 4 個三角形，塗紅(R)/黃(Y)/藍(B)。

遊戲提供 **13 種立體圖形**玩法，要把四個方塊拼成指定形狀，

並讓所有**相接面的三角形顏色彼此相等**。詳見 [研究背景](docs/01-研究背景.md)。

## 專案結構

```

4-cube-puzzle/

├── docs/                  研究文件（Markdown + 圖片）

│   ├── 01-研究背景.md

│   ├── 02-方塊與規則.md

│   ├── 03-解法演算法.md

│   ├── 04-十三種圖形.md

│   └── 05-顏色排列研究.md

├── web/                   互動 3D 視覺化（Vite + TypeScript + Three.js）

│   ├── src/solver.ts        解法引擎（忠實重現原始 C++ 暴力窮舉）

│   ├── src/geometry.ts      方塊 24 三角形的 3D 幾何

│   ├── src/assembly.ts      依約束把四方塊組裝成立體外型

│   ├── src/shapes.ts        全 88 種形狀的列舉 + 約束生成 + 等角縮圖（圖形拼圖核心）

│   ├── src/study.ts         顏色排列頁：套組設定 + 88 形狀研究（展開圖 / 3D 預覽）

│   ├── src/cubeset.ts       515,780 種套組產生器（編號 / 分步自訂、生成方塊資料）

│   └── public/data/puzzle-data.json   四方塊資料 + 13 圖形約束 + 解答數

└── color-study/           顏色排列研究（現代 C++，解出當年算不完的問題）

    ├── color_study.cpp      排列數：24 面如何排到四方塊（792,238,080）

    ├── combinations.cpp     組合數：本質不同的設計（515,780，Burnside）

    └── legacy/              2011 原始程式 + 忠實重寫（紀念）

```

## 研究文件

1. [研究背景](docs/01-研究背景.md) — 遊戲由來（MacMahon 1920s → Scott Nelson 1971 → ThinkFun）、研究動機與脈絡。

2. [方塊與規則](docs/02-方塊與規則.md) — 方塊塗色、相接邊同色規則、座標與資料模型。

3. [解法演算法](docs/03-解法演算法.md) — 暴力窮舉與剪枝，如何重現原始 C++ 的解。

4. [十三種圖形](docs/04-十三種圖形.md) — 13 個官方圖形與各自的排列數 / 解法數。

5. [顏色排列研究](docs/05-顏色排列研究.md) — 24 面如何排到四方塊、515,780 種設計、可全玩套組與 88 形狀的完整分析。

## 快速開始

> **線上試玩**：

> （push 到 GitHub 後，於 repo *Settings → Pages → Source* 選「GitHub Actions」即會由

> [`.github/workflows/deploy.yml`](.github/workflows/deploy.yml) 自動部署。）

### 互動 3D 網頁

```bash

cd web

npm install

npm run dev      # 開發伺服器

# 或 npm run build && npm run preview

```

瀏覽器內分兩大區塊：

- **圖形拼圖**：四顆方塊能拼出的**全部 88 種形狀**（面接觸或邊接觸都算相連、鏡像分開；官方 13 個標 ★），

  選任一形狀即以當前套組**即時求解**。內含兩種子模式——

  - *看解答*：瀏覽每一組解、即時 3D 組裝、旋轉縮放觀察相貼面如何對齊。

  - *試玩*：自己旋轉 / 交換方塊，動手解解看。

- **顏色排列**：顏色排列研究的結果與 24 個不同的面，並可從 **515,780 種「方塊套組」**中

  用編號或分步自訂選一組（預覽展開圖 / 3D，附四類推薦套組），「套用」後即作用於**圖形拼圖**（兩邊共用同一套組，解答數即時重算）。

### 顏色排列研究（C++）

```bash

cd color-study

g++ -O2 -std=c++17 -o color_study color_study.cpp && ./color_study      # 排列數 792,238,080

g++ -O2 -std=c++17 -o combinations combinations.cpp && ./combinations   # 組合數 515,780

```

## 13 個官方圖形的解答數

這裡的「**排列數**」＝程式窮舉出的**所有**合法排法——把「4 顆方塊放哪個位置」（4! 種）與「各自轉到哪個朝向」（24⁴ 種）都算進去。本引擎 13 個圖形全部算得出，每組解也都能在「圖形拼圖」分頁逐一瀏覽。

| 圖形 | 難度 | 排列數 | ｜ | 圖形 | 難度 | 排列數 |

|:---:|:---:|---:|:---:|:---:|:---:|---:|

| 一 | 初 | 40 | ｜ | 八 | 高 | 44 |

| 二 | 初 | 3,400 | ｜ | 九 | 高 | 54 |

| 三 | 中 | 134 | ｜ | 十 | 高 | 36 |

| 四 | 中 | 63,296 | ｜ | 十一 | 高 | 186 |

| 五 | 中 | 8 | ｜ | 十二 | 高 | 496 |

| 六 | 高 | 4 | ｜ | 十三 | 高 | 8 |

| 七 | 高 | 48 | ｜ | | | |

> 難度為原研究分級：初級＝1、2；中級＝3、4、5；高級＝6～13。

> 原始報告另對少數圖形做了「對稱化簡」（扣掉圖形本身對稱造成的重複解），例如圖形一 40→**20**、圖形二 3,400→**1,700**。

> 本重製版可重現原報告所有已公布數字。詳見 [十三種圖形](docs/04-十三種圖形.md)。

## 重點發現（延伸研究）

當年算不完的問題，這次用現代工具往下挖了好幾層（完整推導與資料見 [顏色排列研究](docs/05-顏色排列研究.md)）：

- **24 面全不同的設計共 515,780 種**（含擺向的排列數 792,238,080），由 Burnside 軌道計數得出。

- **能拼出全部 13 圖形的「可全玩」套組只有 2,904 種** ＝ 484 個色置換軌道 ＝ **242 個本質手性對**；

  隨機套組約 99.5% 會卡在圖形五。

- **四顆方塊其實能拼出 88 種形狀**（面接觸或邊接觸都算相連、鏡像分開），官方 13 個只是其中人工挑選。

  原始 2011 套組能解開其中 **87 / 88**，唯一卡住的是「**對角雙柱**」（2×2×2 對角兩條直立方塊，自鏡像、鏡射也救不了）。

- 在「圖形拼圖」分頁可直接玩到全部 88 種形狀並即時求解。

## 與當年的對照

| | 2011 原版 | 現代重製版 |

|---|---|---|

| 解法計算 | Dev-C++ / VS2010 暴力窮舉 | TypeScript（瀏覽器內即時運算） |

| 立體呈現 | Visual Basic 生成器（單向版／旋轉版） | Three.js 寫實 3D，可組裝、旋轉 |

| 圖形製作 | PhotoImpact / Freehand 10 | 程式即時產生幾何 |

| 顏色排列研究 | 36 層迴圈跑 3³⁶，跑不完 | 各方塊獨立枚舉 + 組合，毫秒解出（排列數 792,238,080、組合數 515,780） |

| 報告 | Word / PDF | Markdown |

### 當年的「立體四方塊生成器」

解法算出來只是數字，要「看見」它還得自己畫。當年用 **Visual Basic** 寫了一支

「立體四方塊生成器」把每組解立體呈現，前後做了兩代：**單向版**，以及改用八個方向呈現的**旋轉版**。

[docs](docs/04-十三種圖形.md) 裡那些立體透視圖，就是它產出的。

本重製版的 Three.js 視覺化，正是這支程式的現代接班人。

![2011 原始 Visual Basic 生成器](docs/images/original-generator.png)

## 授權與致謝

研究內容與圖片版權屬原作者所有。本重製版為教育與保存目的之現代化改寫。