我们来做
一个**交互式
星系模拟器（Galaxy Simulator）**，使用 HTML + CSS + JavaScript 在网页中实现
一个可视化的、动态旋转的
星系效果，包含恒
星、行
星、轨道和引力动画。
---
## 🌌 目标：创建
一个“可交互的
星系”
### ✅ 功能需求：
1. **视觉表现**：
- 中心是
一个明亮的“
星系核心”（如银河系中心）
- 多条螺旋臂向外延展
- 数百个
星星随机分布在螺旋臂上，并绕中心缓慢旋转
- 支持缩放与拖拽视角
2. **交互功能**：
- 鼠标滚轮可以缩放
星系
- 拖动鼠标可以移动视图
- 点击某颗
星星显示信息（名称、距离等）
3. **性能要求**：
- 使用 Canvas 或 WebGL 实现流畅渲染（60fps）
- 支持上千颗
星体而不卡顿
---
## ✅ 完整代码实现（基于 HTML
5 Canvas）
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>
星系模拟器</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000;
color: #fff;
font-family: Arial, sans-serif;
}
canvas {
display: block;
cursor: move;
}
.info-panel {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius:
5px;
max-width: 300px;
transition: opacity 0.3s;
}
.controls {
position: absolute;
bottom: 20px;
left:
50%;
transform: translateX(-
50%);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
border-radius:
5px;
font-size: 14px;
}
</style>
</head>
<body>
<canvas id="galaxy"></canvas>
<div class="info-panel" id="infoPanel">
<h3>
星系模拟器</h3>
<p>点击
星星查看信息，滚轮缩放，拖动平移。</p>
<div id="starInfo"></div>
</div>
<div class="controls">
缩放: 滚轮 | 平移: 拖动
</div>
<script>
const canvas = document.getElementById('galaxy');
const ctx = canvas.getContext('2d');
const infoPanel = document.getElementById('infoPanel');
const starInfo = document.getElementById('starInfo');
// 设置画布全屏
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
// 视图状态
let scale = 1;
let offsetX = 0;
let offsetY = 0;
let isDragging = false;
let dragStart = { x: 0, y: 0 };
//
星星数据
const stars = [];
const numStars = 1
500; //
星星数量
// 生成螺旋
星系中的
星星（对数螺旋分布）
function generateSpiralStars(count) {
for (let i = 0; i < count; i++) {
const angle = Math.random() * Math.PI * 20; // 多圈螺旋
const radius = Math.pow(Math.random(), 0.8) * 400; // 非线性分布更集中
// 对数螺旋公式：r = a * e^(bθ)
const spiralFactor = 0.3;
const spiralOffset = angle * spiralFactor;
const x = radius * Math.cos(angle + spiralOffset);
const y = radius * Math.sin(angle + spiralOffset);
// 添加随机扰动（让
星系更自然）
const jitter = 40;
const jitterX = (Math.random() - 0.
5) * jitter;
const jitterY = (Math.random() - 0.
5) * jitter;
// 随机亮度和大小
const size = Math.random() < 0.0
5 ? 3 : Math.random() < 0.2 ? 2 : 1;
const brightness = Math.random();
const hue = Math.random() < 0.9 ? 200 : Math.random() < 0.98 ? 30 : 0; // 蓝白为主，少量黄红
stars.push({
x: x + jitterX,
y: y + jitterY,
size,
brightness,
hue,
id: i,
name: `恒
星-${i}`,
distance: Math.sqrt(x*x + y*y).toFixed(2)
});
}
}
generateSpiralStars(numStars);
// 绑定事件
canvas.addEventListener('wheel', handleWheel);
canvas.addEventListener('mousedown', startDrag);
window.addEventListener('mousemove', drag);
window.addEventListener('mouseup', endDrag);
canvas.addEventListener('click', handleClick);
function handleWheel(e) {
e.preventDefault();
const zoomSpeed = 0.1;
const scaleFactor = e.deltaY > 0 ? 1 - zoomSpeed : 1 + zoomSpeed;
scale *= scaleFactor;
// 限制缩放范围
scale = Math.min(Math.max(scale, 0.1), 10);
}
function startDrag(e) {
if (e.button !== 0) return; // 只响应左键
isDragging = true;
dragStart.x = e.clientX - offsetX;
dragStart.y = e.clientY - offsetY;
canvas.style.cursor = 'grabbing';
}
function drag(e) {
if (!isDragging) return;
offsetX = e.clientX - dragStart.x;
offsetY = e.clientY - dragStart.y;
}
function endDrag() {
isDragging = false;
canvas.style.cursor = 'move';
}
// 点击检测最近的
星星
function handleClick(e) {
const rect = canvas.getBoundingClientRect();
const clickX = (e.clientX - rect.left - offsetX) / scale;
const clickY = (e.clientY - rect.top - offsetY) / scale;
let closestStar = null;
let minDist =
5; //
5px 内才算命中
for (const star of stars) {
const dx = star.x - clickX;
const dy = star.y - clickY;
const dist = Math.sqrt(dx*dx + dy*dy);
if (dist < minDist) {
minDist = dist;
closestStar = star;
}
}
if (closestStar) {
starInfo.innerHTML = `
<strong>${closestStar.name}</strong><br/>
类型: ${closestStar.hue < 10 ? '红巨
星' : closestStar.hue < 30 ? '黄矮
星' : '蓝/白
星'}<br/>
距离中心: ${closestStar.distance} 光年<br/>
亮度: ${Math.round(closestStar.brightness * 100)}%
`;
} else {
starInfo.innerHTML = '';
}
}
// 动画循环
let rotationAngle = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新旋转（缓慢自转）
rotationAngle += 0.0002; // 极慢转动
// 绘制每颗
星星
stars.forEach(star => {
// 应用旋转矩阵
const cosR = Math.cos(rotationAngle);
const sinR = Math.sin(rotationAngle);
let rx = star.x * cosR - star.y * sinR;
let ry = star.x * sinR + star.y * cosR;
// 应用视图变换
const screenX = rx * scale + offsetX;
const screenY = ry * scale + offsetY;
// 只绘制屏幕附近的
星星以提升性能
if (
screenX < -
50 || screenX > canvas.width +
50 ||
screenY < -
50 || screenY > canvas.height +
50
) return;
// 设置颜色
ctx.save();
ctx.globalAlpha = star.brightness;
ctx.fillStyle = `hsl(${star.hue}, 100%, ${star.brightness * 80}%)`;
// 绘制
星星
if (star.size > 2) {
// 较大的
星加光晕
const grad = ctx.createRadialGradient(screenX, screenY, 0, screenX, screenY, star.size * 2);
grad.addColorStop(0, `hsl(${star.hue}, 100%, ${star.brightness * 100}%)`);
grad.addColorStop(1, 'transparent');
ctx.fillStyle = grad;
ctx.beginPath();
ctx.arc(screenX, screenY, star.size * 2, 0, Math.PI * 2);
ctx.fill();
}
ctx.fillStyle = `hsl(${star.hue}, 100%, ${star.brightness * 80}%)`;
ctx.beginPath();
ctx.arc(screenX, screenY, star.size, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
});
requestAnimationFrame(animate);
}
// 开始动画
animate();
</script>
</body>
</html>
```
---
## 🔍 代码解释
### 1. **
星系结构生成**
- 使用**对数螺旋公式**模拟真实
星系（如银河系）的旋臂结构：
```js
r = pow(random, 0.8) * 400;
θ += r * 0.3; // 螺旋偏移
```
- 加入随机抖动使分布更自然
### 2. **视觉效果**
- 小
星星用 `arc()` 绘制
- 大
星星添加 `radialGradient` 光晕效果
- HSL 控制颜色：蓝色为年轻恒
星，黄色为类太阳
星，红色为老年
星
### 3. **交互系统**
- **缩放**：通过 `scale` 变量控制
- **平移**：`offsetX`, `offsetY`
- **旋转**：全局缓慢自转（体现
星系运动）
- **点击识别**：反向计算坐标并找最近点
### 4. **性能优化**
- 超出屏幕的
星星不绘制
- 使用 `requestAnimationFrame` 流畅动画
- 控制最大
星星数（1
500 已非常流畅）
---
## 🎮 效果预览
当你打开这个页面时，你会看到：
-
一个缓缓旋转的蓝色/白色为主的螺旋
星系
- 中心密集，边缘稀疏
- 鼠标拖动可探索不同区域
- 滚轮缩放深入观察
- 点击任意亮斑显示其信息
---
## 🚀 后续扩展建议
| 功能 | 技术方案 |
|------|--------|
| 添加行
星系统 | 点击恒
星后弹出 mini 太阳系动画 |
| 多种
星系类型 | 椭圆
星系、不规则
星系切换 |
| 引力模拟 | 使用 Verlet 积分或 Barnes-Hut 算法做 N-body 模拟 |
| WebGPU 加速 | 升级为 GPU 渲染
万星级别 |
| 存储探索记录 | localStorage 记录访问过的“恒
星” |
---
随后就会弹出配置 ssh 连接的信息，填上终端名称、IP 地址、端口号、账号密码就可以了。
保存完后，就会出现刚新增的终端配置，然后点击运行的图标就可以了。
也可以通过图中的小方块， 选择连接的服务器。
选择后，就会进入到终端页面了，也就可以对服务器进行操作了。
然后就会弹出服务器上的目录
如果你想把服务器上的文件传输到本地电脑，你只需要找到服务器的文件，然后点击，就会弹出保存文件的提示。
如果你想把本地电脑的文件放到服务器上，只需要把文件拖拽到对应的目录就行。或者点击右上角上传文件
还有字体的大小设置等
以及常用的快捷键
详细可以去 Tabby 的 Github 上看。
扫一扫
2401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
