easeljs web开发围住神经小猫咪【三】

收尾  加入游戏开始结束页面

我记得游戏中有开始界面也有结束界面的，而且结束界面有赢得还有输的，赢了还会显示步数是多少。

那好吧   我在main.js中加入了一个

//流程控制
function startGame(){

	开始游戏画面，一点就进入游戏场景
}
function enterGame(){
	

	游戏运行画面，这里把StartGame里面的开始图片remove掉然后夹杂游戏场景，加入小猫和circle
}
function gameOver(win){

    游戏结束有两种（赢和输），所以这里存入一个参数，假定true就是赢，false就是输，加载不同类型的动画。

}
function resetGame(){
    

	游戏重新开始，就是输了或赢了再点一次就会出现的结果喽。。这里面要清空所有的东西，然后调用StartGame函数

}

这个流程控制很清明了，但不是有一点问题是，在游戏里面，我的每一步都是通过mousedown来控制的，而流程控制里重新开始还有start进enter也是要掉哟个mousedown的哦，所以这里设置状态变量

var gameState;
var STATE={
    START:0,
    PLAY:1,
    END:2
};

如果状态是start，那么我点击响应的就只能是startgame的内容喽，等等，这样就去分开了。

另外：

var step;这是干啥的呢？这是在赢了游戏在之后要打印出来的用了多少步。

代码：

//流程控制
function startGame(){
    gameState=STATE.START;
    //添加开始游戏界面
    var images=new createjs.Bitmap("res/btn_start.png");
    stage.addChild(images);
    images.x=GridOffsetX;
    images.y=GridOffsetY-100;
    images.name="start";

}
function enterGame(){
    stage.removeChild(stage.getChildByName("start"));
    gameState=STATE.PLAY;
    step=0;

    createMap();
    createCat();
}
function gameOver(win){

    //结束游戏画面
    var pic;
    var text;
    if(win){
        pic="res/victory.png";
        text=new createjs.Text("你用了"+step+"步哦","20px Arial","#000000");
    }
    else{
        pic="res/failed.png";
        text=new createjs.Text("zhangyugege比你强哦","20px Arial","#000000");
    }
    var image=new createjs.Bitmap(pic);
    stage.addChild(image);
    image.y=200;

    text.x=100;
    text.y=400;
    stage.addChild(text);
    gameState=STATE.END;
}
function resetGame(){
    //清空当前场景。。。
    stage.removeAllChildren();
    enterGame();
}

最后对于main.js关于easeljs的一些东西，我罗列一下：

window.οnlοad=function() {
    stage=new createjs.Stage("myCanvas");

    createjs.Ticker.timingMode=createjs.Ticker.RAF_SYNCHED;   
    createjs.Ticker.addEventListener("tick",handleTick);    加入事件监听
    createjs.Ticker.framerate=30;                         帧率，30就够了，不是很激烈的游戏

    canvas=document.getElementById ("myCanvas");          这是把场景作用在canvas上面，与html的canvas形成了关系
    canvas.addEventListener("mousedown",handleMouseDown);  加入鼠标响应事件，它也是随帧率刷新的，相当于一个定时器
    startGame();                                      			把游戏开始第一个调用的函数搞到这里来。

										 这里面这些都easeljs必写的东西

} function handleMouseDown(event) { 这个函数与cocos2d框架的区别的这个可以与touch函数互通，在手机端触摸也是可以的，而cocos2d的mousedown不能做touch的事情。} function handleTick(event){ stage.update(event); 在这里相当于cocos2d框架下的update函数把，让游戏动起来的根本原因就是不断的刷新场景}

byebye