项目经验
1. 光影相册 · Light Memory
项目类型:纯前端照片存储网站
核心功能:
拖拽/点击上传,单次最多 20 张图片
CSS columns 瀑布流布局,响应式 4/3/2 列自适应
相册管理(创建/删除)、全屏预览、键盘导航
IndexedDB 存储 Base64 格式,突破浏览器 5MB 限制
技术亮点:
纯原生 HTML/CSS/JS,无框架依赖
暖色调配色 + 随机诗句展示
流畅动画:毛玻璃导航栏、卡片悬浮、图片淡入、灯箱效果、渐变流光背景
2. 经典塔防游戏
项目类型:纯前端 Canvas 游戏
核心功能:
完整游戏循环:波次系统、敌人路径规划、炮塔放置、投射物系统
多种炮塔类型、伤害计算、范围伤害
S 形路径算法(通用步进 buildPathGrid)
敌人死亡幂等处理、数组清理
技术亮点:
Canvas 渲染引擎,60fps 流畅运行
响应式适配,多端兼容
游戏平衡性调优
3. 贪吃蛇游戏(多版本迭代)
项目类型:游戏开发
迭代版本:
原版:原生 Canvas + 键盘控制
全栈版:Node.js 后端,支持在线排行榜
localStorage 版:纯前端排行榜持久化
技术亮点:
分数排行系统设计与实现
键盘 + 触摸双操作适配
4. 工厂配件 DIY 选配器
项目类型:外贸站前端原型
核心功能:
5 大类配件自由选配,分类 Tab 切换
互斥规则检测、依赖规则校验
套餐组合自动匹配(性能套装/全装套装折扣)
CSS 分层车辆预览图,配件切换实时跟随变化
中英双语切换 + ¥/$ 汇率联动
订单确认弹窗 + 生产工单导出打印
技术亮点:
深色科技风 UI,三栏响应式布局
整数(分)算价,避免浮点精度问题
复杂业务规则的前端实现
5. 前端三件套实战教程
项目类型:技术文档/教程编写
内容概述:
围绕真实项目编写,口语化风格
十大章节:HTML 基础、CSS 布局、JS 核心、实战项目贯穿
技术亮点:
代码示例丰富,项目关联强
适合零基础入门到实战过渡