消除类游戏棋盘画布的实现 create.js

最近在做一款消消乐游戏，总结如下：

1.create.js介绍

createjs是一个轻量级的框架，稍微有点时间和耐心，就可以把全部源代码都看一遍，毕竟只有三十几个js文件。地址：www.createjs.com/

createjs由几个库组成：

l easeljs，这个是核心，包括了显示列表、事件机制；

l preloadjs，用于预加载图片等；

l tweenjs，用于控制元件的缓动；

l soundjs，用于播放声音；

2.画布的生成

画布主要是一个二维数组实现：

_aGrid = new Array();
for(var iRow=0; iRow < NUM_ROWS; iRow++){
    iY += CELL_HEIGHT + OFFSET_Y;
    _aGrid[iRow] = new Array();
    for(var iCol=0; iCol < NUM_COLS; iCol++){
        iX += CELL_WIDTH + OFFSET_X;
        _aGrid[iRow][iCol] = new CCell(iRow,iCol,iX,iY,_oContainerGrid, 0);
    }
    iX = START_X_GRID;
} 
复制代码

ccell的核心方法

var oData = {   
                    images: [_oSourceImage], 
                    // width, height & registration point of each sprite
                    frames: {width: CELL_WIDTH, height: CELL_HEIGHT, regX: CELL_WIDTH/2, regY: CELL_HEIGHT/2}, 
                    animations: {background:[0], form0:[1], form1:[2], form2:[3], form3:[4], form4:[5], form5:[6], form6:[7], form7:[8], form8:[9],hide:[10]}
                };
    var oSpriteSheet = new createjs.SpriteSheet(oData);
    
    var oCellBg = createSprite(oSpriteSheet, "background", 0, 0, CELL_WIDTH, CELL_HEIGHT);
    oCellBg.x = iX;
    oCellBg.y = iY;
    oParentContainer.addChild(oCellBg);
复制代码

转载于:https://juejin.im/post/5b4eb1b4f265da0f970d26ab