拼图

代码库有三个例子，第三个是

var Puzzle=function(options){
    mission=0;
    if(options.imgPro)puzzleImgPro = options.imgPro;
    puzzle_difficultyX = puzzleImgPro[0].w;
    puzzle_difficultyY = puzzleImgPro[0].h; 
    puzzle_hover_tint = '#009900';
    imgPath = '';
    _stage =null ;
    _canvas =null;
    _img =null;
    _pieces =null;
    puzzleWidth=0;
    puzzleHeight=0;
    pieceWidth=0;
    pieceHeight=0;
    mainWidth=$(window).get(0).innerWidth;
    mainHeight=$(window).get(0).innerHeight;
    mainScale=mainWidth/750;
    currentPiece=null;
    currentDropPiece=null;  
    _mouse=null;
    SUPPORTS_TOUCH = null;
    START_EV = null;
     that = this;
    stauts="new";
    imgPath = puzzleImgPro[0].path;
     if(options.puzzle_hover_tint)puzzle_hover_tint = options.puzzle_hover_tint;
    timer=0;
    tindex=0;
    tstrme="";
}

Puzzle.prototype = {

    init:function(){
       _img = new Image();
       _img.addEventListener('load',this.onImage,false); 
       _img.src =imgPath;
       
       $("#canvas").css({
          "position":"absolute"
       });
       $("#game .gameOn").css({
          "position":"absolute"
       }).hide();
       $("#game .gameOff").css({
          "position":"absolute"
       }).hide();
       $("#game .bg").css({
          "width":mainWidth,
          "height":mainScale*1334,
          "position":"absolute"
       });
       $("#game .bg").attr({
          "src":"img/start.jpg"
       });
       $("#game .gameOn p").css({'font-size':45*mainScale, 'width':225*mainScale, 'margin-top':200*mainScale});
       $("#game .shijian").css({'margin-left':300*mainScale});
        $("#game .gameOff p").css({ 'margin-top':580*mainScale, 'width':mainWidth, 'font-size':58*mainScale});
       $("#game").click(function(){
           switch(stauts){
               case "new":
                       mission++;
                    if(mission<=puzzleImgPro.length){
                           that.setCanvas();
                           that.gamestartcall();
                    }
                  break;
              case "gameOver":
                  mission++;
                  if(mission<=puzzleImgPro.length){
                      $("#canvas").show();
                      that.gamestartcall();
                  }else{
                    alert("gameover");  
                  }
                  break;
           };
       });
    },
    gamestartcall:function(){
        stauts="gameStart";
        timer=setInterval(that.timeread, 1000)
            var _str=mission;
            if(mission<10){
                _str="0"+_str;
            }
            $("#game .guanka").text("关卡："+_str);
            $("#game .shijian").text("00"+" : "+"00");
            $("#game .gameOff").hide();
            $("#game .gameOn").show();
            that.initPuzzle();
            $("#game .bg").attr({
               "src":"img/bg.jpg"
            });
        
    },
    timeread:function(){
        tindex++;
        //console.log(tindex);
        var time=tindex;
        var minute = 0;
            var second =0;
            if(time >=60){
                minute = parseInt(time / 60);
                time = parseFloat(time % 60);
            }
            second = time;
            if(minute <10){
              minute ='0'+minute;
            }else{
              minute=minute+''
            }
            if(second <10){
              second ='0'+second;
            }else{
              second=second+''
            }
            //console.log(minute+" : "+second);
            tstrme=minute+" : "+second;
            $("#game .shijian").text(tstrme);
    },
    onImage:function(e)
    {
        SUPPORTS_TOUCH = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch;
        START_EV = (SUPPORTS_TOUCH) ? "touchstart" : "mousedown";
        MOVE_EV = (SUPPORTS_TOUCH) ? "touchmove" : "mousemove";
        END_EV =  (SUPPORTS_TOUCH) ? "touchend" : "mouseup";
          pieceWidth = Math.floor(_img.width / puzzle_difficultyX);
        pieceHeight = Math.floor(_img.height / puzzle_difficultyY);
        puzzleWidth = pieceWidth * puzzle_difficultyX;
        puzzleHeight = pieceHeight * puzzle_difficultyY;
        
         /*that.setCanvas();
        that.initPuzzle();*/
    },

       setCanvas:function(){
        _canvas = document.getElementById('canvas');
        _stage = _canvas.getContext('2d');
        _canvas.width = puzzleWidth;
        _canvas.height =puzzleHeight;
        _canvas.style.border = "1px solid black";
        
        $("#canvas").css({
            'marginLeft':mainWidth/2-350,
            'marginTop':(mainHeight-362*mainScale)/2-puzzleHeight/2+362*mainScale
        })
    },
    initPuzzle:function(){
        _pieces = [];
        _mouse = {x:0,y:0};
        currentPiece = null;
        currentDropPiece = null; 
        _stage.drawImage(_img, 0, 0, puzzleWidth, puzzleHeight);
        that.createTitle("Click to Start Puzzle");
        that.buildPieces();
    },
    createTitle:function(msg){
        _stage.fillStyle = "#000000";
        _stage.globalAlpha = .4;
        //_stage.fillRect(100,puzzleHeight - 40,puzzleWidth - 200,40);
        _stage.fillStyle = "#FFFFFF";
        _stage.globalAlpha = 1;
        //_stage.textAlign = "center";
        //_stage.textBaseline = "middle";
        //_stage.font = "20px Arial";
        //_stage.fillText(msg,puzzleWidth / 2,puzzleHeight - 20);
    },
    buildPieces:function(){
        var i;
        var piece;
        var xPos = 0;
        var yPos = 0;
        for(i = 0;i < puzzle_difficultyX * puzzle_difficultyY;i++){
            piece = {};
            piece.sx = xPos;
            piece.sy = yPos;
            _pieces.push(piece);
            xPos += pieceWidth;
            if(xPos >= puzzleWidth){
                xPos = 0;
                yPos += pieceHeight;
            }
        }
        that.shufflePuzzle();
    },
    shufflePuzzle:function(){
        _pieces = that.shuffleArray(_pieces);
        _stage.clearRect(0,0,puzzleWidth,puzzleHeight);
        var i;
        var piece;
        var xPos = 0;
        var yPos = 0;
        for(i = 0;i < _pieces.length;i++){
            piece = _pieces[i];
            piece.xPos = xPos;
            piece.yPos = yPos;
            _stage.drawImage(_img, piece.sx, piece.sy, pieceWidth, pieceHeight, xPos, yPos, pieceWidth, pieceHeight);
            _stage.strokeRect(xPos, yPos, pieceWidth,pieceHeight);
            xPos += pieceWidth;
            if(xPos >= puzzleWidth){
                xPos = 0;
                yPos += pieceHeight;
            }
        }

        
         _canvas.addEventListener(START_EV,that.onPuzzleClick);
     
      //  document.onmousedown = that.onPuzzleClick;
    },

    onPuzzleClick:function (e){

           var point = that.getMousePoint(e);
        var layerX = point.x;
        var layerY = point.y;
        
      
        if( layerX ||  layerX == 0){
             
            _mouse.x =  layerX - _canvas.offsetLeft;
            _mouse.y = layerY - _canvas.offsetTop;
        }
       
        currentPiece = that.checkPieceClicked();
 
        if(currentPiece != null){

            _stage.clearRect(currentPiece.xPos,currentPiece.yPos,pieceWidth,pieceHeight);
            _stage.save();
            _stage.globalAlpha = .9;
            _stage.drawImage(_img, currentPiece.sx, currentPiece.sy, pieceWidth, pieceHeight, _mouse.x - (pieceWidth / 2), _mouse.y - (pieceHeight / 2), pieceWidth, pieceHeight);
            _stage.restore();
         
               _canvas.addEventListener(MOVE_EV,that.updatePuzzle);
               _canvas.addEventListener(END_EV,that.pieceDropped);
          
        }
    },

    checkPieceClicked:function(){
        var i;
        var piece;
        for(i = 0;i < _pieces.length;i++){
            piece = _pieces[i];
            if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + pieceHeight)){
               
            }
            else{
                return piece;
            }
        }
        return null;
    },
    getMousePoint:function(e)
    {
        var x,y
        if(SUPPORTS_TOUCH)
        {
            if(e.touches.length>1)return
             var evt = e.touches[0];
             x = evt.clientX;
             y = evt.clientY;
        }else
        {
            x = e.layerX;
            y = e.layerY;
        }

        var point = {};
        point.x = x;
        point.y = y;
        return point;
    },

    updatePuzzle:function(e){
         
        currentDropPiece = null;
        var point = that.getMousePoint(e);
        var layerX = point.x;
        var layerY = point.y;
        
       
        if(layerX ||  layerX == 0){
            _mouse.x =  layerX - _canvas.offsetLeft;
            _mouse.y =  layerY - _canvas.offsetTop;
        }
  
        _stage.clearRect(0,0,puzzleWidth,puzzleHeight);
        var i;
        var piece;
        for(i = 0;i < _pieces.length;i++){
            piece = _pieces[i];
            if(piece == currentPiece){
                continue;
            }
            _stage.drawImage(_img, piece.sx, piece.sy, pieceWidth, pieceHeight, piece.xPos, piece.yPos, pieceWidth, pieceHeight);
            _stage.strokeRect(piece.xPos, piece.yPos, pieceWidth,pieceHeight);
            if(currentDropPiece == null){
                if(_mouse.x < piece.xPos || _mouse.x > (piece.xPos + pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + pieceHeight)){
          
                }
                else{
                    currentDropPiece = piece;
                    _stage.save();
                    _stage.globalAlpha = .4;
                    _stage.fillStyle = puzzle_hover_tint;
                    _stage.fillRect(currentDropPiece.xPos,currentDropPiece.yPos,pieceWidth, pieceHeight);
                    _stage.restore();
                }
            }
        }
        _stage.save();
        _stage.globalAlpha = .6;
        _stage.drawImage(_img, currentPiece.sx, currentPiece.sy, pieceWidth, pieceHeight, _mouse.x - (pieceWidth / 2), _mouse.y - (pieceHeight / 2), pieceWidth, pieceHeight);
        _stage.restore();
        _stage.strokeRect( _mouse.x - (pieceWidth / 2), _mouse.y - (pieceHeight / 2), pieceWidth,pieceHeight);
    },

    pieceDropped:function(e){
        _canvas.removeEventListener(MOVE_EV,that.updatePuzzle);
            _canvas.removeEventListener(END_EV,that.pieceDropped);
        if(currentDropPiece != null){
            var tmp = {xPos:currentPiece.xPos,yPos:currentPiece.yPos};
            currentPiece.xPos = currentDropPiece.xPos;
            currentPiece.yPos = currentDropPiece.yPos;
            currentDropPiece.xPos = tmp.xPos;
            currentDropPiece.yPos = tmp.yPos;
        }
        that.resetPuzzleAndCheckWin();
    },

    resetPuzzleAndCheckWin:function(){

        _stage.clearRect(0,0,puzzleWidth,puzzleHeight);
        var gameWin = true;
        var i;
        var piece;
        for(i = 0;i < _pieces.length;i++){
            piece = _pieces[i];
            _stage.drawImage(_img, piece.sx, piece.sy, pieceWidth, pieceHeight, piece.xPos, piece.yPos, pieceWidth, pieceHeight);
            _stage.strokeRect(piece.xPos, piece.yPos, pieceWidth,pieceHeight);
            if(piece.xPos != piece.sx || piece.yPos != piece.sy){
                gameWin = false;
            }
        }
        if(gameWin){
            setTimeout(that.gameOver,300);
        }
    },

    gameOver:function(){
        _canvas.removeEventListener(START_EV,that.onPuzzleClick);
        _canvas.removeEventListener(MOVE_EV,that.updatePuzzle);
            _canvas.removeEventListener(END_EV,that.pieceDropped);
            //alert('游戏结束')
        $("#canvas").hide();
        $("#game .bg").attr({
            "src":"img/bg2.jpg"
        });
        $("#game .gameOn").hide();
        $("#game .gameOff").show();
        $("#game .yongshi").text(tstrme);
        stauts="gameOver";
        tindex=0;
        window.clearInterval(timer);
    },

    shuffleArray:function(o){
        for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    }



}

 其他两个都用createjs，除了一些倒计时啊画面的入场出场以外，movieclip和算法都在这里：

