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秒，若还是没有其他顾客点这个菜，就将这个菜作废掉，进入下一个状态。

• 顾客点击厨师头像可以加速当前菜的制作，同时厨师背景发生改变，一段时间后变回来，每个顾客最多只能让同一个厨师加速一次

食物设定

• 食物的价格和和成本都是预先设定的，各不相同，每个菜成本大约为价格的一半。

• 顾客食用食物的速度也不相同，但比等待食物的速度要快。

• 顾客用餐是串行的，只有完成一个菜的用餐才会进行下一个菜，用餐顺序按上菜顺序进行。

优化及适配

2. 已在谷歌浏览器和vivo z3真机中做过测试，显示效果良好
3. 项目用vue框架并使用vue-cli脚手架进行开发，使用vuex进行全局状态管理，并使用Apache2在远程服务器上进行了部署上线。
4. 背景图进行了压缩，最终大小只有80k左右

完整项目源码下载地址：基于VUE实现的餐厅经营游戏项目源码