基于Vue实现的餐厅经营游戏项目源码

基于Vue实现的餐厅经营游戏项目源码

引用

CSDN

1.

https://m.blog.csdn.net/2301_76484015/article/details/137371241

本文介绍了一个基于Vue框架实现的餐厅经营模拟游戏项目。该项目通过模拟顾客点餐、厨师烹饪、用餐支付等流程，实现了完整的餐厅经营体验。文章详细介绍了项目中的角色状态、游戏设定以及技术实现，并提供了完整的源码下载地址。

项目介绍

实现了一个类游戏的餐厅经营模拟，涉及的前端知识有移动端 HTML 页面布局及样式实现。实现了厨师、顾客等角色的关键操作，完成从顾客等位、点菜、烹饪、用餐、支付的一系列状态变更的数据、信息、交互、展现的变化及处理。

项目效果图

项目中角色的状态介绍：

厨师的状态

顾客的状态

食物的状态

部分游戏设定：

需求文档中的内容基本全部完成，这里介绍一些比较重要的部分和自设定的部分。

时间设定

• 每周7天，每天6小时，每小时30秒
• 头部的时间栏背景色设为动态变化的，用来提示距离下一天的时间。
• 每小时结束时自动收集还未主动收集的金币，并将顾客请走。
• 每天结束时自动安抚还未主动安抚的顾客，并将顾客请走。
• 每周结束后自动结算厨师工资，每天￥20，若周内某天没有工作，则当天没有工资（万恶的资本家！）。

顾客设定

• 顾客从预先设定的18个候选顾客中随机产生。
• 游戏开始一秒后会来第一个顾客，随后每隔三秒会随机产生一名顾客，顾客可能来，也可能不来。
• 每个顾客每天只能来餐厅一回。等待队列最长为5个，顾客到了之后若等待人数超过5人，则会离开，今天之内不会再来。
• 点击等待队列后顾客立即从队列中去除，先出现菜单栏，点菜之后就坐。

厨师设定

• 厨师开始做菜时，减去做菜的成本，当成本大于现有现金时，显示为负值
• 解雇厨师时，支付厨师￥140
• 厨师做好菜后给顾客上菜，如果该顾客等待已经超时，则等待5秒，若还是没有其他顾客点这个菜，就将这个菜作废掉，进入下一个状态。
• 顾客点击厨师头像可以加速当前菜的制作，同时厨师背景发生改变，一段时间后变回来，每个顾客最多只能让同一个厨师加速一次

食物设定

• 食物的价格和和成本都是预先设定的，各不相同，每个菜成本大约为价格的一半。
• 顾客食用食物的速度也不相同，但比等待食物的速度要快。
• 顾客用餐是串行的，只有完成一个菜的用餐才会进行下一个菜，用餐顺序按上菜顺序进行。

优化及适配

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

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