** 难度 ** ⭐⭐⭐ 需要具备基础知识
通过实现一个类游戏的餐厅经营模拟,练习移动端 HTML 页面布局及样式实现。
本练习中,要实现厨师、顾客以及你自己三个角色的关键操作,完成从顾客等位、点菜、烹饪、用餐、支付的一系列状态变更的数据、信息、交互、展现的变化及处理。
可以参考原型图
本练习提供的附件中,包括了开发本练习所需要的图片资源。
- 时间元素:显示在左上角,初始值为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 实现;如果有额外自己添加的需求场景,可以自行按需求增加图片资源;
- 提供的原始图片资源体积较大,根据实际需要进行性能优化所需要的压缩;