JavaScript学习笔记10--用js实现的拼图游戏

以前用JAVA写过拼图游戏，JS实现类似功能的基本原理是一样的。也是把一个图片16等份， 然后去掉右下角的那一小块，把剩下的15块放在15个单元格中，通过拖动其中的某块来实 现拼图，只是用JS实现起来麻烦一点，要手动来剪裁图片。我找了个400*400的图片，16等 份后，去掉右下角的那块，把剩余的15块100*100的图片放在页面上的15个单元格里，另外 留下一个空的单元格用于存放移动的图片。然后通过IE里的系统拖动功能来拖动图片，实现 拼图。本实例只能在IE在运行，代码如下：

 

< html >   < head >    < title > 拼图游戏 title >    < script  type ="text/javascript" >     var  gImg = null ;     function  handleMouseMove(oEvent){      if (oEvent.button == 1 ){        oEvent.srcElement.dragDrop();      }     };     function  handleDragDropEvent(oEvent){ // 修改dragenter和 dragover时间的默认返回值，使得可以成为放置对象      switch (oEvent.type){        case   " dragenter " :          case   " dragover " :                      oEvent.returnValue = false ;                        break ;     }    };     function  dealWithDragstart(oEvent,oImg){ // 处理dragstart事件             // var oImg=document.getElementById(imgId);      gImg = oImg;       var  sUrl = oImg.src;      oEvent.dataTransfer.setData( " text " ,sUrl);    };     function  dealWithDrop(oEvent){ // 处理drop事件的函数     oEvent.returnValue = false ;       var  sUrl = oEvent.dataTransfer.getData( " text " );     oEvent.srcElement.innerHTML = " " + sUrl + "  οndragstart=dealWithDragstart(event,this)> " ;     removeImg();    };     function  removeImg(){ // 放下移动的图片后，移除原来位置的图片    gImg.parentNode.removeChild(gImg);     };     function  newGame(){ // 重新开始新的游戏      var  arr = new  Array(); // 定义一个数组用于存放表格ID号      for (i = 1 ;i < 16 ;i ++ ){      arr[i] = i;     }    //  window.alert("随机排序前的数组元素："+arr.join(","));    arr.sort(mysort);   // 对数组arr进行随机排序     // window.alert("随机排序前的数组元素："+arr.join(","));     for ( var  i = 1 ;i <= 16 ;i ++ ){ // 移除TD下的所有img元素      var  sId = " td " + i;      var  oTD = document.getElementById(sId);      if (oTD.firstChild != null ){     oTD.removeChild(oTD.firstChild);     }      if (i != 16 ){     oTD.innerHTML = " " + arr[i - 1 ] + " .jpg οndragstart=dealWithDragstart(event,this)> " ;      }     }   };     function  mysort(a,b){  // 为数组排序的函数       var  tmp = Math.round(Math.random());  // 生成一个随机数并取整，tmp的值为       return  tmp ? a - b:b - a;   // 根据0或1进行升/降排序      };       function  showFinalImg(){ // 显示最终图        for ( var  i = 1 ;i <= 16 ;i ++ ){ // 移除TD下的所有img元素      var  sId = " td " + i;      var  oTD = document.getElementById(sId);      if (oTD.firstChild != null ){       oTD.removeChild(oTD.firstChild);     }      if (i != 16 ){       oTD.innerHTML = " " + i + " .jpg οndragstart=dealWithDragstart(event,this)> " ;      }     }      };          script >     head >   < body >    < form  action =""  name ="f1"  id ="f1"  method ="post" >     < table  border ="0"  width ="400px"  align ="center"  cellSpacing ="0"  cellPadding ="0" >     < tr  >       < td  width ="95px"  height ="95px"  id ="td1"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/1.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >       < td  width ="95px"  height ="95px"  id ="td2"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/2.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >         < td  width ="95px"  height ="95px"  id ="td3"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/3.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >       < td  width ="95px"  height ="95px"  id ="td4"  ondragenter ="handleDragDropEvent(event)"         ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/4.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >        tr >     < tr  >       < td  width ="95px"  height ="95px"  id ="td5"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/5.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >       < td  width ="95px"  height ="95px"  id ="td6"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/6.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >         < td  width ="95px"  height ="95px"  id ="td7"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/7.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >       < td  width ="95px"  height ="95px"  id ="td8"  ondragenter ="handleDragDropEvent(event)"         ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/8.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >        tr >       < tr  >       < td  width ="95px"  height ="95px"  id ="td9"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/9.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >       < td  width ="95px"  height ="95px"  id ="td10"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/10.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >         < td  width ="95px"  height ="95px"  id ="td11"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/11.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >       < td  width ="95px"  height ="95px"  id ="td12"  ondragenter ="handleDragDropEvent(event)"         ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/12.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >        tr >       < tr  >       < td  width ="95px"  height ="95px"  id ="td13"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/13.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >       < td  width ="95px"  height ="95px"  id ="td14"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/14.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >         < td  width ="95px"  height ="95px"  id ="td15"  ondragenter ="handleDragDropEvent(event)"        ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" >        < img  src ="movePic/15.jpg"  ondragstart ="dealWithDragstart(event,this)" > td >       < td  width ="95px"  height ="95px"  id ="td16"  ondragenter ="handleDragDropEvent(event)"         ondragover ="handleDragDropEvent(event)"  ondrop ="dealWithDrop(event)" > td >        tr >     table >    form >    < div  style ="position:absolute;background-color:red;top:30%;left:80%;width:95px;height:95px" >    < br  />    < input  type ="button"  value ="新游戏"  onclick ="newGame()"   />< br  />< br  />    < input  type ="button"  value ="看原图"  onclick ="showFinalImg()"   />< br  />    div >   body > html >    

 

Demo下载:http://download.csdn.net/down/234006/nedvedheqing

 

效果图1:

 

 效果图2: