一个简单Cocos2d-js游戏的策划、流程定义
[size=5]游戏策划[/size]
游戏场景流程
[attachment=80746]
[size=5]游戏状态机[/size]
使用有限状态机实现流程控制。
有限状态机（finite-state machine，缩写：FSM）又称有限状态自动机，简称状态机，是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。
[attachment=80747]
[size=5]创建状态机对象[/size]
[size=4]场景状态[/size]
<pre class="brush:js; toolbar: true; auto-links: false;">
var SceneState = GeneJS.Class({
'public const MENU_MEDIATOR': 'MenuMediator',
'public const HELLO_MEDIATOR': 'HelloMediator',
'public const GAME_MEDIATOR': 'GameMediator',
'public const GAME_OVER_MEDIATOR': 'GameOverMediator',
'public const DRAW_MEDIATOR': 'DrawMediator',
'public const BOOK_MEDIATOR': 'BookMediator'
});
</pre>
[size=4]场景动作[/size]
<pre class="brush:js; toolbar: true; auto-links: false;">
var SceneAction = GeneJS.Class({
'public const HOME_ACTION': 'HomeAction',
'public const MENU_ACTION': 'MenuAction',
'public const HELLO_ACTION': 'HelloAction',
'public const GAME_ACTION': 'GameAction',
'public const GAME_OVER_ACTION': 'GameOverAction',
'public const DRAW_ACTION': 'DrawAction',
'public const BOOK_ACTION': 'BookAction'
});
</pre>
[size=4]状态机[/size]
<pre class="brush:js; toolbar: true; auto-links: false;">
var SceneFsm = GeneJS.Class({
'public createFsm': function() {
var fsm = {
// 开始状态
"@initial": SceneState.('MENU_MEDIATOR'),
        "state": [
            {
                // Menu
                "@name": SceneState.('MENU_MEDIATOR'),
//"@changed": SceneTransition ,
"transition": [
{
"@action": SceneAction.('HELLO_ACTION'),
                        "@target": SceneState.('HELLO_MEDIATOR')
},
{
"@action": SceneAction.('GAME_ACTION'),
                        "@target": SceneState.('GAME_MEDIATOR')
},
{
"@action": SceneAction.('DRAW_ACTION'),
                        "@target": SceneState.('DRAW_MEDIATOR')
},
{
"@action": SceneAction.('BOOK_ACTION'),
                        "@target": SceneState.('BOOK_MEDIATOR')
}
]
},
{
// Hello
"@name": SceneState.('HELLO_MEDIATOR'),
                //"@changed": SceneTransition ,
                "transition": [
                    {
                        "@action": SceneAction.('HOME_ACTION'),
"@target": SceneState.('MENU_MEDIATOR')
                    }
                ]
            },
            {
                // Game
                "@name": SceneState.('GAME_MEDIATOR'),
//"@changed": SceneTransition ,
"transition": [
{
"@action": SceneAction.('GAME_OVER_ACTION'),
                        "@target": SceneState.('GAME_OVER_MEDIATOR')
}
]
},
{
// GameOver
"@name": SceneState.('GAME_OVER_MEDIATOR'),
                //"@changed": SceneTransition ,
                "transition": [
                    {
                        "@action": SceneAction.('HOME_ACTION'),
"@target": SceneState.('MENU_MEDIATOR')
                    }
                ]
            },
            {
                // Draw
                "@name": SceneState.('DRAW_MEDIATOR'),
//"@changed": SceneTransition ,
"transition": [
{
"@action": SceneAction.('HOME_ACTION'),
                        "@target": SceneState.('MENU_MEDIATOR')
}
]
},
{
// Book
"@name": SceneState.('BOOK_MEDIATOR'),
                //"@changed": SceneTransition ,
                "transition": [
                    {
                        "@action": SceneAction.('HOME_ACTION'),
"@target": SceneState.$('MENU_MEDIATOR')
}
]
}
]
};
return fsm;
}
});
</pre>
[size=5]状态机初始化[/size]
PureMVC框架提供了FSM实现。
[size=4]定义InjectFSMCommand[/size]
<pre class="brush:js; toolbar: true; auto-links: false;">
module.exports = puremvc.define
(
// CLASS INFO
{
name: 'controller.command.InjectFSMCommand',
parent:puremvc.SimpleCommand
},
// INSTANCE MEMBERS
{
/** @override */
execute: function (notification)
{
cc.log('InjectFSMCommand execute');
var sceneFsm = new SceneFsm();
var fsm = sceneFsm.createFsm();
var injector = new puremvc.statemachine.FSMInjector(fsm);
injector.initializeNotifier(this.multitonKey);
injector.inject();
}
},
// STATIC MEMBERS
{
NAME: 'PrepControllerCommand'
}
);
</pre>
[size=4]StartupCommand调用InjectFSMCommand[/size]
<pre class="brush:js; toolbar: true; auto-links: false;">
module.exports = puremvc.define
(
// CLASS INFO
{
name: 'controller.command.StartupCommand',
parent:puremvc.MacroCommand
},
// INSTANCE MEMBERS
{
/** @override */
initializeMacroCommand: function (notification)
{
this.addSubCommand(PrepModelCommand);
this.addSubCommand(PrepViewCommand);
this.addSubCommand(PrepControllerCommand);
this.addSubCommand(InjectFSMCommand );
}
},
// STATIC MEMBERS
{
NAME: 'StartupCommand'
}
);
</pre>
[size=4]AppMediator监听StateMachine Notification[/size]
<pre class="brush:js; toolbar: true; auto-links: false;">
module.exports = puremvc.define
(
// CLASS INFO
{
name: 'view.mediator.AppMediator',
parent: puremvc.Mediator,
constructor: function() {
puremvc.Mediator.call(this, this.constructor.NAME);
}
},
// INSTANCE MEMBERS
{
/** @override */
listNotificationInterests: function () {
return [
puremvc.statemachine.StateMachine.CHANGED
];
},
/** @override */
handleNotification: function (notification) {
switch (notification.getName()) {
case puremvc.statemachine.StateMachine.CHANGED:
alert(notification.getBody().name);
break;
}
},
/** @override */
onRegister: function () {
},
/** @override */
onRemove: function () {
}
},
// STATIC MEMBERS
{
NAME: 'AppMediator'
}
);
</pre>
[size=5]
源代码[/size]
[list][li]本文代码：https://github.com/guyoung/GeneCocosMVC/tree/master/MVCHelloWorld-Part04[/li][li]项目地址：https://github.com/guyoung/GeneCocosMVC[/li][/list][size=4]
编译及运行[/size]
browserify
<pre class="brush:shell; toolbar: true; auto-links: false;">
browserify MVCHelloWorld-Part04\js\app.js -o MVCHelloWorld-Part04\js\app-all.js
</pre>
or
<pre class="brush:shell; toolbar: true; auto-links: false;">
browserify MVCHelloWorld-Part04\js\app.js -o MVCHelloWorld-Part04\js\app-all.js --debug
</pre>
uglifyjs
<pre class="brush:shell; toolbar: true; auto-links: false;">
uglifyjs MVCHelloWorld-Part04\js\app-all.js -o MVCHelloWorld-Part04\js\app-all.js
</pre>
http-server
<pre class="brush:shell; toolbar: true; auto-links: false;">
node_modules.bin\http-server.cmd
</pre>[size=5]
[/size]
[hr]https://github.com/guyoung/GeneCocosMVC
By Guyoung Studio
http://www.guyoung.net
![[attachment=80494]](https://github.com/guyoung/GeneCocosMVC/blob/master/images/010.png){kind=link}