js-04  杀人和投票的业务逻辑有什么区别？

背景介绍：

在实现一个页面前，我们需要先清楚该页面的业务逻辑。

混沌的状态思路不清晰，不利于编程。今天我们来看一下任务4的两个功能页面，杀人和投票的业务逻辑是什么，它们有什么区别。

什么是业务逻辑？

业务逻辑部分是软件产品的核心，它客观存在于软件产品内部，界面交互部分是业务逻辑与使用者进行交流的接口，使用者通过界面交互部分，与业务进行交流。软件产品除界面和交互外的一切都可看作是广义上的业务逻辑

知识剖析：

1.杀人的业务逻辑？

2.投票的业务逻辑？

3.简易版二者区别

4.定义游戏结束？

简易版：

杀人的业务逻辑？

一．玩家无操作时：1.打印出每个玩家的身份方框。2.标记出已经出局的玩家。

二．选择杀死玩家时：1。点击选中玩家的方框时，给出相应被选中提示。不可以选择已出局玩家。杀手不可以杀死同伙。3.更换选择玩家时，该玩家状态标记为被选中，其他玩家都为未选中。

三．确认杀死玩家时，对该玩家的对象属性更改。例如生命属性更改为killed，并记录死亡天数。

投票的业务逻辑？

一．玩家无操作时：1.打印出每个玩家的身份方框。2.标记出已经出局的玩家。

二．选择投死玩家时：1。点击选中玩家的方框时，给出相应被选中提示。不可以选择已出局玩家。3.更换选择玩家时，该玩家状态标记为被选中，其他玩家都为未选中。

三．确认杀死玩家时，对该玩家的对象属性更改。例如生命属性更改为voted。记录该玩家死亡天数。

四．每次投票结束后，天数+1.

五．判断游戏是否结束。

简易版二者区别？

杀人时不可以选择同阵营玩家。投票时，玩家不知道阵营身份，可以不分阵营的选择投死玩家。投票后天数+1.

定义游戏结束？

判断条件？

每天结束后判断玩家人数，当杀手人数大于等于平民人数时游戏结束，或者当杀手人数为0时结束游戏。

常见问题:

1.如何获取玩家方框内的文字？

$(".box").click(function () {
    //获取被选中的盒子内文字
    var roleText=$($(this).find(".role")).text();

2.如何判断是否达成条件？

在这里分享一个思路，如果其他同学有不同想法欢迎分享讨论。

var aliveKill=[];
var aliveVill=[];

循环总数组，使用判断条件分别把活着的杀手和活着的平民存储到相应数组里。

判断两个数组的长度即可得出是否达成结束条件以及胜负分别是谁。

3.存储玩家状态？

var oStatus = [];

oStatus[i] = {};
oStatus[i].num = i + 1;
oStatus[i].role = aTotal[i];
oStatus[i].life = "alive";
oStatus[i].deadDay=null;

扩展思考：如果是多人客户端版狼人杀，杀人和投票的业务逻辑应该怎么安排呢？

在简易版基础上添加逻辑。杀人：杀手玩家可以看到同阵营玩家的身份。其他玩家视角，所有玩家身份不显示。有多个杀手时，选择要杀的玩家不统一，则少数服从多数，考虑每个杀手选择对象均不同的情况。

投票：所有玩家都看不到其他玩家的身份。投票时不同玩家投票不同，选取票数最多的投死。若出现最多票数相同情况，再考虑。

参考文献：http://www.uml.org.cn/zjjs/201008021.asp 细说业务逻辑

http://www.cnblogs.com/zhaoxiaolei/archive/2012/04/06/2434112.html 如何理解业务逻辑

更多讨论：简易版的业务逻辑，你有其他的想法吗？ 如何实现？

今天完成的事：1.准备小课堂PPT。

2.准备完小课堂剩下的时间继续做任务7.用angular给form表单添加验证功能。

使用ng-message报错：

Error: [$injector:unpr] Unknown provider: ngMessagesProvider <- ngMessages <- loginCtrl

http://errors.angularjs.org/1.6.3/$injector/unpr?p0=ngMessagesProvider%20%3C-%20ngMessages%20%3C-%20loginCtrl

    at angular.js:66

在登录页的js中已注入

var loginApp = angular.module('loginApp', ['ngMessages']);

html：

<div ng-app="loginApp">
    <div class="login-content" ng-controller="loginCtrl">
        <div class="login-wrap">
            <h3 class="login-title">喝我水站后台登录</h3>
            <form action="" name="loginForm">
                <div class="user-wrap">
                    <img src="images/icon-user.png"/>
                    <input type="text" placeholder="用户名" class="inp-user" id="sUserName"
                           name="userName"
                           ng-model="inName"
                           ng-minlength="5"
                           ng-maxlength="20"
                           required />
                </div>
                <div class="warning user-warn" ng-message="loginForm.userName.$error">
                    <div ng-message="required">*必填</div>
                    <div ng-message="minlength">用户名不可以小于5位</div>
                </div>

main文件中也引用了ng-message的cdn。

不明白为什么会出现这个报错。

学习了自定义的filter。使用filter把约定的字段和汉字对应起来。

但是不知道如何与html里的绑定。

明天要做的事：继续学习ng。

遇到的问题：angular的语法有点迷。运行时数据如何传递的，不清楚。

收获：