如何用JavaScript编写实现长尾词拼图游戏的代码？

本文共计2521个文字，预计阅读时间需要11分钟。

本文将分享一个使用JavaScript编写的拼图游戏的实现代码。以下为两种拼图方法的具体介绍：

1. 拖拽拼图：用户可以通过拖拽图片块到正确的位置来完成拼图。

2.经典拼图：用户需要将图片块拖拽到对应的空白位置。

javascript

// 拼图游戏实现代码// ...

// 拼图方法一：拖拽拼图function dragPuzzle() { // ...}

// 拼图方法二：经典拼图function classicPuzzle() { // ...}

本文实例为大家分享了用js编写实现拼图游戏的具体代码，供大家参考，具体内容如下

目标

使用原生js编写一个拼图游戏，我这里写了两种拼图的方法。一种是拖拽拼图，一种是经典的九宫格拼图，可以自定义参数设置游戏难度

先看看截图效果

拖拽模式（拖拽图片切换图片）

点击模式（点击图片与空白区域切换位置）

不多说，直接上代码

css

#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;  }

html

<div style="margin: 0 auto;text-algin:center;">         <button onclick="setGame('block', 'none')">拖拽模式</button>         <button onclick="setGame('none', 'block')" >点击模式</button>     </div>          <div id="canvasBox"></div> <div id="canvasBox2"></div>

javascript

