PORTFOLIO

前端交互实验
一组用纯原生 HTML / CSS / JavaScript 构建的交互式网页小工具。
零框架、零依赖,开箱即用,无需安装任何插件。
SCROLL DOWN ↓

PROJECTS

⌨️
OPEN →

Typing Practice

英文打字练习工具,实时计算 WPM 与准确率,支持三级难度切换,翻页字符视觉反馈。

HTMLCSSJavaScript
🕰️
OPEN →

Flip Clock

翻页时钟,实时天气展示,整点自动切换互联网 4K 背景图,支持按类型筛选图片。

CSS 3DAPIResponsive
🌌
OPEN →

Void

深夜星空发呆程序。120 颗粒子、鼠标拖尾涟漪、流星(1-3 分钟/颗)、Z 键禅模式。

Canvas粒子系统
🐟
OPEN →

AquaZen

数字鱼缸。12 条鱼自主游弋、点击投食、水草气泡、D 键昼夜切换,物理碰撞模拟。

Canvas物理引擎
🌧️
OPEN →

RainType

雨滴打字游戏。6 首雨主题诗句,按键击碎雨滴收集,沉浸式雨声氛围。

Canvas游戏诗词
🖼️
OPEN →

PhotoWall

无尽照片瀑布流。自适应列数、无限滚动、图片懒加载、Lightbox 查看,严丝合缝铺满。

瀑布流无限滚动
🎵
OPEN →

Music Visualizer

音乐可视化器。Web Audio API 频谱分析,拖拽音频/麦克风实时输入,4 种可视化模式。

Web AudioFFTCanvas
🧊
OPEN →

Voxel Engine

WebGL 体素世界引擎。3D Perlin 噪声地形生成、第一人称相机、射线求交、物理碰撞、面剔除网格。

WebGL3D 数学物理引擎
🌀
OPEN →

TypeDrift

字体漂移实验室。每个汉字按部首赋予物理性格——水轻飘、火碰撞发光、石沉重、风易散。鼠标产生风力,点击引爆。

物理引擎生成艺术汉字语义
🏗️
OPEN →

Stack Tower

经典堆叠塔游戏。方块左右移动,点击放置,不对齐部分被切掉。完美放置触发连击,色彩逐层渐变。

Canvas节奏反应
🎨
OPEN →

Color Flood

颜色淹没策略游戏。10×10 网格,点击颜色扩散连通区域,25 步内填满整个网格,步数越少评级越高。

策略BFS益智
🏖️
OPEN →

Falling Sand

像素物理沙盒。5 种材料(沙子/水/石头/火/植物),每种材料遵循独立物理规则:重力、流动、燃烧、生长。

元胞自动机物理模拟像素