Javascript with Flexbox simple implementation of Slide jigsaw puzzle _ javascript tips-js tutorial

This article will share with you the code that uses javascript and Flexbox to implement a simple slide puzzle game. Although it does not provide complete functions, we recommend it to you, if you like it, you can continue to complete the slide puzzle by dividing an image into several equal parts, disrupt the order (), and then slide it together to form a complete picture.

To implement a puzzle game, you need to consider how to randomly disrupt the order, how to swap the positions of two images, and so on. However, after the Flexbox layout is used, you do not need to think about it. The browser will help you, and Flexbox is so powerful. For more information about Flexbox, click here.
This game uses the order attribute of the Flexbox layout, which can be used to control the order of Flex projects.
Here, I use nine canvas elements to divide an image into nine equal points. You can also use other methods, such as background image positioning:

If it is not limited to the nine squares, but also the sixteen squares, the above elements can be dynamically generated.
The following code generates nine diagrams with disordered order:

var drawImage = function (url) {  return new Promise(function (resolve, reject) {    var img = new Image();    img.onload = function () {      resolve(img);    };    img.src = url;  })};drawImage("2.jpg").then(function (img) {  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];  var random = arr.sort(function() {return Math.random() > 0.5});  [].forEach.call(document.querySelectorAll("canvas"), function (item, i) {    item.width = $(".wrap").clientWidth / 3;    item.height = $(".wrap").clientHeight / 3;    item.style.order = random[i];    var ctx = item.getContext("2d");    ctx.drawImage(img, img.width * (i % 3) / 3, img.height * Math.floor(i / 3) / 3, img.width / 3, img.height / 3, 0, 0, item.width, item.height);  });});

The key code above is:

item.style.order = random[i];

By randomly assigning values to the order attribute of each canvas Element, the browser Automatically sorts the numbers.
I will not talk about other details about the code. Here I will explain how to swap the positions of the two images, which is really unexpected and simple:

var order1 = item.style.order;var order2 = target.style.order;

You only need to exchange the order attribute values of both parties.

Complete code

  
   
   
   
   
     
  
    
    
    
    
    
    
    
    
  
《script》  var $ = function (el) {    return document.querySelector(el);  };  var touchMove, touchEnd;  var drawImage = function (url) {    return new Promise(function (resolve, reject) {      var img = new Image();      img.onload = function () {        resolve(img);      };      img.src = url;    })  };  drawImage("2.jpg").then(function (img) {    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];    var random = arr.sort(function() {return Math.random() > 0.5});    [].forEach.call(document.querySelectorAll("canvas"), function (item, i) {      item.width = $(".wrap").clientWidth / 3;      item.height = $(".wrap").clientHeight / 3;      item.style.order = random[i];      var ctx = item.getContext("2d");      ctx.drawImage(img, img.width * (i % 3) / 3, img.height * Math.floor(i / 3) / 3, img.width / 3, img.height / 3, 0, 0, item.width, item.height);    });  });  document.addEventListener("touchstart", function (e) {    var target = e.target;    if (e.target.tagName.toLowerCase() !== "canvas") {      return;    }    var ctx = target.getContext("2d");    var image = ctx.getImageData(0, 0, target.width, target.height);    var obj = target.cloneNode(true);    obj.getContext("2d").putImageData(image, 0, 0);    var top = target.getBoundingClientRect().top, left = target.getBoundingClientRect().left;    obj.style.cssText = "position: absolute; top: " + top + "px; left: " + left + "px";    document.body.appendChild(obj);    var point = {"x": e.touches[0].pageX, "y": e.touches[0].pageY};    document.addEventListener("touchmove", touchMove = function (e) {      obj.style.cssText = "position: absolute; top:" + (e.touches[0].pageY - point.y + top) + "px; left: " + (e.touches[0].pageX - point.x + left) + "px";    });    document.addEventListener("touchend", touchEnd = function (e) {      var pos = {"x": e.changedTouches[0].pageX, "y": e.changedTouches[0].pageY};      [].forEach.call(document.querySelectorAll(".wrap canvas"), function (item, i) {        var offset = item.getBoundingClientRect();        if (pos.x > offset.left && pos.x < (offset.left + item.width) && pos.y > offset.top && pos.y < (offset.top + item.height)) {          var order1 = item.style.order;          var order2 = target.style.order;          if (obj.parentNode) {            document.body.removeChild(obj);          }          item.style.order = order2;          target.style.order = order1;        }      });      document.removeEventListener("touchmove", touchMove);      document.removeEventListener("touchend", touchEnd);    })  })《script》

When testing, you 'd better use a Google simulator or mobile phone to open it, because it only supports mobile touch events.

Only the basic functions are implemented in the code, and the complete functions are not implemented.