# wave

**Repository Path**: ns2250225/wave

## Basic Information

- **Project Name**: wave
- **Description**: 海浪树洞网站
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-05-25
- **Last Updated**: 2026-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 潮汐留言 (Wave)

这是一个基于 [p5.js](https://p5js.org/) 和 [Socket.io](https://socket.io/) 开发的**多人共享**交互式网页动画项目。
用户可以输入想说的话并加入队列，页面中的海浪会周期性地涌起和退去；当海水退去时，队列中的文字就会随着海浪的节奏缓缓显现。所有访问该网站的人都会同步看到同一条留言随着潮水浮现。

## 核心功能

- **多人共享队列：** 采用 Node.js + Socket.io 后端，所有访问网站的用户共享同一个文字队列，无论谁输入的话语都会进入全局队列，所有人同步观看海浪动画与文字展示。
- **海浪动画：** 使用 p5.js 绘制程序化生成的海浪、白沫与水体字符纹理，随时间不断涌动。
- **情感表达：** “通常我们以为海浪会带走一切，但忘了它在退去时，会留下更深的刻痕。”——文字只有在海浪完全淹没后退去时才会显现。
- **自适应排版：**
  - 文字区域会自动根据移动端 / 大屏幕环境调整字号和行距。
  - 支持长文本自动断行。
  - 队列播放完毕后自动进入等待状态。
- **背景音乐：** 点击页面或发送文字时，会自动播放名为 `wave.mp3` 的背景音乐，增强沉浸感。

## 文件结构

- `server.js` - Node.js 后端服务，负责提供静态文件以及维护全局 Socket.io 队列与广播逻辑。
- `package.json` - 项目的 npm 依赖配置文件。
- `index.html` - 项目前端核心文件，包含 UI 结构、样式、Socket 通信与 p5.js 的绘图动画逻辑。
- `wave.mp3` - 循环播放的背景音乐音频文件。

## 环境要求

- [Node.js](https://nodejs.org/) (建议版本 v14 及以上)

## 如何运行

1. 在项目根目录下打开终端，安装项目依赖（第一次运行前必须执行）：
   ```bash
   npm install
   ```

2. 启动服务器：
   ```bash
   npm start
   ```
   *(或者运行 `node server.js`)*

3. 打开浏览器，访问：
   ```
   http://localhost:8000
   ```
   *(你可以同时在多个浏览器标签页或手机端局域网内打开此地址，测试多人实时同步的效果)*

## 操作说明

1. 页面底部有一个输入框，你可以随时输入文字（如：支持 Shift+Enter 换行）。
2. 点击 **“加入队列”** 按钮或直接按下 **Enter** 键，文字便会发送到服务器存入全局队列。
3. 全局统一播放节奏：海浪会在背景中上涨，淹没页面，当它退去的时候，就会把你想说的话展示在中央（所有人同步看到）。
4. 每展示完一条，便会自动切至下一条；如果全局队列为空，海浪将静静在底部起伏，直到有任何人再次输入。