Web Front-end
JS Tutorial
Javascript combined with Flexbox to simply implement a sliding puzzle game_javascript skills
Javascript combined with Flexbox to simply implement a sliding puzzle game_javascript skills
Sliding puzzle means dividing a picture into equal parts, shuffling the order (picture below), and then sliding them together to form a complete picture.
To implement a jigsaw puzzle, you need to consider how to randomly shuffle the order, how to swap the positions of two pictures, etc. However, after using Flexbox layout, you don’t need to think about this. The browser will do it for you. Flexbox is so powerful. For an introduction to Flexbox, click here.
What is used in this game is the order attribute of Flexbox layout. The order attribute can be used to control the order of Flex items.
Here I use nine canvas elements to divide the image into nine equal parts. You can also use other methods, such as background image positioning:
<div class="wrap"> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> <canvas></canvas> </div>
If it is not limited to nine-square grid, but also sixteen-square grid, etc., the above elements can be generated dynamically.
The following is the code to generate nine pictures in shuffled 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 shuffling the order of the numbers and randomly assigning them to the order attribute of each canvas element, the browser will automatically sort them for you.
I won’t go into other details about the code. Here’s how to swap the positions of two pictures. It’s surprisingly simple:
var order1 = item.style.order; var order2 = target.style.order;
You only need to exchange the order attribute values of both parties.
Full code
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<title></title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
overflow: hidden;
}
.wrap canvas {
width: 33.3333%;
height: 33.3333%;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrap">
<canvas data-value="1"></canvas>
<canvas data-value="2"></canvas>
<canvas data-value="3"></canvas>
<canvas data-value="4"></canvas>
<canvas data-value="5"></canvas>
<canvas data-value="6"></canvas>
<canvas data-value="7"></canvas>
<canvas data-value="8"></canvas>
<canvas data-value="9"></canvas>
</div>
<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>
</body>
</html>When you are testing, it is best to use Google emulator or mobile phone to open it, because only mobile touch events are supported.
Only the basic functions are implemented in the code, and the complete functions are not implemented.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Flexible application skills of position attribute in H5
Dec 27, 2023 pm 01:05 PM
How to flexibly use the position attribute in H5. In H5 development, the positioning and layout of elements are often involved. At this time, the CSS position property will come into play. The position attribute can control the positioning of elements on the page, including relative positioning, absolute positioning, fixed positioning and sticky positioning. This article will introduce in detail how to flexibly use the position attribute in H5 development.
CSS layout property optimization tips: position sticky and flexbox
Oct 20, 2023 pm 03:15 PM
CSS layout attribute optimization tips: positionsticky and flexbox In web development, layout is a very important aspect. A good layout structure can improve the user experience and make the page more beautiful and easy to navigate. CSS layout properties are the key to achieving this goal. In this article, I will introduce two commonly used CSS layout property optimization techniques: positionsticky and flexbox, and provide specific code examples. 1. positions
HTML tutorial: How to use Flexbox for adaptive equal-height, equal-width, equal-spacing layout
Oct 27, 2023 pm 05:51 PM
HTML tutorial: How to use Flexbox for adaptive equal-height, equal-width, equal-spacing layout, specific code examples are required. Introduction: In modern web design, layout is a very critical factor. For pages that need to display a large amount of content, how to reasonably arrange the position and size of elements to achieve good visibility and ease of use is an important issue. Flexbox (flexible box layout) is a very powerful tool through which various flexible layout needs can be easily realized. This article will introduce Flexbox in detail
HTML tutorial: How to use Flexbox for vertical equal height layout
Oct 16, 2023 am 09:12 AM
HTML Tutorial: How to Use Flexbox for Vertical Height Layout In web development, layout has always been an important issue. Especially when it is necessary to implement vertical equal-height layout, the traditional CSS layout method often encounters some difficulties. This problem can be easily solved using Flexbox layout. This tutorial will introduce in detail how to use Flexbox for vertical equal height layout and provide specific code examples. Flexbox is a new feature in CSS3 that can be used to create flexible, responsive layouts.
HTML tutorial: How to use Flexbox for adaptive equal height layout
Oct 21, 2023 am 10:00 AM
HTML tutorial: How to use Flexbox for adaptive equal-height layout, specific code examples are required. Introduction: In web design and development, implementing adaptive equal-height layout is a common requirement. Traditional CSS layout methods often face some difficulties when dealing with equal height layout, and Flexbox layout provides us with a simple and powerful solution. This article will introduce the basic concepts and common usage of Flexbox layout, and give specific code examples to help readers quickly master the use of Flexbox to implement their own
HTML Tutorial: How to Use Flexbox for Evenly Distributed Layout
Oct 16, 2023 am 09:31 AM
HTML Tutorial: How to Use Flexbox for Evenly Distributed Layout Introduction: In web design, it is often necessary to layout elements. Traditional layout methods have some limitations, and Flexbox (flexible box layout) is a layout method that can provide more flexibility and power. This article will introduce how to use Flexbox to achieve even distribution layout, and give specific code examples. 1. Introduction to Flexbox Flexbox is a flexible box layout model introduced in CSS3, which allows elements to
How to use CSS3's flexbox technology to achieve even distribution of web content?
Sep 11, 2023 am 11:33 AM
How to use CSS3’s flexbox technology to achieve even distribution of web content? With the development of web design, people have higher and higher requirements for web page layout. In order to achieve even distribution of web content, CSS3's flexbox technology has become a very effective solution. This article will introduce how to use flexbox technology to achieve even distribution of web content, and give some practical examples. 1. What is flexbox technology? Flexbox (elastic layout) is a new feature added in CSS3.
HTML tutorial: How to use Flexbox for scalable, equal-height, equal-width, equal-spacing adaptive layout
Oct 19, 2023 am 10:22 AM
HTML tutorial: How to use Flexbox for scalable, equal-height, equal-width, equal-spaced adaptive layout. Specific code examples are required. 1. What is Flexbox layout? Flexbox is a new layout mode introduced in CSS3 that can achieve flexible box model layout. It is the abbreviation of FlexibleBox, which means flexible layout. Flexbox layout can automatically adjust the position and size of elements according to the size of the container to achieve various flexible arrangements. 2. How to use Flexbox layout to create
