# web餐厅小游戏

**Repository Path**: tyoubin_admin/web-restaurant-games

## Basic Information

- **Project Name**: web餐厅小游戏
- **Description**: 一个餐厅经营模拟类游戏，实现了厨师、顾客等角色的关键操作，完成从顾客等位、点菜、烹饪、用餐、支付的一系列状态变更的数据、信息、交互、展现的变化及处理。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2021-07-30
- **Last Updated**: 2022-01-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

WebMOOC 餐厅游戏

**难度** :star: :star: :star: 需要具备基础知识

## 项目介绍

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

项目上线地址：[http://hikari.top:8102/](http://hikari.top:8102/)

## 项目效果图
<img src="https://img-blog.csdnimg.cn/20210719000057204.png"  width="32%"/><img src="https://img-blog.csdnimg.cn/20210719000442809.png"  width="32%"/><img src="https://img-blog.csdnimg.cn/20210719000524682.png"  width="32%"/>

## 项目中角色的状态介绍：

- ### 厨师的状态

| 状态名称 | 状态描述                         |
| :------- | -------------------------------- |
| free     | 未开工，等待顾客点菜             |
| working  | 已接单，正在做菜                 |
| speeding | 被顾客疯狂点击，加速做菜一段时间 |
| complete | 完成当前菜的制作，等待客人确认   |


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210719000751637.png)



- ### 顾客的状态

| 状态名称 | 状态描述                               |
| -------- | -------------------------------------- |
| waiting  | 位于等待队列，等待就坐                 |
| free     | 当前座位没有人（属于餐厅内座位的状态） |
| siting   | 已下单，等待厨师接单并制作             |
| eating   | 正在进食                               |
| appease  | 所有菜都超时，需要安抚后离开           |
| pay      | 点的菜已经吃完，准备结账               |


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210719000820958.png)



- ### 食物的状态

| 状态名称  | 状态描述                 |
| --------- | ------------------------ |
| waiting   | 顾客已下单，等待厨师接单 |
| doing     | 厨师已接单，正在做菜     |
| completed | 厨师已做完，等待顾客接单 |
| eating    | 正在被顾客食用           |
| eatup     | 已被顾客吃完             |
| destroy   | 等待时间已超时           |


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210719001035837.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5Njg1NA==,size_16,color_FFFFFF,t_70)



## 部分游戏设定：

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

### 时间设定

- 每周7天，每天6小时，每小时30秒

- 头部的时间栏背景色设为动态变化的，用来提示距离下一天的时间。

- 每小时结束时自动收集还未主动收集的金币，并将顾客请走。

- 每一天结束时自动安抚还未主动安抚的顾客，并将顾客请走。

- 每周结束后自动结算厨师工资，每天￥20，若周内某天没有工作，则当天没有工资（万恶的资本家！）。

### 顾客设定

- 顾客从预先设定的18个候选顾客中随机产生。

- 游戏开始一秒后会来第一个顾客，随后每隔三秒会随机产生一名顾客，顾客可能来，也可能不来。

- 每个顾客每天只能来餐厅一回。等待队列最长为5个，顾客到了之后若等待人数超过5人，则会离开，今天之内不会再来。

- 点击等待队列后顾客立即从队列中去除，先出现菜单栏，点菜之后就坐。

### 厨师设定

- 厨师开始做菜时，减去做菜的成本，当成本大于现有现金时，显示为负值

- 解雇厨师时，支付厨师￥140

- 厨师做好菜后给顾客上菜，如果该顾客等待已经超时，则等待5秒，若还是没有其他顾客点这个菜，就将这个菜作废掉，进入下一个状态。

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

### 食物设定

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

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

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

## 优化及适配

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