最近在做一款消消乐游戏,总结如下:
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);
复制代码