(function($) {
    $.factory_puzzle = function() {
        var $factory = {};
        $factory.createPuzzle = function(obj) {
            var _pdtObj = {};
            var data = {
                images: [obj.img.src],
                frames: {  obj.img.width, height: obj.img.height, regX: 0, regY: 0 },
                animations: {}
            };
            data.images.crossOrigin = 'Anonymous';
            var spriteSheet = new createjs.SpriteSheet(data);
            var shape = new createjs.Shape();
            shape.graphics.beginFill("#fff").drawRect(0, 0, obj.img.width, obj.img.height);
            sprite = new createjs.Sprite(spriteSheet, "puzzle");
            var puzzleCon = new createjs.Container();
            puzzleCon.addChild(sprite);
            puzzleCon.addChild(shape);
            //创建具体拼图
            var imgPieces = [],
                selectBool = true, //单个移动开关
                moveSwitch = true, //整体事件大开关
                bitmap = new createjs.Bitmap(obj.img.src),
                range = [],
                imgId = 0,
                pWidth = obj.img.width,
                pHeight = obj.img.height,
                row = obj.widthCut,
                col = obj.heightCut,
                width = pWidth / row,
                height = pHeight / col;
            for (var o = 0; o < row; o++) { //竖向切
                for (var i = 0; i < col; i++) { //横向切
                    var clone = bitmap.clone();
                    var rect = new createjs.Rectangle(width * i, height * o, width, height);
                    clone.alpha = 0;
                    clone.sourceRect = rect;
                    range.push({ x: (width) * i, y: (height) * o });
                    imgPieces.push({ obj: clone, id: imgId++ });
                }
            }
            //重新排列x，y数据
            imgPieces.sort(function() {
                return 0.5 - Math.random();
            });
            for (var j = 0; j < range.length; j++) {
                imgPieces[j].x = range[j].x;
                imgPieces[j].y = range[j].y;
                createjs.Tween.get(imgPieces[j].obj).to({ alpha: 1, x: range[j].x, y: range[j].y }, 400, createjs.Ease.bounceOut);
            }
            for (var k = 0; k < imgPieces.length; k++) {
                puzzleCon.addChild(imgPieces[k].obj);
                moveImages({ obj: imgPieces[k].obj, id: imgPieces[k].id }); //绑定移动图片事件
            }

            //移动拼图
            function moveImages(parameter) {
                if (!parameter.obj) return false;
                //按下事件
                parameter.obj.addEventListener("mousedown", function(event) {
                    if (!selectBool) return false;
                    var _self = event.target;

                    selectBool = false; //点击的时候开启移动模式
                    puzzleCon.setChildIndex(_self, puzzleCon.numChildren - 1); //点击的时候设置当前图片的层级为最高

                    //记录点击时候的起始位置
                    sx = event.stageX; //鼠标x点触发的位置
                    sy = event.stageY; //鼠标y点触发的位置
                    ox = _self.x; //记录原始位置
                    oy = _self.y; //记录原始位置
                    fzmx = event.stageX - event.target.x;
                    fzmy = event.stageY - event.target.y;

                    //绑定事件
                    event.target.addEventListener('pressup', pressUp);
                    event.target.addEventListener('pressmove', pressMove, false);
                });
            }

            //松开事件
            function pressUp(event) {
                var _self = event.target,
                    xSpace = Math.floor(pWidth / col / 2) - 10,
                    ySpace = Math.floor(pHeight / row / 2) - 10;
                shadowUr(_self, false); //关闭阴影

                //当位移大于键值的时候交换顺序
                var exIndex = 0,
                    flag = null;
                for (var i = 0; i < imgPieces.length; i++) {
                    for (var j = 0; j < imgPieces.length; j++) {
                        if (_self == imgPieces[j].obj) {
                            exIndex = j;
                            exX = imgPieces[j].x;
                            exY = imgPieces[j].y;
                        }
                    }
                    if (_self.id !== imgPieces[i].obj.id) {
                        var objX = imgPieces[i].x,
                            objY = imgPieces[i].y;
                        if (Math.abs(objX - _self.x) < xSpace && Math.abs(objY - _self.y) < ySpace) {
                            flag = { oldIndex: exIndex, newIndex: i, x: Math.abs(objX - exX), y: Math.abs(objY - exY) };
                            break;
                        } else {
                            flag = { oldIndex: exIndex, newIndex: exIndex, x: Math.abs(objX - exX), y: Math.abs(objY - exY) };
                        }
                    }
                }
                //实行交换
                exchange(flag);

                //松开之后解除绑定事件
                event.target.removeEventListener('pressup', pressUp);
                event.target.removeEventListener('pressmove', pressMove);
            }

            //拖动图片
            function pressMove(event) {
                if (!moveSwitch) return false;
                var _self = event.target;
                //移动的时候加上阴影
                shadowUr(_self, true);
                //x轴方向
                if (event.stageX - fzmx < 0) {
                    _self.x = 0;
                } else if (event.stageX - fzmx + _self.getBounds().width > pWidth) {
                    _self.x = pWidth - _self.getBounds().width;
                } else {
                    _self.x = event.stageX - fzmx;
                }

                //y轴移动方向
                if (event.stageY - fzmy < 0) {
                    _self.y = 0;
                } else if (event.stageY - fzmy + _self.getBounds().height > pHeight) {
                    _self.y = pHeight - _self.getBounds().height;
                } else {
                    _self.y = event.stageY - fzmy;
                }
            }

            //交换顺序
            function exchange(obj) {
                //这边阐述了变量和对象之间的区别，变量赋值之后不会随着赋值点而改变，但是对象会！！！
                var oldObj = imgPieces[obj.oldIndex];
                var newObj = imgPieces[obj.newIndex];
                var x = oldObj.x,
                    y = oldObj.y,
                    _x = newObj.x,
                    _y = newObj.y;
                imgPieces.splice(obj.oldIndex, 1, newObj);
                imgPieces.splice(obj.newIndex, 1, oldObj);
                tween({ el: imgPieces[obj.oldIndex].obj, x: imgPieces[obj.newIndex].x, y: imgPieces[obj.newIndex].y });
                tween({ el: imgPieces[obj.newIndex].obj, x: imgPieces[obj.oldIndex].x, y: imgPieces[obj.oldIndex].y });
                imgPieces[obj.oldIndex].x = x;
                imgPieces[obj.oldIndex].y = y;
                imgPieces[obj.newIndex].x = _x;
                imgPieces[obj.newIndex].y = _y;

                //每次调换之后检测是否拼正确了,然后判断是否去下一页
                var pass = checkPass();
                if (pass) {
                    complete();
                }
            }

            function tween(parameter) {
                if (!parameter.el) return false;
                var _self = parameter.el,
                    _selfX = parameter.x || 0,
                    _selfY = parameter.y || 0;
                createjs.Tween.get(_self).to({ x: _selfX, y: _selfY }, 300).call(function() {
                    selectBool = true; //关闭拖动开关 
                });
            }

            function shadowUr(el, bool) {
                if (bool) {
                    el.shadow = new createjs.Shadow("rgba(0, 0, 0, .5)", 0, 0, 20);
                } else {
                    el.shadow = null;
                }
            }

            function checkPass() {
                var pass = true;
                for (var i = 0; i < imgPieces.length; i++) {
                    if (i !== imgPieces[i].id) {
                        pass = false;
                        break;
                    } else {
                        pass = true;
                    }
                }
                return pass;
            }

            function complete() {
                obj.callback();
            }
            _pdtObj.mc = puzzleCon;
            _pdtObj.moveImages = moveImages;
            _pdtObj.pressUp = pressUp;
            _pdtObj.pressMove = pressMove;
            _pdtObj.exchange = exchange;
            _pdtObj.tween = tween;
            _pdtObj.shadowUr = shadowUr;
            _pdtObj.checkPass = checkPass;
            _pdtObj.complete = complete;
            return _pdtObj;
        };
        return $factory;
    };
})(jQuery);

