今天完成的事情：

1.写了任务4的状态机

明天计划的事情：

1.继续任务4

2.准备一点小课堂

遇到的问题：

1.在做任务4的时候要先理清思路，把自己的思路和实现步骤分点写出来，一步一步地实现，后面有bug再做相应修改

2.在任务4中变量比较多，看起来比较杂乱，把现在所能感知到的变量列出来，后面遇到了再添加，这样对理清思路有帮助，下面是今天列出的变量：

3.这几个页面数据会来回交互，注意在前面提前定义变量，并设置初始值，或者在后面遇到问题了再回去前一个页面设置初始值，比如状态机的step:

在跳转到法官台本页前应先设置初始值并存到本地存储

4.写任务4状态机时，挺考验逻辑思维的，参考了一下师兄代码，说说我的理解：任务4的状态机就是包含了状态和步骤两部分，状态会因为事件而改变，每次触发状态机中的一个步骤会执行一次状态机（可以由点击事件触发），执行状态机时先获取当前的状态，

然后到相应步骤里执行预设函数，预设函数里会设置好状态机所有的可能状态，根据当前状态的不同去做不同的事情，所以每个事件的发生都是受到了状态和步骤的约束，总的来说状态机的工作原理就是，触发步骤-获取当前状态-状态判断-做出相应动作。贴上状态机：

//开始编写状态机(和编写多状态数组差不多)
var fsm = {//分为状态和步骤两部分编写,步骤中嵌套状态判断，点击事件触发步骤
    state: sessionStorage.getItem("step"),//每次执行先获取状态
    killerStep: function () {
        switch (fsm.state) {
            case "killerStep":
                location.href = "task2-6.html";//跳转到杀人页面去杀人
                break;
            case "ghostStep":
                alert("请勿重复操作");//在杀人页面已经将步骤保存到ghostStep
                break;
            case "playerStep":
            case "voteStep":
                alert("请按步骤进行");
                break;
        }

    },
    ghostStep: function () {
        switch (fsm.state) {
            case "killerStep":
                alert("请按步骤进行");
                break;
            case "ghostStep":
                alert("请死者亮明身份并发表遗言");
                fsm.state = "playerStep";
                sessionStorage.setItem("step", "playerStep");
                break;
            case "playerStep":
                alert("请勿重复操作");
                break;
            case "voteStep":
                alert("请按步骤进行");
                break;
        }
    },
    playerStep: function () {
        switch (fsm.state) {
            case "killerStep":
                alert("请按步骤进行");
                break;
            case "ghostStep":
                alert("请按步骤进行");
                break;
            case "playerStep":
                alert("请玩家依次发言讨论");
                fsm.state = "voteStep";
                sessionStorage.setItem("step", "voteStep");
                break;
            case "voteStep":
                alert("请勿重复操作");
                break;
        }
    },
    voteStep: function () {
        switch (fsm.state) {
            case "killerStep":
                alert("请按步骤进行");
                break;
            case "ghostStep":
                alert("请按步骤进行");
                break;
            case "playerStep":
                alert("请按步骤进行");
                break;
            case "voteStep":
                location.href = "task2-6.html";//跳转到杀人页面去杀人
                break;
        }
    }
};
//开始为操作台本各个步骤添加点击事件
$("#killer-step").click(function () {
    fsm.killerStep();
});
$("#ghost-step").click(function () {
    fsm.ghostStep()
});
$("#player-step").click(function () {
    fsm.playerStep()
});
$("#vote-step").click(function () {
    fsm.voteStep()
})

收获：

1.StateMachine: Javascript 有限状态机

有限状态机，（英语：Finite-state machine, FSM），又称有限状态自动机，简称状态机，是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。

状态机的使用：

（1）引入js

  <script src="../state_machine.js"></script>

（2）初始化一个状态机

  // 假设为一个人设置一个状态机 他有年龄、姓名、是否结婚、朋友数量、是否有房，是否有车等状态属性

  var myState = new StateMachine({

      // 年龄

      age: 27,

      // 姓名

      name: 'season.chen',

      // 是否结婚

      marry: false,

      // 朋友个数

      friends: 10,

      // 房

      house: false,

      // 车

      car: false

  });

（3）绑定事件：myState.on(name, handler, conditions) or myState.on(handler, conditions) or myState.on(handler)

name: 事件的名称，便于识别，也便于解除事件时使用

handler: 事件处理程序

  handler = function(data) {

      // data.from: 之前的状态

      // data.to：之后的状态

      // data.changes： 改变

  }

conditions: 事件触发的条件，满足条件才会触发事件

如果condition是函数，它的返回值true,表示满足条件。如果condition是对象，对象里的所有条件都满足，才会触发事件。

  // 可以是函数

  conditions = function(from, to, changes) {

      // from: 之前的状态

      // to：之后的状态

      // changes： 改变

  }

  // 更多场合用对象

  conditions = {

      // 改变前的状态需满足

      from: {

          age: 22, // 可以是字符串、数字、布尔值,

          friends: function(from, to) {return to > 20}, // 可以是函数

          name: ['name1', 'name2'], // 可以是数组,

          name: /name1|name2/, // 可以是正则,

      },

      // 改变后的状态需满足

      to: {

          // 同from

      },

      // 这些状态需要改变

      changes: [],

      // 这些状态至少有一个改变

      anyChanges: []

  }

（4）移除事件：myState.off(name, handler) or myState.off(handler) or myState.off(name) or myState.off()

（5）将状态恢复到初始化状态: myState.reset()

（6）设置状态: myState.set(stateKey, stateValue) or myState.set({name: '11', age: 1})

（7）获取状态: myState.get(stateKey) or myState.get()

（8）触发事件： myState.trigger(name, handler) or myState.trigger(name) or myState.trigger(handler) or myState.trigger()

进度：js任务4

任务开始时间：2018.7.2

预计demo时间：2018.7.5

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/project-task-719.html