WebMOOC 餐厅游戏
项目介绍
实现了一个类游戏的餐厅经营模拟,涉及的前端知识有移动端 HTML 页面布局及样式实现。实现了厨师、顾客等角色的关键操作,完成从顾客等位、点菜、烹饪、用餐、支付的一系列状态变更的数据、信息、交互、展现的变化及处理。
项目效果图
项目中角色的状态介绍:
状态名称 | 状态描述 |
---|---|
free | 未开工,等待顾客点菜 |
working | 已接单,正在做菜 |
speeding | 被顾客疯狂点击,加速做菜一段时间 |
complete | 完成当前菜的制作,等待客人确认 |
状态名称 | 状态描述 |
---|---|
waiting | 位于等待队列,等待就坐 |
free | 当前座位没有人(属于餐厅内座位的状态) |
siting | 已下单,等待厨师接单并制作 |
eating | 正在进食 |
appease | 所有菜都超时,需要安抚后离开 |
pay | 点的菜已经吃完,准备结账 |
状态名称 | 状态描述 |
---|---|
waiting | 顾客已下单,等待厨师接单 |
doing | 厨师已接单,正在做菜 |
completed | 厨师已做完,等待顾客接单 |
eating | 正在被顾客食用 |
eatup | 已被顾客吃完 |
destroy | 等待时间已超时 |
部分游戏设定:
需求文档中的内容基本全部完成,这里介绍一些比较重要的部分和自设定的部分。
时间设定
-
每周7天,每天6小时,每小时30秒
-
头部的时间栏背景色设为动态变化的,用来提示距离下一天的时间。
-
每小时结束时自动收集还未主动收集的金币,并将顾客请走。
-
每一天结束时自动安抚还未主动安抚的顾客,并将顾客请走。
-
每周结束后自动结算厨师工资,每天¥20,若周内某天没有工作,则当天没有工资(万恶的资本家!)。
顾客设定
-
顾客从预先设定的18个候选顾客中随机产生。
-
游戏开始一秒后会来第一个顾客,随后每隔三秒会随机产生一名顾客,顾客可能来,也可能不来。
-
每个顾客每天只能来餐厅一回。等待队列最长为5个,顾客到了之后若等待人数超过5人,则会离开,今天之内不会再来。
-
点击等待队列后顾客立即从队列中去除,先出现菜单栏,点菜之后就坐。
厨师设定
-
厨师开始做菜时,减去做菜的成本,当成本大于现有现金时,显示为负值
-
解雇厨师时,支付厨师¥140
-
厨师做好菜后给顾客上菜,如果该顾客等待已经超时,则等待5秒,若还是没有其他顾客点这个菜,就将这个菜作废掉,进入下一个状态。
-
顾客点击厨师头像可以加速当前菜的制作,同时厨师背景发生改变,一段时间后变回来,每个顾客最多只能让同一个厨师加速一次
食物设定
-
食物的价格和和成本都是预先设定的,各不相同,每个菜成本大约为价格的一半。
-
顾客食用食物的速度也不相同,但比等待食物的速度要快。
-
顾客用餐是串行的,只有完成一个菜的用餐才会进行下一个菜,用餐顺序按上菜顺序进行。
优化及适配
- 已在谷歌浏览器和vivo z3真机中做过测试,显示效果良好
- 项目用vue框架并使用vue-cli脚手架进行开发,使用vuex进行全局状态管理,并使用Apache2在远程服务器上进行了部署上线。
- 背景图进行了压缩,最终大小只有80k左右
完整项目源码下载地址:基于VUE实现的餐厅经营游戏项目源码