data:

{x:(759-320)/2, y:(1334-348)/4, ox:0, order:"createPuzzle", img:{src:"images/puzzle.jpg",320,height:348},widthCut:3,heightCut:3,callback:function(){alert(1)}}

纯粹的movieclip（mc）通常只会用到最基础的EASELJS

 

下面看看整个游戏的逻辑：

/images
/style
/js
    /data
　　　　data.js
    common.js
    controller.js
    main.js
    pageManager.js
index.html

common.js 加载进度条、素材、创建舞台、监听窗口resize。

controller.js 封装了各种出场入场的方式，比如easeIn、rotate、scale等等，作createjs.Tween动画，

也是creagejs的精华TWEENJS

 

处理timer，响应viewport，集成createjs各种组件的构造，比如Sprite，Shape，ShapeFill、Bitmap，Container，DOMElement

main.js 核心的部分，游戏的算法，内部逻辑。

pageManager 根据每个画面的生命周期处理跳转路由。

一开始就需要配置好data.js中的数据，否则各种load失败报错都是很难懂的（比如getContext失败，type错误）

Data=(function(){
    var $data={};
    //素材根路径
    $data.file="images/";
    //拼图宽度配置
    $data.puzzle=[{686,height:746,thuTime:5,gameTime:30,base:0.5}];
    //页面所用到的素材
    $data.loading=[{src:"loading_img.png",id:"loading"}];
    $data.material=[
        {src:"logo.png",id:"logo"},
        {src:"puzzle01.jpg",id:"puzzle01"},{src:"puzzle02.jpg",id:"puzzle02"},{src:"puzzle03.jpg",id:"puzzle03"},{src:"puzzle04.jpg",id:"puzzle04"},
        {src:"puzzle/puzzle01.jpg",id:"Bpuzzle01"},{src:"puzzle/puzzle02.jpg",id:"Bpuzzle02"},{src:"puzzle/puzzle03.jpg",id:"Bpuzzle03"},{src:"puzzle/puzzle04.jpg",id:"Bpuzzle04"},
        {src:"bg_puzzle.png",id:"bg_puzzle"},{src:"bg_yellow.jpg",id:"bg_yellow"},
        {src:"bottom_puzzle.png",id:"bottom_puzzle"},
        {src:"static.png",id:"static"},
        {src:"button.png",id:"button"},
        {src:"popup/rulesText.png",id:"rulesText"},{src:"popup/arrow.png",id:"arrow"},{src:"popup/share_text.png",id:"share_text"},
        {src:"bg.mp3",id:"bgSound"}
    ];
    //初始化素材数据
    $data.static={
        id:"static",
        point:
            [{x:0,y:0,oY:-100,delayIn:0},
            {x:73,y:228,oY:-100,delayIn:300,easeIn:createjs.Ease.bounceOut},
            {x:50,y:23,oY:-100,delayIn:0,easeIn:createjs.Ease.bounceOut},
            {x:677,y:30,oY:-100,delayIn:100},
            {x:677,y:30,oY:0,delayIn:0},
            {x:240,y:195,oY:0,delayIn:500},
            {x:50,y:194,oY:-100,delayIn:0},
            {x:319,y:162,oY:-100,delayIn:500},
            {x:276,y:64,oY:0,delayIn:0},
            {x:51,y:118,oY:0,delayIn:0},
            {x:154,y:220,oY:0,delayIn:0},
            {x:191,y:162,oY:0,delayIn:0},
            {x:191,y:162,oY:0,delayIn:0}],
        frames:[
            [0,277,750,263],[0,0,595,274],[626,0,125,59],[626,82,45,45],[690,82,45,45],[0,560,271,38],[0,608,502,37],[310,560,113,37],[443,560,128,30],[0,669,598,57],[0,746,373,357],[443,746,304,67],[443,826,304,67]
        ],
        animations:{bg_entrance:0,slogan:1,logo:2,openMusic:3,closeMusic:4,text_choseTit:5,text_countdown:6,text_count:7,text_instruc:8,text_introd:9,img_instruc:10,text_success:11,text_fail:12}
    };
    $data.button={
        id:"button",
        point:
            [{x:175,y:575,oX:-100,delayIn:500},
            {x:175,y:683,oX:850,delayIn:600},
            {x:175,y:1050,oY:1334+100,delayIn:1500},
            {x:182,y:616,oY:0,delayIn:0},
            {x:144,y:356,oY:0,delayIn:0},
            {x:144,y:463,oY:0,delayIn:0},
            {x:255,y:62,oY:-100,delayIn:500}],
        frames:[
            [0,0,400,85],[0,95,400,95],[0,190,400,85],[40,552,320,85],[0,285,400,85],[0,380,400,85],[80,475,240,67]
        ],
        animations:{startGame:0,viewPrizes:1,nextGame:2,beginGame:3,btnInvite:4,btnView:5,backGame:6}
    };
    return $data;
})();

