餐厅游戏开发文档

概述

由于记错了大作业提交日期, 所以匆匆完成了这次的结课作业提高版, 代码写的属实是有点没有经过细细推敲, 有一些可选需求也是按照简化需求的版本完成的, 游戏的参数也没有经过过多的测试(这导致节奏时快时慢, 非常容易赔钱┗( T﹏T )┛). 如果实在是观感不佳还可以看看结课作业基础版

项目目标

通过实现一个类游戏的餐厅经营模拟，练习移动端 HTML 页面布局及样式实现,以及在 JavaScript 使用面向对象编程，在你的设计中应用合适的设计模式.

编码要求

参考原型图，使用 HTML+CSS+JavaScript 实现兼容移动端的餐厅游戏，要实现厨师、顾客以及你自己三个角色的关键操作，完成从顾客等位、点菜、烹饪、用餐、支付的一系列状态变更的数据、信息、交互、展现的变化及处理。

本练习提供的附件中，包括了开发本练习所需要的图片资源。

用例描述：

涉及的单位元素：

• 完成 时间元素：显示在左上角，初始值为W0，D0

  • 完成 W：周，W+数字，表示第几周，每过7天，W后面的数字增加1
  • 完成 D：天，D+数字，表示星期几，每周有7天，所以D有D1~D7，每一天有 X 秒（X 自定义，建议可以为240）。D7结束后，D变回D1，W增加1

• 完成 金钱元素：显示在右上角，初始值为500（可自定义）

金钱变化发生在以下几个动作：

• 完成 顾客支付时，增加顾客支付的金钱数量
• 完成 厨师开始做菜时，减去做菜的成本，当成本大于现有现金时，显示为负值
• 完成 D7结束的时候，支付厨师的工资，每个厨师的工资 = 向上取整（按厨师实际工作的天数 / 7 * 周薪）。每个厨师的周薪假设为 ￥140（可自定义）
• 完成 解雇厨师时，支付厨师的当周工资及额外的解雇费用，当周工资计算方式同上，解雇费用为一周工资。

餐厅中有三个角色：厨师、顾客 和 你

顾客的属性包括：

• 完成 姓名：顾客的姓名，开发者自行安排
• 完成 头像：顾客显示在界面的形象

顾客的行为包括：

• 完成 来到餐厅：顾客到餐厅，在同一天里，顾客可以不来，也可以来，且最多来一次
• 完成 等待接待：顾客到餐厅后，先在餐厅外面等候你接待；等候区最多容纳 X 位顾客（X自定义，建议为6）。当等候区人满的时候，如果有新顾客来到餐厅，他将会直接离开，不进入等候区，且今天都不会再来。
• 完成 放弃等位：顾客耐心有限，所以等待接待是有时间限制的，当超过等待时间 n 秒（n自定义，但建议小于 1D 的时间），顾客会放弃等位离开，且这天内都不会再来；
• 不计划完成入座：当餐厅有空座，你点击等位的任何一个顾客头像，都会让排在第一位的顾客入座；当餐厅没有空座时，点击等位任何一个顾客头像时不做响应；
• 完成 入座简化需求：当餐厅有空座时，排等候第一位的顾客自动入座；
• 完成 点餐：顾客入座后，自动弹起点餐界面，此时时间停止，顾客开始点餐，按照界面中提供的菜肴和点餐规则进行点餐（菜肴名字也可以自定义，但注意如果菜肴名字过长，在界面的其它显示菜肴的地方注意做超长截断的体验优化）。顾客完成点餐，点餐信息发送给下一个环节，点餐界面消失，时间继续走动，顾客开始等候上菜。当顾客点餐不符合规则时，完成点餐的按钮呈现不可点击样式，且点击不做响应；
• 完成 放弃点餐：顾客若这时放弃点餐，则直接离开位置和餐厅，且今天不再来，然后点餐界面消失，时间继续走动；
• 完成 等待上菜：每道菜的等候忍耐时间不同，凉菜和饮品的等候耐心时间较短，主菜的耐心时间较长；
• 完成 用餐：每上一个菜后，顾客开始用餐，每个菜有一个用餐时间，凉菜和饮品的用餐耐心时间较短，主菜的用餐时间较长；用餐是串行的，只有完成一个菜的用餐才会进行下一个菜，用餐顺序按上菜顺序进行。如果顾客的某一个菜未在等候耐心时间到达终点前上，则顾客放弃这个菜，将不会进行这个菜的用餐和支付；
• 不计划完成等餐太久生气：当顾客点的所有菜都未按时上来时，顾客进入生气状态，顾客头像旁边出现心形按钮，需要你去安抚顾客，顾客才会离开，否则顾客会一直待到当天结束时才会离开餐厅；顾客在这种状态下不会进行支付；
• 完成 等餐太久生气的简化需求：顾客进入生气状态后弹提示“XXX顾客没有吃上任何东西，生气离开”，然后立即离开餐厅；
• 不计划完成 支付：当顾客完成用餐，会出现一个支付按钮，当你去点击支付按钮后，对顾客完成用餐的菜进行支付，支付完成后，顾客离开餐厅；如果你一直未点击支付按钮，顾客会待一定时间（也可以是待到餐厅结束）后自行支付后离开
• 完成 支付简化需求：顾客完成用餐后，弹提示“XXX完成用餐，支付XXX元”，然后立即支付离开餐厅；
• 完成 离开餐厅：当顾客支付或是生气离开后，座位空出来。

