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

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.