HTML5 2D平台游戏开发#4状态机

　　在实现了《HTML5 2D平台游戏开发——角色动作篇之冲刺》之后，我发现随着角色动作的增加，代码中的逻辑判断越来越多，铺天盖地的if() else()语句实在让我捉襟见肘：

这还仅仅是角色只有数个动作的情况下，如果后期角色动作越来越多，那么这种编码方式不仅容易出错，而且还难以维护，我意识到自己正在朝一个错误的方向前进。在做了一番调研后，发现有限状态机(Finite-state machine，简称FSM)是解决这类问题的方案之一。不过在使用状态机之前，首先要明确都有些什么状态，状态之间是如何切换的。在稿纸上画一张草图来整理一下思路：

可以发现，虽然现在角色只有四种状态，但按键分支已经达到八种，而且还没有考虑到在每个状态中虽然按下按键但不改变状态的情况，比如跳跃中按下A/D键能左右移动但还是跳跃状态。

下面就到了实现状态机的阶段了。状态机首先要有一个标识当前状态的成员，另外还需要一个设置这个成员的方法：

function FSM() {
    var activeState = null;

    //@param state {Function} 每一个状态对应一个执行函数
    this.setState = function(state) {
        activeState = state;
    };

    this.update = function() {
        if (activeState != null) {
            activeState();
        }
    };
}

var f = new FSM();
var flag = true;

f.setState(function() {
    console.log('现在是站立状态');
});

//模拟状态切换
(function updateState() {
    if (flag) {
        f.setState(function() {
            console.log('现在是移动状态');
        });
        flag = !flag;
    } else {
        f.setState(function() {
            console.log('现在是站立状态');
        });
        flag = !flag;
    }
    f.update();
    setTimeout(updateState, 1000);
})();

不过，这个状态机在游戏中不会用到