厨师的行为包括：

• 完成 空闲：空着，嗯嗯
• 完成 做菜：每个菜有个进度，凉菜和饮品的速度较快，主菜较慢；做菜需要成本，开始做菜时，会扣除这个菜的成本，每个菜成本是独立的，成本由开发者自定；
• 不计划完成做好菜：做好菜以后状态发生改变，等待你上菜，上完菜以后首先进入下一个状态（空闲或是做下一个菜），如果做好菜一直没有上菜，等待一段时间后，这个菜作废掉，厨师进入下一个状态（空闲或是做下一个菜）；如果做的菜因为时间过长，已经没有顾客需要，则直接复用上一个等待上菜的逻辑；
• 完成 做好菜的简化需求：每个菜都是绑定顾客，做好了自动上给顾客，无需有上菜的交互操作；这种时候，如果做好的菜顾客已经不要，可以是在顾客不要时就自动停止做该菜，或是做好菜以后菜自动作废。

你的行为包括：

• 完成 招聘厨师：在界面中点击招聘厨师按钮，并进行二次确认，厨师最多6名；
• 完成 解雇厨师：在界面中解雇空闲的厨师，并进行二次确认，厨师最少一名；
• 完成 招聘和解雇的简化需求：（以上两个需求也可以简化成为固定厨师数量，不可招聘也不可解雇）；
• 完成 安排厨师做菜：界面上无操作，实现一个逻辑，当顾客点完菜后，安排厨师做菜；
• 完成 加速厨师（可选）：当厨师做菜时，点击厨师头像能加速做菜进度；
• 不计划完成引导顾客入座：当餐厅有空位时，点击等候区的顾客，可以引导顾客做等位区进入座位进行点餐：同顾客用例中描述；
• 完成 引导顾客入座简化需求：当餐厅有空位时，自动让等候区第一位顾客入座，无需点击操作；
• 不计划完成：当厨师做好一个菜时，如果有顾客点了这个菜，则在这个菜旁边出现上菜按钮，点击后给这个顾客上菜；如果超过一定时间没有上菜，则这个菜作废；
• 完成 上菜的简化需求：厨师每做一个菜都是定好顾客的，不需要你做上菜的动作，菜做好了自动上菜；
• 不计划完成收费：当顾客完成用餐后，在顾客头像旁出现金钱按钮，点击完成收费行为，其他逻辑同顾客用例中描述；
• 完成 收费的简化需求：当顾客完成用餐后，自动收费，不需要你点击；
• 不计划完成安抚顾客：顾客因为所有菜等候时间都超时而进入生气状态后，会出现一个心形按钮，你点击按钮后，顾客会离开餐厅；
• 完成 安抚顾客简化需求：顾客直接走掉，不需要你做什么。

要求

• 完成 兼容性满足PC Chrome下的移动调试窗口 + 手机自带浏览器，不需要兼容微信，UC等第三方浏览场景；
• 完成 代码风格优雅，代码结构合理，技术设计恰到好处；
• 完成 框架使用方面，建议不使用框架实现一遍，然后再使用框架实现一遍；
• 完成 只能附件中提供的图片资源，其他样式均使用 CSS 实现；如果有额外自己添加的需求场景，可以自行按需求增加图片资源；
• 完成 提供的原始图片资源体积较大，根据实际需要进行性能优化所需要的压缩；

Todo

• 计划中 调整默认参数
• 计划中 优化一下JS吧
• 计划中 写完上面不计划完成的

玩法介绍

• 游戏中会随机出现顾客, 你需要为用户点单, 菜单自带合法性校验
• 点击加号招募厨师
• 长按厨师解雇厨师
• 在厨师做菜时双击厨师加速烹饪

游戏参数

• 最大可用厨师数: 6

• 最大可用餐桌数: 4

• 等位区大小: 5

• 初始化资金: 500

• 厨师周薪: 140

• 厨师解雇违约金: 140

• 每日时长: 40000 ms

• 用户等位忍耐时长: 15000 ms

• 每次双击厨师减少剩余时间: 700 ms

• 新客户出现平均间隔: 10000 ms

• 食物列表

  id	食物名	售价	顾客最长等待时间	顾客食用时间	成本	制作用时
  0	'凉拌SAN'	6	7000	5000	4	3500
  1	'冷切DOM'	4	7000	5000	3	3500
  2	'UL炖LI'	12	10000	7000	8	5000
  3	'红烧HEAD'	15	10000	7000	10	5000
  4	'酥炸ECharts'	18	10000	7000	12	5000
  5	'炙烤CSS'	16	10000	7000	12	5000
  6	'清蒸DIV'	12	10000	7000	8	5000
  7	'鲜榨flex'	5	7000	5000	3	3500
  8	'小程序奶茶'	6	7000	5000	4	3500

