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时间的默认返回值，使得<td />可以成为放置对象      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 = " <img src= " + sUrl + "  οndragstart=dealWithDragstart(event,this)> " ;     removeImg();    };     function  removeImg(){ // 放下移动的图片后，移除原来位置的图片    gImg.parentNode.removeChild(gImg);     };     function  newGame(){ // 重新开始新的游戏      var  arr = new  Array(); // 定义一个数组用于存放表格ID号