比如上面$data.material = [ ...{...}...,{src:"static.png",id:"static"},...]这个数据是在

$sheet.init 方法里面调用Loader.getResult(option.data.id)的时候要读取的，

说到这个Loader在本例中等于：new createjs.LoadQueue(false);

属于 PRELOADJS 的功能

PreloadJS是一个用来管理和协调相关资源加载的类库，它可以方便的帮助你预先加载相关资源。

LoadQueue类介绍

• 预加载音频文件

//初始化插件
preload.installPlugin(createjs.Sound);

• 设置加载路径

preload = new createjs.LoadQueue(true, "../_assets/art/");

• 获取预加载资源

preload.getResult(‘id’);

installPlugin, getResult这些都是极常用的方法，进度条可以通过fileload和complete来实现。

背景音乐mp3的控制就要用到 SOUNDJS

一个音频播放引擎，能够根据浏览器性能选择音频播放方式。将音频文件作为模块，可随时加载和卸载。

继续回到使用controller加载素材产出sheet

this.movieClip = $common.Control.create("sheet", 
{ framerate: 30, images: [Loader.getResult(option.data.id)],
 frames: option.data.frames, animations: option.data.animations });

此处根据material数组的长度进行遍历，想要加载什么素材只要增加数组元素,

此处的option.data就是$data.material数组第index个元素static