• 菜单

  类目	最少选购1	最多选购	可选食物ID
  '凉菜(二选一,可不点)'	0	1	'0, 1'
  '主菜(五选二,必点)'	2	2	'2, 3, 4, 5, 6'
  '饮料(二选一,可不点)'	0	1	'7, 8'

• 可用色彩风格: ['gray', 'yellow', 'red', 'orange', 'purple', 'green', 'blue', 'brown'] debug.js:170

• 可用姓名: ['Allen', 'Alice', 'Julie', 'Kathy', 'Vivian', 'Denise', 'Nancy', 'Mary', 'Emma', 'Olivia', 'Marilyn', 'Helen', 'Paula', 'Elaine', 'Carrie', 'Deborah', 'Charlotte', 'Eva', 'Jaime', 'Kathleen', 'Lydia', 'Jenny', 'Melody', 'Lucia', 'Frances', 'Ann', 'James', 'Kelly', 'Kevin', 'Rose', 'Lisa', 'Sandra', 'Donna', 'Carol', 'Cynthia', 'Brenda', 'Virginia', 'Pamela', 'Christine', 'Marie', 'Janet', 'Alma', 'Beth', 'Ellen', 'Gina', 'Anne', 'Irene', 'Annie', 'Edith', 'Jeanne']

代码结构

.
├── css
│   ├── components.css        // 封装组件样式
│   ├── components.css.map
│   ├── components.less
│   ├── style.css             // 游戏样式表
│   ├── style.css.map
│   └── style.less
├── design                    // 设计稿
│   ├── indexDesign.html
│   └── restaurant_prototype.png
├── document                  // 开发文档
├── img                       // 图片资源
├── index.html                // 游戏页面
├── js
│   ├── tool-kits.js          // 工具函数
│   ├── components.js         // 封装组件JS
│   ├── StateManager.js       // 状态管理器
│   ├── config.js             // 游戏参数配置
│   ├── GameTimer.js          // 全局计时器
│   ├── Cook.js               // 厨师对象
│   ├── Customer.js           // 顾客对象
│   ├── Resaturant.js         // 餐厅对象JS
│   └── index.js              // 引入其他JS
├── package.json              // 用于使用ESLint与Prettier
├── package-lock.json
└── README.md                 // 开发文档MarkDown

数据结构

Restautant类

• 方法: build 初始化

• 方法: addProcess(ele,idx) 添加进度条颜色

• 变量: config 配置文件

• 厨师相关

  • 方法: toggleCookPlus() 显示加号
  • 方法: hireCook() 雇佣厨师
  • 方法: missCook(id) 解雇厨师
  • 变量: cooksEle cooks元素
  • 变量: cookPlusEle 增加厨师按钮
  • 变量: cooks 所有可用厨师
  • 变量: cooksOnServe 在工作的厨师数量
  • 变量: cookDefaultEle 默认厨师元素
  • 变量: cookEleArr 所有厨师元素数组
  • 变量: cooksOnServe 在工作的厨师数量

• 顾客相关

  • 方法: addCustom() 增加顾客
  • 方法: delCustom(cus) 删除顾客
  • 方法: saveMenu() 保存菜单
  • 变量: customersEle customers元素
  • 变量: customersWaitEle 等待队列元素
  • 变量: customers 所有客户数组
  • 变量: customersId 当前客户ID
  • 变量: customerDefaultEle 客户默认模板
  • 变量: customerEleArr 在服务客户元素数组
  • 变量: foodWaitQueue 没有分配厨师的餐

Cook类

• 方法: init 初始化状态
• 方法: work 被雇佣
• 方法: rest 被解雇
• 方法: toCooking 开始做饭
• 方法: createProcess 创建工作进度
• 方法: refreshProcess 刷新工作状态
• 方法: throwFood 提交食物
• 方法: cookFinish 做完处理
• 方法: tryNewDish 尝试抓取新任务

Customer类

• 方法: buildDom 插入DOM
• 方法: flashIndex 更新等待队列
• 方法: addTag 添加进度条
• 方法: startTimer 开始计时
• 方法: findEmptyDesk 找到第一个空桌子
• 方法: flashIndex 刷新当前排位号
• 方法: addTag 添加标签(等位中/菜名)
• 方法: refreshFoodWaitProcess 刷新等待食物/进食进度条
• 方法: refreshSitWaitProcess 刷新等位进度条
• 方法: grayTag 将进度条变灰(当一个食物等待超时时)
• 方法: addRecept 点单后用户接收菜单
• 方法: saveFood 用户从厨师处获得一道菜
• 方法: tryEating 尝试去吃(如果有食物在等待被吃队列)
• 方法: pay 付款并走人
• 方法: toSad 一道菜都没有等到时
• 方法: back 离开

调试用API

打开DevTools会显示API列表(输入debugMod()开启调试)

• debug.addCook(): 增加厨师
• debug.delCook(id): 删除厨师
• debug.addCustom(): 增加顾客
• debug.delCustom(id): 删除厨师
• debug.resetConf(config): 修改配置文件并重新加载(未经测试, 参数为要修改的部分配置)
• debug.setMoney(val): 设置资产
• debug.setToday(val): 设置日期