斗牛游戏前端，目前socket尚未采取单例模式，早期设计有误，时间仓促，敬请谅解，后续优化。
###拉取代码（git clone）
###安装依赖（npm i）
###修改config文件内部API_URL地址和socket文件内部连接地址
###npm run serve启动即可
###移步后端项目启动(back-end-fight-bull)服务和数据库
###游戏介绍： 1.访问项目地址，进入主界面，如果未登录，跳转至登录界面
2.登录界面展示游戏bgm，背景图和标题，提供用户名和密码输入框和提交按钮，点击提交按钮前，验证输入框内容是否填写 未填写给出提示。点击登录，如果用户未注册，则提示是否注册并登录，否则直接登录。
3.进入游戏主界面，可以点击头像，切换用户角色头像，目前不支持自主上传，还可以创建房间，和进入房间列表，查看已有房间。
4.点击创建房间，会将创建成功的消息推送给各个客户端，并将房间信息同步到房间列表，点击房间列表，可以看到所有用户创建的房间。 自己创建的房间如果是空的，则可以删除。
5.选择进入一个房间，可以看到房间内的玩家，最多五名，此时可以点击准备按钮，如果其他玩家未点击准备，则界面显示“请等待其他玩家准备”
6.所有玩家准备完毕后，出现抢庄倒计时，三秒后，出现抢庄按钮，服务端根据客户端请求速度来决定庄家归属，此时已经完成发牌，显示牌背。
7.可以点击翻牌查看自己的底牌，后续可再点击开牌，公布自己的牌面，同时显示牛数，待所有玩家开牌完毕，服务端自动结算积分。
8.一秒后，可点击再来一局，待所有人点击再来一局后，游戏流程进入第二个周期，后续完全一样。
创建房间： 前端对”创建房间“按钮添加点击事件监听，用户点击该按钮，界面立即响应，从底部弹出一个可以输入房间名称的输入框， 和一个确认按钮，这里提供快捷创建房间的方法，即用户不用输入房间名，就可以直接点击确定，创建成功的房间名为 ”${玩家名称}的房间“，当然用户也可以自定义房间名称，输入字符再点击提交即可。点击的这个过程，JavaScript会获取到 用户输入的房间名和用户身份信息，调用WebSocket请求，携带这些信息去向服务端对应的接口发起请求，在用户网络良好的情况下， 服务端会收到客户端的信息，验证身份信息没有过期后，在数据库创建一个房间，然后向所有客户端推送”某某玩家已经成功创建了 某某房间“。前端接收到该推送，就会在界面滑动公告一条信息，告知用户创建成功，对于创建者，还需要将创建房间的弹框关闭。
进入房间： 客户端主界面还有一个”房间列表“的按钮，用户点击后，页面跳转到房间列表页，该页面有一个返回按钮，点击可返回主界面，顶部还有一个 标题，显示房间数，主题内容是对应的各玩家创建的房间，单个房间显示房间名、已有多少人在房间内，如果房间是自己创建的并且内部没有 人，还会出现一个删除按钮，点击即可删除该房间，所有客户端同步清除被删除的房间。 用户点击一个房间，界面会跳转到房间内部页面，会显示所有在房间内用户的基本信息和积分，包括牌面等。用户进入房间后，服务端会在 该房间对应的数据中插入该用户的基本信息，初始化该用户的房间内动作，如准备态，是否已经开牌等等。
玩家准备： 当房间内有大于等于两个用户时，一个玩家点击准备按钮，自己界面会显示”请等待其他玩家准备“提示框，这时，该用户无法进行其他操作， 这是为了避免各个用户操作状态的不统一。点击准备按钮时，前端会将该用户的基本信息、该房间的基本信息和操作指令”准备（ready）“ 通过WebSocket推送至服务端，服务端通过房间基本信息（如房间id），获取到该房间的所有信息，更新该用户在该房间内部的状态， 将更新后的数据推送至所有客户端，玩家可以看到其他玩家已准备的状态，头像旁边显示”ok“字样。
玩家抢庄： 当房间内的所有用户都执行了上一步操作，服务端会识别到该房间所有用户都准备完毕，可以开始游戏了， 这时服务端会通过随机算法给每位用户分配卡牌，并返回一个”allReady“状态， 客户端接收到该状态，会显示所有玩家的牌背，并进行一个三秒倒计时，这三秒内，用户界面会显示”准备抢庄${second}“， 提示用户做好准备点击抢庄按钮，三秒结束后，界面弹出一个”抢庄“按钮，该按钮，所有用户只有一个用户可以点击，因为庄家只有一个。 那么我们采用的是根据客户端发起请求的速度来决定是哪个用户是庄家，最先点击抢庄按钮的玩家可以获取庄家身份， 头像框旁有一个王冠标记。只要庄家已经诞生，所有客户端的界面都会隐藏抢庄按钮。
玩家开牌： 抢庄完毕后，所有用户在牌面右侧都会出现一个”翻牌“按钮，点击翻牌，客户端通过一个动画效果，将牌翻转，显示牌面，这时玩家可以自己 计算点数，自己翻牌后，其他玩家是无法查看的，翻牌完毕后，翻牌按钮变成了”开牌“。玩家点击开牌，伴随着前端界面的音效，点数出现在 牌面上，此时，所有玩家都可以看到开牌玩家的牌面、点数。当所有用户都点了开牌后，服务端自动结算积分增减，显示在用户界面， 至此，一局对局就完成了。卡牌点数早在准备完毕后就会发至客户端，不过此时JavaScript并未将其显示出来，而是添加了牌背卡片来遮盖， 增加悬念，翻牌动作与服务器没有交互，只是单纯的将牌背翻过来，显示牌面，而开牌动作则是需要传递用户信息、房间信息至服务端， 服务端处理数据完毕后，依旧将更新后的数据推送至所有客户端，这也是其他玩家可以看到开牌玩家的牌面的原理。
再来一局： 一局游戏的生命周期始于准备按钮，终于所有玩家开牌，积分结算。这时我们为了用户体验，提供了一个”再来一局“的按钮，可以在不退出 房间的前提下，再次开始另一个对局。我们在客户端通过各个玩家的状态来限制了玩家的动作，比如说，上局对局结束后，只有一名用户 点击了再来一局，那我们是不可以开始游戏的，此时在该玩家界面会显示”请等待其他玩家准备“，也就进入了对局生命周期的第一步， 等待所有玩家准备。这时服务端需要将上一局的对局信息，包括卡牌、点数和状态等初始化。后续操作与上述相同。
####服务器部署项目： 购买服务器，可选择阿里云或者腾讯云等，购买一个基础班服务器，内存不需要太大，配置好自己的登录密码，记住公网ip。
将前端项目通过npm run build命令打包，生成一个dist文件夹，进入，全选内部文件，选择压缩工具，将其压缩，可为zip格式，
名字自取。
我们在本地运行git bash命令行工具，输入scp local_file remote_ip:remote_folder 该命令输入后，会提示你输入
服务器的用户名和登录密码，输入，回车即可。该命令的意思为，将你本地的文件复制到服务器，指定目录下。我们需要将我们的前端项目压缩包
复制到服务器指定目录下，进行存储，并解压缩，便于后续访问。具体命令
scp C:/xxxx/client.zip 172.xxx.xxx:/web/fight-bull
通过Xshell登录服务器
cd /
cd web/
cd fight-bull/
unzip client.zip
后续访问服务地址：172.xxx.xxx/web/fight-bull/index.html即可访问前端项目页面
以同样的操作将后端项目打包，复制到服务器对应目录下。在本地的时候，我们通过npm start命令启动后端服务，
可以发现，我们如果将进程关闭，那服务也就随之关闭了，所以我们需要一个工具来让服务器永久保持运行状态，这就是
npm forever命令，我们需要在服务器安装Nodejs环境，并且安装forever，还有mysql8.0对应的环境，这些安装步骤，
百度下都可以找到，对应安装即可，安装完毕后输入命令查看安装的框架版本。安装成功，我们cd到后端项目的根目录下。
运行npm forever node ./bin/www即开启了永久运行 进程，因为项目添加了端口监听，监听在3000端口，修改前端接口访问地址为
后端服务部署地址，这时我们可以退出服务器，打开浏览器，访问http://172.xxx.xxx/web/fight-bull，就可以正常运行服务了。