/*              * @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 = "<canvas class='' width='"+ cW +"' height='"+ cH +"'></canvas>";                     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];                                  // 限制拖拽范围                     // 当松开的坐标xy在容器范围内                     if( e.pageX < this.boxOffsetX || e.pageX > (this.boxOffsetX + this.maxWidth) || e.pageY < this.boxOffsetY || e.pageY > (this.boxOffsetY + this.maxWidth) ){                         console.log("释放")                         Element.style.top = thisTop  + "px";                         Element.style.left = thisLeft + "px";                                              }else{                         // 判断当前元素是否离开了自己的格子                         if( Element.getAttribute("data-index") == changeElement.getAttribute("data-index")){                             Element.style.top = thisTop  + "px";                             Element.style.left = thisLeft + "px";                         }else{                             // 进行替换                             Element.style.top = changeElement.style.top ;                             Element.style.left = changeElement.style.left ;                             changeElement.style.top = thisTop + "px";                             changeElement.style.left = thisLeft + "px";                             changeElement.style.zIndex = 1000;                              // 更新小方块中心点                     this.updateElement();                         }                     }                     // 消除层级问题                     setTimeout(function(){                         Element.style.zIndex = 0;                         changeElement.style.zIndex = 0;                          if(that.compareArray()){                             alert("恭喜你，拼图成功！");                         }                     }, 150);                                          // 判断拼图完成                     console.log(this.compareArray())                     console.log(this.numberArr)                 },                 /*                  * @method 检测当前拖动替换目标                  * @param moveLeft Number 鼠标移动的x值                  * @param moveTop Number 鼠标移动的y值                  * @return minIndex Number 返回目标对象下标                  * 通过三角函数检测当前拖动对象中心点和其他所有对象中心点距离，离谁最近就和谁替换                  */                 checkChangeElement: function(moveLeft, moveTop){                     // 最小距离                     var minDistance = null;                      // 最小距离替换目标                     var minIndex = null;                     for(var i = 0 ; i < this.centerXY.length; i++){                         var x = Math.abs( moveLeft - this.centerXY[i].x );                          var y= Math.abs( moveTop - this.centerXY[i].y );                          var val = Math.ceil(Math.sqrt( x * x +  y * y));                                                  // 初次判断                         if(minDistance == null){                             minDistance = val;                             minIndex = i;                         }                          // 后续判断                         if(minDistance > val){                             minDistance = val;                             minIndex = i;                         }                     }                              // 返回目标对象下标                     return minIndex;                 },                 /*                  * @method 更新小方块中心点                  */                 updateElement: function(){                     var allElement = this.Id.getElementsByClassName("item"),                             cW = this.cW,                             cH = this.cH;                     this.centerXY = [];                     for(var i = 0 ; i < allElement.length; i++){                         this.centerXY.push({                             x: parseFloat(allElement[i].style.left) + cW / 2,                             y: parseFloat(allElement[i].style.top) + cH / 2                         });                     }                 },                 /*                  * @method 点击小方块                  * @param event Object 鼠标对象                  * @ 1、点击当前非空白小方块                  * @ 2、获取其坐标，并加减一个一个方块宽度，用这个加减坐标去检索空白小方块是否在目标小方块周边                  * @ 3、如果在，则替换这两个小方块的坐标                  */                 mouseClick: 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;                                                  // 当当前点击目标为空白小方块时，终止函数                         if(Element.getAttribute("data-index") == this.lastElement.sign){                             return ;                         }                         // 存储当前元素的top,left                         var thisTop = parseFloat( Element.style.top );                         var thisLeft = parseFloat( Element.style.left );                                                  // 点击检测空白方块是否在当前对象周边                         if(this.mouseClickCheck(thisTop, thisLeft)){                             console.log(222)                             // 获取空白元素                             var lastElement = document.getElementById(this.lastElement.Id);                                                          // 替换这两个元素的坐标                             Element.style.top = lastElement.style.top;                             Element.style.left = lastElement.style.left;                             lastElement.style.top = thisTop + "px";                             lastElement.style.left = thisLeft + "px";                             this.lastElement.left = thisLeft ;                             this.lastElement.top = thisTop;                                                      // 消除层级问题                             setTimeout(function(){                                 if(that.compareArray()){                                     alert("恭喜你，拼图成功！");                                 }                             }, 150);                                                          // 判断拼图完成                             console.log(this.compareArray())                             console.log(this.numberArr)                         }                                    }           return false;                 },                 /*                  * @method 点击检测空白方块是否在当前对象周边                  * @param thisTop Number 当前点击元素的top                  * @param thisLeft NUmber 当前点击元素的left                  * @return Boolean 是否在周边                  */                 mouseClickCheck: function(thisTop, thisLeft){                     var cW = this.cW,                             cH = this.cH;                     if(thisTop == this.lastElement.top && (thisLeft - cH) == this.lastElement.left){                         return true;                     }                     if(thisTop == this.lastElement.top && (thisLeft + cH) == this.lastElement.left){                         return true;                     }                     if((thisTop - cW) == this.lastElement.top && thisLeft == this.lastElement.left){                         return true;                     }                     if((thisTop + cW) == this.lastElement.top && thisLeft == this.lastElement.left){                         return true;                     }                          return false;                 },                 /*                  * @method 获取空白元素left,right                  */                 getLastElement: function(){                     // 获取空白元素                     var lastElement = document.getElementById(this.lastElement.Id);                     console.log(this.lastElement);                     this.lastElement.left = parseFloat(lastElement.style.left) ;                     this.lastElement.top = parseFloat(lastElement.style.top);                 },                 /*                  * @method 打乱小方块                  * 以小方块的个数为次数，每次随机抽取两个小于小方块的数，然后替换两个dom元素的定位坐标                  */                 upsetElement: function(){                     for (var i = 0; i < this.number-1; i++) {                         // 获取两个不相等的随机值                         var n1 = Math.floor(Math.random()*this.number);                         var n2 = Math.floor(Math.random()*this.number);                         do{                             n2 = Math.floor(Math.random()*this.number);                         }while(n1 == n2)                         // 替换当前的两个小方块的坐标                         var allElement = this.Id.getElementsByClassName("item");                         var Top = allElement[n1].style.top ;                         var Left = allElement[n1].style.left ;                                                  allElement[n1].style.top = allElement[n2].style.top ;                         allElement[n1].style.left = allElement[n2].style.left ;                                                  allElement[n2].style.top = Top ;                         allElement[n2].style.left = Left ;                     }                 },                 /*                  * @method 比较小方块是否拼图完成                  * @return boolean                  * 获取切换小方块后，获取小方块的序号并与正确排序数组进行比较                  */                 compareArray: function(){                     // 获取序号                     var allElement = this.Id.getElementsByClassName("item");                     for(var i = 0; i < this.number-1; i++){                         // 比较序号                         if( this.numberArr[i].x != allElement[i].style.left ||  this.numberArr[i].y != allElement[i].style.top ){                             return false;                         }                     }                                          return true;                 },             }             // 实例化一个对象             var box = new JigsawGame({                     Id: 'canvasBox',                     imgUrl: '../image/lingtai.jpg',                     level: 1,                     gameType: 1             });             // 实例化一个对象             var box2 = new JigsawGame({                     Id: 'canvasBox2',                     imgUrl: '../image/lingtai.jpg',                     level: 1,                     gameType: 2             });             function setGame(a, b){                     document.getElementById("canvasBox").style.display = a;                     document.getElementById("canvasBox2").style.display = b;             }             setGame("block", "none");

稍微修改一下样式和触发事件，就是一个h5版本的demo。由于没用到项目里，没有考虑兼容问题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。