3d魔方示例代码分析笔记

包含的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函数
• 局部变量
  • 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中。

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）
• 局部变量
  • 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）

代码执行顺序

• 自动执行的代码
  • cube.js
    init：生成floor，face和block，形状已经确定，但是没有染色
    1.生成魔方的6个大面（face）
    2.调用reset方法，在reset方法中继续调用floor.reset和face.reset。
    3.调用face.reset
    4.调用block的init和reset方法，设定block的位置以及箭头旋转的含义。

代码执行顺序

• Block的构造函数值得注意，里面那四个小箭头是如何生成的要特别加以关注。构造函数里面会通过innerHTML的方式生成四个小箭头的dom，但是真正给它赋予含义的是在reset方法里面，构造函数会在最后调用reset方法。