包含的js文件(按照下载顺序)
- common.js
- gamer.js
- block.js(构造函数的形式)
- face.js(构造函数的形式)
- floor.js
- cube.js (自动执行两段init代码)
- view.js(自动执行一段init代码)
文件内容详解:
common.js
- 全局变量:
- cube_floor_num ( Number ) 魔方层数,默认为3
- rotateDir ( Object ) 非常重要!!,多个地方会用到
- $ ( Function ) 根据id获取元素,貌似没用到过
- rotateSquareArr ( Function ) 用处不明
gamer.js
- 自动执行的代码
- 计时器准备,在调用start时候启动,调用reset时候清零
- 全局变量
- gamer (Object)
包含的方法:- init 直接调用reset方法
- success
- registerStart 向startCallbacks中push函数
- registerReset 向resetCallbacks中push函数
- gamer (Object)
- 局部变量
- startBtn (Dom)开始游戏
- resetBtn (Dom)从心开始游戏
- timeEle (Dom)
- successTxt (Dom)
- startCallbacks (Array)gamer.registerStart进行push操作,存放的是函数,在调用start函数时候调用其中的每个函数。
- resetCallbacks (Array)gemer.registerReset进行push操作,存放的是函数,在调用reset方法时会调用其中的每个函数。
- reset (Function)
- start (Function)
block.js
- 全局变量
- Block 构造函数
包含的方法- setType ( Function )
- getType( Function )
- distory( Function )
- reset( Function )
Block构造函数解析:
一共有8个参数:type , col , row , width , height , left , top , floorBlock,调用时机是在face.resset方法中。如果最后一个参数floorBlock为undefined,则构造出来的是魔方上的小块,并且会给这个block生成四个箭头,供旋转用。如果floorBlock有有效值,则会变成floorBlock,在floor.reset中调用,含义不明,生成的dom所处位置在floorWrap中。
- Block 构造函数
face.js
格式上与block.js相似,都是设定构造函数,然后添加原型,face的含义很明确,就是魔方的六个大面。
- 全局变量
Face构造函数
包含的方法- col(Function)
- row(Function)
- getFloorData(Function)
- setFloorData(Function)
- getFaceData(Function)
- setFaceData(Function)
- isAllSame(Function)
- getFaceEle(Function)
- reset(Function)
floor.js
- 全局变量
- floor
包含的方法- rotate(Function)
- reset(Function)
- floor
- 局部变量
- floorEles(Object)
- sizeEdges(Object)
- frontFace(Face实例)
- backFace(Face实例)
- blockWidthPercent(Number)
- hasBeenInit(Boolean)
- init(Function)
- setSizeData(Function)
cube.js
-
自动执行的函数
- init两个匿名函数中均自动执行
-
全局变量
- rotateFloorRotating(Boolean)
- rotateFloorData(Object)
- newSetFloorData(Object)
- cube(Object)
- getCurrentCubeSize(Function)
- setSize(Function)
- setColNum(Function)
- setStyle(Function)
- rotate(Function)
- reset(Function)
-
局部变量
- faces(Object)
- cubeSize(Number)
- style(String)
- cubeWrapEle(Dom)
- init(Function)
- reset(Function)
另一个匿名函数:
- lock(Boolean)
- motions(Array)
- redoMotions(Array)
- cubeWrapEle(Dom)
- cubeOptWrap(Dom)
- cubePlayingOptWrap(Dom)
- init(Function)
- initEvent(Function)
- startRotateAnimate(Function)
- stopRotateAnimate(Function)
- startCube(Function)
- resetCube(Function)
- handRotateCube(Function)
- redo(Function)
- rotateCube(Function)
view.js
- 自动执行的代码
- init(匿名函数中的)
- 全局变量
- view(Object)
包含的变量:- reset(Function)
- reset(Function)
- rotateCount(Object)
包含的变量:- fromRotation(Function)
- multiply(Function)
- toRotation(Function)
- toRotations(Function)
- view(Object)
代码执行顺序
- 自动执行的代码
- cube.js
init:生成floor,face和block,形状已经确定,但是没有染色
1.生成魔方的6个大面(face)
2.调用reset方法,在reset方法中继续调用floor.reset和face.reset。
3.调用face.reset
4.调用block的init和reset方法,设定block的位置以及箭头旋转的含义。
- cube.js
代码执行顺序
- Block的构造函数值得注意,里面那四个小箭头是如何生成的要特别加以关注。构造函数里面会通过innerHTML的方式生成四个小箭头的dom,但是真正给它赋予含义的是在reset方法里面,构造函数会在最后调用reset方法。