前端星计划非凡组项目
一个有趣的推箱子游戏,支持多人对战和多人合作。
注:此项目纯属学习与娱乐,并非商业上线项目,可能存在一些BUG。
原生JS + webpack + ES6/7 + sass
npm install(较慢推荐改用cnpm或者yarn) 安装依赖
npm start 启动服务器
- webpack配置 -- 完成
- 场景布局 -- 完成
- 场景渲染 -- 完成
- 推箱子功能开发 -- 完成
- 双人对战功能开发 -- 完成
- 双人合作功能开发 -- 未完成
- 接口配置 -- 完成
- 项目打包输出 -- 完成
|-- dist // 项目编译打包目录
|-- src // 项目源文件
| |-- common // 公共库
| |-- js // 公共js文件
| |-- backChanged.js // 箱子移入移出样式切换
| |-- bindEvent.js // 封装事件绑定
| |-- checkCode.js // 检测按键对象
| |-- detectCollision.js // 检测物体移动后的碰撞情况
| |-- drawObject.js // 可移动对象渲染
| |-- init.js // JS初始化文件
| |-- isEmpty // 判断对象是否为空
| |-- keyJuge.js // 检测按键是否是对应按键
| |-- level.js // 关卡设计
| |-- move.js // 移动物体
| |-- render.js // 初始化场景渲染
| |-- rerender.js // 更改场景渲染
| |-- scence.js // 场景渲染
| |-- update.js // 触发事件后游戏的流程
| |-- sass // 公共样式文件
| |-- index.scss // 公共样式入口文件
| |-- scence.scss // 移动物体样式入口文件
| |-- app.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件目录
|-- webpack.config.js // webpack配置文件
|-- yarn.lock // yarn版本控制
|-- index.html // 入口html文件
|-- package.json // 项目及工具的依赖配置文件
|-- README.md // 说明
项目结构设置 —By 张正弦
webpack配置 —By 白航、张正弦
移动机制流程图 -By李天惠 张棚贺
关卡设计、人物箱子模型设计、render模块设计 —By 焦俊丽、李君怡
render模块重构、rerender模块设计 —By 张鹏贺
detectCollision模块、move模块设计 —By 李天惠
双人键盘事件处理 —By 张正弦
success逻辑设计 —By 白航
界面设计、游戏细节样式处理 —By 李天惠、李君怡
模块解耦、接口调整、文档更新 —By 张正弦