WebMOOC 餐厅游戏

Posted 2021-08-08 忘忘碎斌bin

WebMOOC 餐厅游戏

最近在写这个东西，也有几天了吧，平常的进度的化，大概两天之内可以完成了，
先看一下大概的效果吧， ⭐️兴趣就私我吧。

练习介绍

难度 ⭐️ ⭐️ ⭐️ 需要具备基础知识

通过实现一个类游戏的餐厅经营模拟，练习移动端 html 页面布局及样式实现。

本练习中，要实现厨师、顾客以及你自己三个角色的关键操作，完成从顾客等位、点菜、烹饪、用餐、支付的一系列状态变更的数据、信息、交互、展现的变化及处理。

可以参考原型图

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

用例描述：

涉及的单位元素：

• 时间元素：显示在左上角，初始值为W0，D0
  • W：周，W+数字，表示第几周，每过7天，W后面的数字增加1
  • D：天，D+数字，表示星期几，每周有7天，所以D有D1~D7，每一天有 X 秒（X 自定义，建议可以为240）。D7结束后，D变回D1，W增加1
• 金钱元素：显示在右上角，初始值为500（可自定义）

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

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

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

顾客的属性包括：

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

顾客的行为包括：

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

厨师的行为包括：

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

你的行为包括：

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

要求

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