create方法会走到createjs框架内部：

b._parseData = function(a) {
        var b, c, d, e;
        if (null != a) {
            if (this.framerate = a.framerate || 0,
            a.images && (c = a.images.length) > 0)
                for (e = this._images = [],
                b = 0; c > b; b++) {
                    var f = a.images[b];
                    if ("string" == typeof f) {
                        var g = f;
                        f = document.createElement("img"),
                        f.src = g
                    }
                    e.push(f),

如果找不到id为static的sprite png图片，a.images数组的第0个元素会显示为null，否则会是img

而那些point记录的都是每个元素在画面中的位置，

x是横坐标，y是纵坐标，oY是做动画之前的位置，delayIn是延迟进场时间。

 入口：

$(function(){$common = new $.createNew(); $common.methods.init();});

在init中首先会加载进度条，将它放入舞台后下一步就是$common.methods.loadMain();

LoadMain()会执行$common.methods.loadFile({... 首先用controller加载背景图片。

进度条是靠读取Data(dev数据或者后台的真实数据)来显示进度，

//进度加载完成后利用controller中的$common.Control.ani.hideAlpha方法清除loading还stage一个清白
myStage.removeChild(myLoading.movieClip);
//初始化完成,进入pageManager
$common.Page.methods.init(myStage);
//初始化弹层
$common.PopupClass=new $.popup({stage:myStage});

在pageManager中，就可以为所欲为了。

 $.pageManager = function() {
        var $page = {};
        var curPage, tarPage;
        var pageArr = [

在pageArr里定义的每一个画面的生命周期函数。

上面都是一些准备工作，写在init属性中（数组中一个元素对象的一个属性，它被定义成一个函数）中，加载这些addChild, this.childArr.push()

this.childArr.push(new $.pageManager().sheet({ data: Data.button, frame: "startGame" }));

进入画面后要做什么事，就应该写在checkIn里面，此处会获取到 this.childObj.startGame.movieClip 对象

this.childObj.startGame.movieClip.addEventListener("click", function(evt) {
                        //点击”开始挑战“按钮
                        $common.dev.getNum(function(data){ //判断还有几次机会
                            if(data.num>=1) JumpToLocal(1);
                        });
                        evt.remove();
                    });

这个startGame就是上面init的frame名称，直接获取它的movieClip绑定事件。

remove

Defined in remove:217

Causes the active listener to be removed via removeEventListener();

    myBtn.addEventListener("click", function(evt) {
        // do stuff...
        evt.remove(); // removes this listener.
    });

及时删除已经响应的事件。

本例中有一个接口，用来模拟服务器传来的剩余游戏机会：

        $createNew.dev={
            //获取玩游戏次数
            getNum:function(callback){
                try{getNum(callback);}catch(e){callback({num:Math.ceil(Math.random()*2)});};
            }
        };

如果后端重写getNum方法，就会执行它传来的callback，否则就走catch中的假数据。

记得在checkOut中清除本画面，否则进入了下一个画面也看不出什么区别。。

checkOut有一个回调函数_intoBack，每次都在最后执行它，或者判断if(_intoBack)_intoBack()

//此处问了大大，说这个_intoBack没啥用，从前是为了在调用checkOut的时候让它执行自己，现在他写新框架中已被废弃。

这些生命周期函数也纯粹是通过数组的遍历来实现的，完全取决于pageArr的结构：

$page.methods = {
            init: function(_stage) {
                //生成页面容器
                if (pageArr.length > 0) {
                    for (var i = 0; i < pageArr.length; i++) {
                        pageArr[i].container = $common.Control.create("container");
                        pageArr[i].childArr = [];
                        pageArr[i].childObj = {};
                        pageArr[i].container.visible = false;
                        pageArr[i].init();
                        AddChildPage(pageArr[i]);
                        _stage.addChild(pageArr[i].container);
                    }
                }

是pageMaker的精髓所在，所以