Cosmic Playground

English | 中文

---

English

Interactive particle universe built with vanilla JavaScript and HTML5 Canvas. Zero dependencies.

Features

• 6 visual modes: Galaxy, Aurora, Nebula, Matrix, Fireworks, Starfield
• Real-time mouse gravity interaction (attract / repel)
• Click to create particle explosions
• Right-click for black hole effect
• Scroll wheel zoom
• 5 color themes
• Adjustable particle count, size, speed, gravity
• Screenshot capture
• Fullscreen support
• Touch-friendly (mobile)
• Glassmorphism UI

Quick Start

# Just open it
open index.html

# Or use any static server
npx serve .
python -m http.server 8000

No build step. No npm install. Just open and play.

Controls

Input	Action
Mouse move	Gravity field
Left click	Particle explosion
Right click	Black hole (repel)
Scroll wheel	Zoom
Space	Pause / Resume

Tech Stack

• HTML5 Canvas 2D
• Vanilla JavaScript (ES6+ Classes)
• CSS3 (Glassmorphism, Grid, Flexbox)
• Zero external dependencies

---

中文

基于原生 JavaScript 和 HTML5 Canvas 的交互式粒子宇宙。零依赖。

功能特性

• 6 种视觉模式：星系、极光、星云、矩阵、烟花、星场
• 鼠标实时引力交互（吸引 / 排斥）
• 点击产生粒子爆炸
• 右键黑洞效果
• 滚轮缩放视角
• 5 套配色方案
• 可调节粒子数量、大小、速度、引力
• 一键截图保存
• 全屏支持
• 移动端触控兼容
• 毛玻璃风格 UI

快速开始

# 直接打开
open index.html

# 或使用任意静态服务器
npx serve .
python -m http.server 8000

无需构建，无需安装依赖，打开即用。

操作说明

操作	效果
鼠标移动	引力场
左键点击	粒子爆炸
右键点击	黑洞（排斥）
滚轮	缩放
空格键	暂停 / 继续

技术栈

• HTML5 Canvas 2D
• 原生 JavaScript（ES6+ Classes）
• CSS3（毛玻璃效果、Grid、Flexbox）
• 零外部依赖

---

License

MIT