(function($) {      var puzzleConfig = {          sizeX: 3,          sizeY: 3      };         //全局常量      var Constants={          //每一片拼图透明度较低时候的透明度值          fadeOpacity: 0.8,          //放拼图元素的水平方向padding+border的合计值，用于载入拼图后控制容器尺寸          puzzleContainerExtra: 42      };         //图片相关变量      var puzzleImage=null,      imageURL="",      //图片上传标识，为true时表示相关设置合理，选择图片后将进入游戏      checkFlag=false,      imageWidth=0,      imageHeight=0;         //拼图相关变量      var puzzleWidth=0,      puzzleHeight=0,      puzzleItemWidth=0,      puzzleItemHeight=0,      puzzleSizeX=0,      puzzleSizeY=0,      //拼图数目      puzzleNumber=0,      //计数器，计算从开始到完成游戏用的步数      moveStepCount=0,      //拼图步数以及是否完成的提示文字      puzzleNote=null,      //保存每一片拼图的正确的坐标值的数组      validPosArrayX=[],      validPosArrayY=[],      //保存每一片拼图的数组，索引顺序和正确的拼图顺序相同      puzzleArray = [],      //整个拼图元素本身      puzzle=null,      //最终放置该拼图的父元素节点      puzzleSetElem=null;         //初始第一步，读取拼图设置和图片源，包括对填写内容的验证*/      var puzzleConfigSet = function() {          //类名常量          var sizeInputClassName = "size_input",              noteWarnClassName = "note_warn",              currentProgressClassName = "current_progress",              validImageSuffix = ".jpg|.jpeg|.gif|.bmp|.png";             //放置拼图的由外层变量保存的元素          puzzleSetElem=$ ("puzzleSet");             //取得对应元素          var sizeXElem = $("sizeX"),              sizeYElem = $("sizeY"),              sizeSetNote = $("sizeSetNote"),              uploadBtn = $("uploadBtn"),              fileImage = $("fileImage"),              uploadProgress = $("uploadProgress"),              currentProgress = uploadProgress.getFirst("." + currentProgressClassName),              uploadNote = $("uploadNote");             //拼图尺寸设定检查          var puzzleSizeCheck = function() {              var sizeX = sizeXElem.value,                  sizeY = sizeYElem.value,                  numberReg = /^\d{1,2}$/;              if (numberReg.test(sizeX) && numberReg.test(sizeY)) {                  if (sizeX >= 2 && sizeX <= 10 && sizeY >= 2 && sizeY <= 10) {                      puzzleConfig.sizeX = sizeX;                      puzzleConfig.sizeY = sizeY;                      checkFlag = true;                  } else {                      sizeSetNote.addClass(noteWarnClassName);                  }              } else {                  sizeSetNote.addClass(noteWarnClassName);              }          };             //图片尺寸检查          var imageCheck = function(image) {              var minWidth = 30,                  maxWidth = 850,                  minHeight = 30;              if (image.width >= 30 && image.width <= 850 && image.height > 30) {                  checkFlag = checkFlag && true;              } else {                  uploadNote.addClass(noteWarnClassName);                  checkFlag = false;              }          };             //图片格式检查          var formatCheck = function(image) {              var fileURL = fileImage.value.toLowerCase();              //获取文件拓展名              formatSuffix = fileURL.substring(fileURL.lastIndexOf("."));              if (formatSuffix&&validImageSuffix.contains(formatSuffix)) {                  //如果是正确格式的图片文件                  checkFlag = checkFlag && true;              } else {                  alert("请上传正确格式的图片文件（" + validImageSuffix + "）");                  checkFlag = false;              }          };             //拼图尺寸输入框的事件          $$("." + sizeInputClassName).addEvent("focus", function() {              sizeSetNote.removeClass(noteWarnClassName);          });             //读取选择上传的图片          puzzleImage = new Image();          puzzleImage.onload = function() {              imageCheck(puzzleImage);              if (checkFlag) {                  imageWidth = puzzleImage.width;                  //由于图片尺寸不一定能被拼图尺寸整除，因此做边缘裁剪                  while(imageWidth % puzzleConfig.sizeX != 0){                      imageWidth--;                  }                  imageHeight = puzzleImage.height;                  while(imageHeight % puzzleConfig.sizeY != 0){                      imageHeight--;                  }                  imageURL= puzzleImage.src;                  puzzleSetElem.empty();                  var containerWidth = imageWidth+Constants.puzzleContainerExtra,                  properContainerWidth = containerWidth>120?containerWidth:120;                  puzzleSetElem.getParent().setStyles({                      width: properContainerWidth                  });                  createPuzzle(); //创建拼图              }              else{                  //如果读取后图片尺寸不合适的话，重置图片上传                  uploadProgress.style.display = "none";                  currentProgress.setStyle("width", 0);                  uploadBtn.style.display = "";              }          };          if (typeof FileReader == "undefined") {              //如果是不支持File API的浏览器              fileImage.onchange = function() {                  puzzleSizeCheck();                  if (checkFlag) {                      formatCheck();                  }                  if (checkFlag) {                      puzzleImage.src =  fileImage.value;                  }              };          } else {              //如果支持File API，可以显示读取进度条              var imageReader = new FileReader();                 //对象URL（blob URL），经测试新版Chrome也支持window.URL              function createObjectURL(blob){                  if(window.URL){                      return window.URL.createObjectURL(blob);                  }else if(window.webkitURL){                      return window.webkitURL.createObjectURL(blob);                  }else{                      return null;                  }              }              //开始读取              imageReader.onloadstart = function() {                  puzzleSizeCheck();                  if(checkFlag){                      formatCheck();                  }                  if (checkFlag) {                      uploadBtn.style.display = "none";                      uploadProgress.style.display = "";                  }              };              //读取中              imageReader.onprogress = function(event) {                  if (checkFlag) {                      var percentage = 100 * parseInt(event.loaded / event.total) + "%";                      currentProgress.setStyle("width", percentage);                  }              };              imageReader.onload = function(event) {                  if (checkFlag) {                          //IE10也支持blob URL                          var url=createObjectURL(fileImage.files[0]);                          puzzleImage.src = url;                  }              };              fileImage.onchange = function() {                  imageReader.readAsDataURL(fileImage.files[0]);              };          }      };         //用于创建拼图      var createPuzzle = function() {              //classNameSet表示生成的元素的class名              var classNameSet = {                  listContainer: "puzzle_container",                  list: "puzzle_list",                  item: "puzzle_item"              };              //各类元素对应的基本样式              var puzzleStyle = {                  listContainer: {                      position: "relative",                      width: imageWidth,                      height: imageHeight,                      margin: "0 auto"                  },                  list: {                     },                  item: {                      position: "absolute"                  }              };              //计算得到每一块拼图的尺寸              puzzleSizeX = puzzleConfig.sizeX;              puzzleSizeY = puzzleConfig.sizeY;              puzzleWidth = imageWidth;              puzzleHeight = imageHeight;              puzzleItemWidth = puzzleWidth / puzzleSizeX;              puzzleItemHeight = puzzleHeight / puzzleSizeY;              puzzleNumber = puzzleSizeX * puzzleSizeY;                 //建立一个临时数组，用于生成随机顺序的拼图块              var randomOrderPuzzleArray=[];                 //创建元素              puzzle = elementsCreate();              showAnime();                 //创建整个拼图的dom，返回最外层的父级元素              function elementsCreate() {                  var listContainer = new Element("div");                  listContainer.addClass(classNameSet.listContainer);                  listContainer.setStyles(puzzleStyle.listContainer);                     var list = new Element("ul");                  list.addClass(classNameSet.list);                  list.setStyles(puzzleStyle.list);                     //先通过循环，创建每一个拼图块，并按正确顺序存入数组                  for(var i = 0, len = puzzleNumber; i < len; i++) {                      var item = new Element("li");                      //为每块拼图保存自身的正确索引                      var indexSet = i + 1;                      item.store("puzzleIndex", indexSet);                      item.addClass(classNameSet.item);                      //增加基本样式                      item.setStyles(puzzleStyle.item);                         //以正确顺序保存每一个拼图块到数组                      puzzleArray.push(item);                  }                     //建立一个正确顺序数组的副本                  var puzzleArrayClone=puzzleArray.clone();                     //再次通过循环，创建一个乱序的拼图数组，并把这个数组显示到页面中                  for (i = 0, len = puzzleNumber; i < len; i++) {                      var randomItem = puzzleArrayClone.getRandom();                      //为避免重复，需要把被取出来的元素在副本数组中删除                      puzzleArrayClone.erase(randomItem);                         //为每一块取出来的元素设置可变的位置索引                      var posIndex = i + 1;                      randomItem.posIndex = posIndex;                         //获取取出来的元素的正确索引，用于接下来计算拼图背景图位置                      var correctIndex = randomItem.retrieve("puzzleIndex");                         //计算位置                      var topSet = Math.floor((posIndex - 1) / puzzleSizeX) * puzzleItemHeight,                          leftSet = (posIndex - 1) % puzzleSizeX * puzzleItemWidth,                             //计算符合正确索引的背景图位置                          backgroundSetX = -(correctIndex - 1) % puzzleSizeX * puzzleItemWidth,                          backgroundSetY = -(Math.floor((correctIndex - 1) / puzzleSizeX) * puzzleItemHeight),                          backgroundString = "url(" + imageURL + ") " + backgroundSetX + "px " + backgroundSetY + "px " + "no-repeat";                         //添加关键样式                      randomItem.setStyles({                          width: Math.ceil(puzzleItemWidth),                          height: Math.ceil(puzzleItemHeight),                          background: backgroundString,                          left: leftSet,                          top: topSet,                          zIndex: posIndex                      });                         //生成合理的位置坐标数组                      validPosArrayX.push(leftSet);                      validPosArrayY.push(topSet);                         //存放乱序元素到乱序数组                      randomOrderPuzzleArray.push(randomItem);                  }                     //组合拼图的各个元素                  list.adopt(randomOrderPuzzleArray);                  listContainer.adopt(list);                     return listContainer;              }                 //为拼图的初始化创建动画              function showAnime(){                  //一些动画参数                  var timeSpace=50,                  //垂直移动的间距                  distance=30,                   //计数用                  count=0,                  timeFlag;                             //所有拼图先隐藏，透明度置为0                  for(var i=0,len=puzzleArray.length;i<len;i++){                      puzzleArray[i].setStyle("opacity",0);                  }                     //更新到页面dom中，准备开始动画                  puzzleSetElem.grab(puzzle);                     var enterFrameHandler=function(){                      var puzzleItem=randomOrderPuzzleArray[count++];                      var endTop=parseInt(puzzleItem.getStyle("top"));                      var startTop=endTop-distance;                         puzzleItem.set("morph",{                          transition: Fx.Transitions.Quad.easeOut                      });                      puzzleItem.morph({                          top:[startTop,endTop],                          opacity:Constants.fadeOpacity                      });                         if(count<puzzleNumber){                          //对最后一个拼图块的动画结束做侦听                          if(count==puzzleNumber-1){                              var lastMorph=puzzleItem.get("morph");                              var showAnimeEnd=function(){                                  lastMorph.removeEvent("complete",showAnimeEnd);                                  puzzleEventBind();                              }                              lastMorph.addEvent("complete",showAnimeEnd);                          }                          timeFlag=setTimeout(enterFrameHandler,timeSpace);                      }                  };                  timeFlag=setTimeout(enterFrameHandler,timeSpace);              }             };         //拼图的相关事件绑定，也是游戏的核心控制逻辑      var puzzleEventBind=function(){          //拼图游戏控制相关的变量          var selectedItem=null,          //当前选中的拼图位置索引          selectedIndex=0,          //用于保存当前鼠标正在拖动的拼图的zIndex值          selectedItemZIndex=0,          //每一次切换拼图位置的时候，都涉及到2块拼图，鼠标拖动的这块和交换位置的另外一块，这个就是另外一块          relatedItem=null,          //依照鼠标当前的位置，判断得到的目标索引，如果鼠标此时放开，就是说把选中的拼图移到现在鼠标所在的位置          targetIndexNew=0,          //通过new和old来区分鼠标从一个目标索引更换到另一个目标索引          targetIndexOld=0,          //判断是否进行一次拼图位置移动的逻辑值，只有当目标索引值有改变时，才允许进行拼图位置移动          isTargetIndexChanged=false,          //判断鼠标指针是否在拼图的区域之内          isInsidePuzzle=false,          //鼠标点击拼图的某一个点的时候，距离拼图的左上角定位点有的距离值          disX=0,          disY=0;             //计算获取整个拼图的左上角点的坐标          var puzzlePos=puzzle.getPosition();          var puzzlePosX=puzzlePos.x,          puzzlePosY=puzzlePos.y;             //重新设置每一个元素的动画速度          (function(){              for(var i=0,len=puzzleArray.length;i<len;i++){                  var puzzleItem=puzzleArray[i];                  puzzleItem.set("morph",{                      duration:250                  });              }          })();             //计数函数准备          var updateCount = (function(){              var stepCount = $("stepCount");              puzzleNote = stepCount.getParent();              return function(){                  stepCount.set("text", moveStepCount);              };          })();             //添加事件          puzzle.addEvent("mouseover",mouseOverHandler);          puzzle.addEvent("mouseout",mouseOutHandler);          puzzle.addEvent("mousedown",mouseDownHandler);          puzzle.addEvent("mouseup",mouseUpHandler);             //鼠标经过          function mouseOverHandler(event){              var target=event.target;              if(puzzleArray.contains(target)){                  target.setStyle("opacity",1);              }          }             //鼠标移出          function mouseOutHandler(event){              var target=event.target;              if(puzzleArray.contains(target)){                  target.setStyle("opacity",Constants.fadeOpacity);              }          }             //鼠标按下          function mouseDownHandler(event){              var target=event.target;              //race("[mouseDownHandler]selectedItem ="+selectedItem);              //如果当前没有其他目标选中，且鼠标选中的目标是拼图块              if(!selectedItem&&puzzleArray.contains(target)){                  if(target.getStyle("opacity")<1){                      target.setStyle("opacity",1);                  }                     //设置当前选中的目标及索引                  selectedItemZIndex=target.getStyle("zIndex");                  target.setStyle("zIndex",5000);                  selectedItem=target;                  selectedIndex=target.posIndex;                     //设置初始目标索引                  targetIndexNew=targetIndexOld=selectedIndex;                     //计算出鼠标点击的点和拼图左上角定位点的偏差距离                  var targetPos=target.getPosition();                  disX=event.page.x-targetPos.x;                  disY=event.page.y-targetPos.y;                     //增加鼠标移动的事件侦听，让拼图块跟随鼠标移动，并判断当前位置                  document.addEvent("mousemove",mouseMoveHandler);              }          }             //鼠标松开          function mouseUpHandler(event){              //如果有元素处于拖动状态，取消              if(selectedItem){                  selectedItem.setStyle("opacity",Constants.fadeOpacity);                  selectedItem.setStyle("zIndex",selectedItemZIndex);                  document.removeEvent("mousemove",mouseMoveHandler);                     //松开之后，根据目标索引和拖动元素的索引，移动拼图，并更新dom结构                  if(isInsidePuzzle){                      //如果目标索引是一块别的拼图                      if(targetIndexNew!=selectedIndex){                          puzzleItemMove(selectedItem,targetIndexNew,puzzleItemSwitch);                      }else{                          //还原回原来的位置                          puzzleItemMove(selectedItem,selectedIndex);                          selectedItem=null;                          relatedItem=null;                      }                  }else{                      //如果鼠标在拼图之外的区域松开，则被拖动的拼图还原回原来的位置                      puzzleItemMove(selectedItem,selectedIndex);                      selectedItem=null;                      relatedItem=null;                      targetIndexNew = targetIndexOld = selectedIndex;                  }              }          }             //鼠标移动          function mouseMoveHandler(event){              var mouseX=event.page.x,              mouseY=event.page.y;                 event.preventDefault();                 //设置选中元素的位置，跟随鼠标              selectedItem.setPosition({                  x:mouseX-disX-puzzlePosX,                  y:mouseY-disY-puzzlePosY              })                 //计算鼠标当前位置是否在拼图区域之内（拼图边缘也算在外）              isInsidePuzzle=(function(){                  if(mouseX<=puzzlePosX||mouseX-puzzlePosX>=puzzleWidth){                      return false;                  }                  if(mouseY<=puzzlePosY||mouseY-puzzlePosY>=puzzleHeight){                      return false;                  }                  return true;              })();                 //如果鼠标当前位置在拼图区域之内，再做目标索引计算              if(isInsidePuzzle){                  //race("[mouseMoveHandler]isInsidePuzzle = true");                     //计算目标索引,xIndex和yIndex分别表示当前位置所处的列序号和行序号                  var xIndex=Math.ceil((mouseX-puzzlePosX)/puzzleItemWidth),                  yIndex=Math.ceil((mouseY-puzzlePosY)/puzzleItemHeight);                  targetIndexNew=(yIndex-1)*puzzleSizeX+xIndex;                     if(targetIndexNew!=targetIndexOld){                      isTargetIndexChanged=true;                  }                  //只有当目标索引发生改变时，才移动拼图做示意                  if(isTargetIndexChanged){                      //如果上一个目标索引的拼图不是鼠标正在移动的这个，那么就需要恢复这张拼图的位置到它原来的地方                      if(targetIndexOld!=selectedIndex){                          var lastRelatedItemIndex=relatedItem.posIndex;                          puzzleItemMove(relatedItem,lastRelatedItemIndex);                      }                         //更新相关元素，取得拼图数组中posIndex等于当前的目标索引的元素                      relatedItem=puzzleArray.filter(function(item, index){                          return item.posIndex == targetIndexNew;                      })[0];                      //如果下一个目标索引，不是被拖走的拼图原来所在的位置，就移动新的目标索引的拼图到被拖走的拼图的位置                      if(targetIndexNew!=selectedIndex){                          puzzleItemMove(relatedItem,selectedIndex);                      }                         //重置目标索引改变的逻辑值                      isTargetIndexChanged=false;                         //更新上一个目标索引                      targetIndexOld=targetIndexNew;                  }              }else{                  //如果移到拼图区域之外，则考虑还原上一个目标索引的拼图                  if(targetIndexOld!=selectedIndex){                          var lastRelatedItemIndex=relatedItem.posIndex;                          puzzleItemMove(relatedItem,lastRelatedItemIndex);                  }                  //还原targetIndexOld的值，以处理移到拼图外的情况。                  targetIndexOld = selectedIndex;              }          }             //每一次拼图交换的功能实现的函数，更改对应元素的posIndex，并更改zIndex          function puzzleItemSwitch(){                 //交换元素的posIndex              selectedItem.posIndex=targetIndexNew;              relatedItem.posIndex=selectedIndex;                 //交换元素的zIndex，通过posIndex来赋值              selectedItem.setStyle("zIndex",selectedItem.posIndex);              relatedItem.setStyle("zIndex",relatedItem.posIndex);                 //清除对相关元素的引用              selectedItem=null;              relatedItem=null;                 //一次更换完成，计数器+1              moveStepCount++;              updateCount();                 //然后再判断拼图游戏是否完成              clearJudgement();          }             //每一块拼图在游戏中的移动函数          function puzzleItemMove(moveItem,moveToIndex,endFn){              var moveToX=validPosArrayX[moveToIndex-1],              moveToY=validPosArrayY[moveToIndex-1],              originZIndex=moveItem.posIndex;              moveItemMorph=moveItem.get("morph");              moveItemMorph.addEvent("start",moveStartHandler);              moveItemMorph.addEvent("complete",moveEndHandler);              moveItem.morph({                          left:moveToX,                          top:moveToY              });              function moveStartHandler(){                  moveItem.setStyle("zIndex",1000);              }              function moveEndHandler(){                  moveItemMorph.removeEvent("start",moveStartHandler);                  moveItemMorph.removeEvent("complete",moveEndHandler);                  moveItem.setStyle("zIndex",originZIndex);                     //结尾执行的函数，如果需要的话                  if(typeOf(endFn)=="function"){                      endFn();                  }              }          }             //完成拼图游戏的判定函数          function clearJudgement(){              //检查puzzleArray中的每一个元素的puzzleIndex和posIndex是否全部一致              var isGameClear=puzzleArray.every(function(item, index){                  var puzzleIndex=item.retrieve("puzzleIndex");                  return item.posIndex==puzzleIndex;              });                 if(isGameClear){                  clearShow();              }          }             //确定完成拼图游戏后，执行的函数          function clearShow(){               //清除所有事件侦听              puzzle.removeEvent("mouseover",mouseOverHandler);              puzzle.removeEvent("mouseout",mouseOutHandler);              puzzle.removeEvent("mousedown",mouseDownHandler);              puzzle.removeEvent("mouseup",mouseUpHandler);                 var clearAnimeFlag=null,              count=0;                 //按顺序点亮所有拼图的动画              var enterFrameHandler=function(){                  var item=puzzleArray[count++];                  item.fade(1);                  if(count<puzzleNumber){                      clearAnimeFlag=setTimeout(enterFrameHandler,50);                  }                   };                  clearAnimeFlag=setTimeout(enterFrameHandler,50);                             //游戏完成后的信息~❤              puzzleNote.set('html','Congratulations ! Your final step count is <em class="step_count">'+moveStepCount+'</em>.');          }      }         //创建全局变量puzzleGame      window.puzzleGame={};         //添加方法到全局变量puzzleGame中      puzzleGame.start = function() {          puzzleConfigSet();      };     })(document.id);     puzzleGame.start();