本文主要是介绍基于VUE实现的餐厅经营游戏项目源码，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
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实现的餐厅经营游戏项目源码
这篇关于基于VUE实现的餐厅经营游戏项目源码的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
