使用js编写实现拼图游戏_javascript技巧_

#canvasBox{         margin: 0 auto;         position: fixed;         border: 2px solid #f00;         overflow: hidden;     }     .item{         display: inline-block;         border: 1px solid #f00;         position: absolute;         top: 0;         left: 0;         transition: 0.1s;  }

         拖拽模式         点击模式     
          

/*              * @title JigsawGame 拼图游戏              * @params obj Object 游戏参数              * {              *     @param Id String 容器id              *     @param imgUrl String 图片路径              *     @param level Number 游戏难度 简单：1 || 普通：2 || 困难：3              *     @param gameType Number 游戏类型  拖动版本：1 || 点击版本：2              * }              * @author beideng              */             function JigsawGame(obj){                 // 初始化容器                 this.Id = document.getElementById(obj.Id);                 // 初始化图片                 this.img = new Image();                 this.img.src = obj.imgUrl;                 // 容器最大宽度                 this.windowWidth = document.body.clientWidth;                 this.maxWidth = this.windowWidth > 750 ? 750 : (this.windowWidth * 0.9);                 // 设置容器宽高                 this.Id.style.width = this.maxWidth + "px";                 this.Id.style.height = this.maxWidth + "px";                 this.Id.style.left = (this.windowWidth - this.maxWidth)/2 + "px";                 this.Id.style.top = 50 + "px";                 // 获取容器范围                 this.boxOffsetY = parseFloat(this.Id.style.top);                 this.boxOffsetX = parseFloat( this.Id.style.left);                 // 关卡（简单：1 || 普通：2 || 困难：3）                 if(obj.level == 1 || obj.level == 2 || obj.level == 3 ){                     this.Level = obj.level;                 }else{                     this.level = 1;                     }                 // 难度                 var diffArr = [3, 4, 5];                 this.Diff= diffArr[this.Level-1];                 // canvas宽高                 this.cW = this.maxWidth/ this.Diff;                 this.cH = this.maxWidth/ this.Diff;                 // 记录的小方块个数                 this.number = 0;                 // 正确的数组                 this.numberArr = [];                 // 存储小方块的中心点坐标                 this.centerXY = [];                 /*                  * 获取游戏类型                  */                 this.gameType = obj.gameType || 1;                 // 记录最后一个元素的标记                 this.lastElement = {                     sign: 0,                     left: 0,                     top: 0,                     Id: obj.Id + 1                 };                 // 初始化                 this.Init();             }             /*              * 操作方法 *              */             JigsawGame.prototype = {                                  /*                  * @method 初始化                   */                 Init: function(){                     var that = this;                     this.img.onload = function(){                         // 格子宽高                         var LevelW = that.img.width/that.Diff;                         var LevelH = that.img.height/that.Diff;                         for(var i = 0 ; i < that.Diff; i++){                             for(var j = 0 ; j < that.Diff; j++){                                 // 初始化小方块                                 that.initCube(i, j, LevelW, LevelH);                             }                         }                         // 打乱小方块                         that.upsetElement();                         // 游戏类型判断                         if(that.gameType == 1){                             // 监听拖动                             that.Id.addEventListener("mousedown",function(event){                                 that.mouseDown(event);                             }, false);                         }else{                                                          // 获取空白小方块坐标                             that.getLastElement();                             // 监听点击                             that.Id.addEventListener("click",function(event){                                 that.mouseClick(event);                             }, false);                         }                     }                 },                 /*                  * @method 初始化小方块                   * @param i Number 循环值                  * @param j Number 循环值                  * @param j LevelW 小方块宽                  * @param j LevelH 小方块高                  */                 initCube: function(i, j, LevelW, LevelH){                     // 创建一个小方块                     var item = document.createElement("div"),                         cW = this.cW,                         cH = this.cH;                                          item.className = "item";                     item.setAttribute("data-index", this.number);                     item.style.width = cW + "px";                     item.style.height = cH + "px";                     item.style.left = i * cW + "px";                     item.style.top = j * cH + "px";                     item.innerHTML = "";                     this.Id.appendChild(item);                     var canvas = item.querySelector("canvas");                     var ctx = canvas.getContext("2d");                                          /*                      * 当游戏为点击类型时                      * 去掉最后一个小方块里的图片                      * 且记录当前元素的坐标以及编号                      */                      if(this.gameType != 1 && j == this.Diff-1 && i == this.Diff-1){                         this.lastElement.sign = this.number;                         item.id = this.lastElement.Id;                     }else{                         ctx.drawImage(this.img, i * LevelW, j * LevelH , LevelW, LevelH, 0 , 0, cW, cH)                     }                                          // 每添加一个就压入一次到数组                     this.numberArr.push({                         x: i*cW +"px" ,                         y: j*cH +"px"                     });                     this.number++;                     // 压入初始中心点                     this.centerXY.push({                         x: i*cW + cW / 2,                         y: j*cH + cH / 2                     });                                      },                 /*                  * @method 悬停拖住小方块                  * @param event Object 鼠标对象                  */                 mouseDown: function(event){                     console.log(event)                      var event = event || window.event;                      var that = this;           var target = event.target || event.srcElement;           // 保证拖动的是想要的元素           if( target.parentElement.className.toLowerCase() == "item"){                                                  var Element = target.parentElement;                         // 存储当前元素的top,left                         var thisTop = parseFloat( Element.style.top );                         var thisLeft = parseFloat( Element.style.left );                         // 获取当前点击的位置                         var pageX = event.pageX;                         var pageY = event.pageY;                                                  // 拖动                         document.onmousemove = function(e){                             console.log(e)                             that.mouseMove(e, Element, thisTop, thisLeft, pageY, pageX);                                                          return false;                         }                                                  // 松开                         document.onmouseup = function(e){                             that.mouseUp(e, Element, thisTop, thisLeft)                                                          // 释放拖拽                             document.onmousemove = null;                             document.onmouseup = null;                             return false;                         }           }           return false;                 },                 /*                  * @method 拖动小方块                  * @param e Object 鼠标对象                  */                 mouseMove: function(e, Element, thisTop, thisLeft, pageY, pageX){                      var pageX2 = e.pageX;                     var pageY2 = e.pageY;                     Element.style.top = thisTop + (pageY2 - pageY) + "px";                     Element.style.left = thisLeft + (pageX2 - pageX) + "px";                     Element.style.zIndex = 1000;                 },                 /*                  * @method 松开小方块                  * @param e Object 鼠标对象                  */                 mouseUp: function(e, Element, thisTop, thisLeft){                      var that = this,                              cW = this.cW,                             cH = this.cH;                      // 检测当前拖动替换目标                     var moveCenterX = parseFloat(Element.style.left) + cW / 2;                     var moveCenterY = parseFloat(Element.style.top) + cH / 2;                     var changeElementIndex = this.checkChangeElement(moveCenterX, moveCenterY);                     var changeElement = this.Id.getElementsByClassName("item")[changeElementIndex];          
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：JS前端面试数组扁平化手写flat函数示例_JavaScript_
                                                                
下一篇：js实现鼠标移入图片放大效果_javascript技巧_