arsvt3d 项目介绍网站

这是一个简约质朴风格的纯前端网站，用于介绍 arsvt3d 项目，提供代码预览、二进制文件下载和安装指导。

文件结构

website/
├── index.html          # 主HTML页面
├── style.css           # CSS样式文件
├── script.js           # JavaScript交互功能
├── binary_data.js      # 二进制文件的base64编码数据
├── install.sh          # curl安装脚本
├── generate_binary_data.sh  # 生成二进制文件base64数据的脚本
└── README.md          # 本文件

功能特点

1. 项目介绍: 详细介绍 arsvt3d 项目的功能、技术特点和游戏玩法
2. 实现思路: 解释光线投射技术、模块化设计、字符画渲染和迷宫生成算法
3. 游戏截图: 展示实际游戏界面和效果
4. 在线预览: 内置WebAssembly/iframe演示，直接在浏览器中体验游戏
5. 源代码预览: 支持在线浏览所有源代码文件，带语法高亮
6. 二进制文件下载: 提供各平台预编译二进制文件的直接下载
7. 多种安装方式: 提供 Cargo、NPM、直接下载和 curl 脚本四种安装方式
8. 平台检测: 自动检测用户平台并推荐对应的二进制文件
9. 响应式设计: 适配桌面和移动设备

部署说明

纯前端部署

这个网站是一个纯前端项目，可以部署到任何静态文件托管服务：

1. GitHub Pages

   # 将website文件夹推送到GitHub仓库
   # 在仓库设置中启用GitHub Pages
   # 选择main分支作为源

2. Netlify

   # 将website文件夹拖拽到Netlify部署界面
   # 或者使用Netlify CLI
   npm install -g netlify-cli
   netlify deploy --prod --dir=website

3. Vercel

   # 安装Vercel CLI
   npm i -g vercel
   cd website
   vercel --prod

4. 任何静态文件服务器

   # 使用Python
   cd website
   python -m http.server 8000
   
   # 或使用Node.js
   npx serve website

二进制文件更新

如果需要更新二进制文件：

1. 确保 arsvt3d 项目中有编译好的二进制文件
2. 运行二进制文件生成脚本：

   cd website
   ./generate_binary_data.sh

3. 这会更新 binary_data.js 文件，包含最新的二进制文件base64编码

技术实现

游戏截图

网站集成了实际游戏截图展示：

1. 真实截图展示: 使用从gitee仓库下载的实际游戏截图
2. 图文并茂: 每张截图都有详细的说明文字
3. 响应式画廊: 使用网格布局展示截图，适配不同屏幕
4. 查看详情: 点击可以查看完整的图片画廊页面
5. 预加载优化: 图片使用懒加载技术，提升页面性能

在线预览功能

网站集成了完整的在线演示功能：

1. 嵌入式预览: 使用iframe嵌入在线demo页面
2. 全屏模式: 支持全屏游戏体验
3. 新窗口打开: 可在新窗口中打开独立游戏页面
4. 加载指示: 提供加载状态和错误处理
5. 键盘快捷键: 支持F键快速进入全屏模式

在线演示地址：https://arsvt3d.netlify.app/

二进制文件存储

为了实现纯前端下载，二进制文件被转换为base64格式存储在JavaScript文件中。这种方法的优缺点：

优点:

• 完全纯前端，无需服务器
• 可以离线使用
• 部署简单

缺点:

• 文件体积增大约33%（base64开销）
• 更新二进制文件需要重新生成网站
• 对于大文件可能影响加载速度

代码高亮

使用 highlight.js 库实现Rust代码的语法高亮，提升代码阅读体验。

响应式设计

使用CSS Grid和Flexbox实现响应式布局，适配不同屏幕尺寸：

• 桌面端：多列布局，完整功能展示
• 移动端：单列布局，紧凑功能排布

自定义和扩展

添加新平台支持

要为新平台添加二进制文件支持：

1. 在 generate_binary_data.sh 中添加新平台的处理逻辑
2. 在 index.html 的平台选择器中添加新选项
3. 在 script.js 中添加新平台的文件名处理逻辑

修改样式

网站使用简约质朴的设计风格，主要特点：

• 使用等宽字体（Courier New）
• 温暖的背景色 (#FAF8F3)
• 简约的按钮和卡片设计
• 适度的阴影和边框

可以通过修改 style.css 中的CSS变量来调整整体风格：

:root {
    --primary-color: #333;      /* 主文字颜色 */
    --accent-color: #8B4513;    /* 强调色 */
    --background-color: #FAF8F3; /* 背景色 */
    /* 更多变量... */
}

扩展功能

可以考虑添加的功能：

1. 在线游戏演示: 使用WebAssembly在浏览器中运行实际游戏
2. 更多下载选项: 添加包管理器支持（如Homebrew、APT等）
3. 用户统计: 访问量、下载量统计
4. 多语言支持: 国际化支持
5. 贡献指南: 添加如何参与项目开发的指南

注意事项

1. base64大小限制: 对于非常大的二进制文件，base64编码可能导致性能问题
2. 浏览器兼容性: 现代浏览器都支持本网站使用的功能
3. HTTPS要求: 在HTTPS环境下，某些下载功能可能工作得更好

许可证

这个网站遵循与 arsvt3d 项目相同的 Apache-2.0 许可证。