🚢 Optimal Loading Problem Visualization

最优装载问题 - 全算法可视化演示套件

一个基于 Web 的交互式算法演示工具，生动展示了贪心算法、回溯法和动态规划在解决“最优装载问题”时的执行逻辑与差异。

📖 项目简介 (Introduction)

本项目是为了直观理解和教学最优装载问题 (Optimal Loading Problem) 而开发的单页 Web 应用。

最优装载问题通常描述为：有一批集装箱，每箱重量不等，在船只载重有限的情况下，如何选择装载方案以最大化装载数量（或重量）。

本演示套件不仅展示了最终结果，更侧重于可视化算法的执行过程，包括贪心策略的选择、回溯法的解空间搜索树以及动态规划的状态转移。

🎮 在线演示 (Demo)

👉 点击这里体验在线演示 (示例链接，基于代码推断)

也可以直接使用手机扫描页面右侧的二维码进行移动端体验。

✨ 核心功能 (Features)

• ⚡ 全算法覆盖：集成三种经典解法，一键切换对比。

• 贪心算法 (Greedy)：基于排序策略，直观展示“轻者先装”的过程。

• 回溯法 (Backtracking)：深度优先搜索 (DFS)，包含剪枝策略演示。

• 动态规划 (Dynamic Programming)：展示状态转移方程的全局计算与回溯构造解。

• 🌳 解空间树视图 (Tree View)：

• 专为回溯法设计。

• 利用 HTML5 Canvas 实时绘制二叉搜索树。

• 可视化节点状态：搜索中、最优路径、剪枝。

• 🎨 沉浸式 UI/UX：

• 拟物化设计：船身吃水深度随载重变化，水波纹动画。

• 响应式布局：完美适配 PC 与 移动端，移动端自动隐藏复杂视图。

• 实时数据：动态仪表盘显示当前载重、最佳解和装载进度。

• 🛠️ 轻量级架构：单文件 (index.html) 部署，依赖 CDN (Tailwind)，无需复杂的构建工具。

🧠 算法实现细节 (Algorithms)

1. 贪心算法 (Greedy Algorithm)

• 策略：将集装箱按重量从小到大排序 ()，依次装入直到超重。
• 演示重点：展示排序动画及逐个装载的过程。

2. 回溯法 (Backtracking)

• 策略：构造解空间树（子集树），按左子树（选）和右子树（不选）进行遍历。

• 优化：

• 上界剪枝：如果 当前已选 + 剩余所有 > 当前最优，才继续搜索。

• 重量剪枝：如果 当前重量 + 下一个 > 载重，则剪去左子树。

• 演示重点：配合 Canvas 树形图，清晰展示“试错”与“回退”的路径。

3. 动态规划 (Dynamic Programming)

• 策略：使用二维/一维数组记录状态 dp[j] 表示容量为 j 时的最大装载数。
• 方程：
• 演示重点：通过扫描线动画模拟计算过程，最后高亮显示选中的最优组合。

🚀 快速开始 (Quick Start)

本地运行

由于项目采用单文件架构，无需安装 Node.js 或 npm 环境。

1. 克隆或下载本仓库。
2. 直接双击打开 index.html。
3. 即可在浏览器中运行。

部署建议

你可以将其部署在任何静态网页托管服务上（如 GitHub Pages, Vercel, 或你的 Typecho 博客目录中）。

🛠️ 技术栈 (Tech Stack)

• 核心逻辑: Vanilla JavaScript (ES6+)
• 样式框架: Tailwind CSS (通过 CDN 引入)
• 图形渲染: HTML5 Canvas API (用于绘制树形图)
• 工具库: qrcode.min.js (用于生成移动端二维码)

📝 关于作者

Zakee

• Blog: zakee.fun
• Student in AI & Industrial Engineering.

---

Made with ❤️ and Code.