Un complemento de jquery todos los días-N rompecabezas de cuadrícula cuadrada 1
Rompecabezas de cuadrícula 1 del palacio n
Al principio, hice una cuadrícula de nueve cuadrados y fue bueno para jugar, pero mi amigo dijo: Soeasy, ¿hay alguna proporción y dificultad de elección? Lo pensé. Aclaré mi mente en ese momento, pero no lo hice. No tengo tiempo para hacerlo, así que lo revisé hoy. Tomé las notas anteriores y luego comencé a hacerlo. Aún no lo terminé. Primero recuerda las notas, luego empaquétalas y muéstralas a continuación.
Actualmente como sigue
Parte de código
.box {
width: 100%;
margin: 20px auto;
}
#title {
height: 30px;
display: flex;
position: absolute;
top: 0px;
}
#title .tbox {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
border: none;
background-color: transparent;
font-size: 12px;
outline: none;
cursor: pointer;
border-bottom: 1px solid lightgray;
}
#game {
top: 40px;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
position: absolute;
bottom: 0px;
}
#game #bg {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-image: url(../img/1.jpeg);
background-position: center center;
background-size: 100% 100%;
filter: blur(20px);
}
#box {
width: 100px;
height: 100px;
background-color: rgba(255, 255, 255, 0.5);
position: absolute;
}
.item{
position: absolute;
width: 50px;
height: 50px;
transition: all 0.5s linear;
background-repeat: no-repeat;
background-color: rgba(255,255,255,0.5);
outline: 1px solid black;
}
#img {
display: none !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>N宫格拼图</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/nggpt.js"></script>
<link href="css/nggpt.css" type="text/css" rel="stylesheet" />
<style>
*{
margin: 0px;
padding: 0px;
user-select:none;
}
</style>
</head>
<body>
<div id="title" class="box">
<div class="tbox">N宫格拼图</div>
<div class="tbox">
<select id="n1" class="tbox"></select>
<select id="n2" class="tbox"></select>
<input id="img" type="file" accept="image/*" class="tbox" />
<label class="tbox" id="fimg" for="img">默认</label>
<button id="btn" class="tbox">生成</button>
</div>
</div>
<div id="game" class="box">
<div id="bg"></div>
<div id="box"></div>
</div>
</body>
</html>
<script>
$(function(){
$("#btn").click();
})
</script>
$(function() {
const c1 = 21
//首先给选择的内容填充下拉框
for (var i = 3; i <= c1; i++) {
$("<option value='" + i + "'>" + i + "</option>").appendTo($("#n1,#n2"));
}
//选择了正确的图片之后，将其存入缓存之中，并且反映出效果
var imgurl = "img/1.jpeg"; //这里存图片的base64格式的地址
$("#img").change(function() {
//然后假如这条数据有效，那么久进入替换背景图和拼图原图，并且在此期间禁止操作
var file = $(this)[0].files[0];
if (file) {
$("#fimg").text(file.name);
var reader = new FileReader();
new Promise((resolve, reject) => {
reader.readAsDataURL(file);
reader.onload = function(res) {
resolve(res);
}
}).then(res => {
imgurl = res.target.result;
drawbg();
})
}
})
//点击生成拼图的大概流程
//生成乱序表，然后渲染正确的图块，帮上正确的方向事件
var x = 3;
var y = 3;
$("#btn").click(function(){
x = parseInt($("#n1").val());
y = parseInt($("#n2").val());
drawgame();
})
function drawgame(){
drawbox();//把容器绘制到对应大小
var arr = getarr();//获得有解的随机数组顺序
drawgrid(arr);//给容器之中填充每个图块
}
function drawgrid(arr){
$("#box").find(".item").remove();
for(var i=0;i<arr.length;i++){
var t1 = arr[i];//这是这个图块本身位置
var t2 = i+1;//这个是当前的位置；
var $item = $("<div class='item' data-t1='"+t1+"' data-t2='"+t2+"'></div>");
$item.appendTo($("#box"));
$item.css(getpos(t2))//根据当前位置将图块定位到正确的地方
$item.css(setpic(t1))//这个这个图块里面具体是哪一部分
}
}
function setpic(e){
var x1 = e%x==0?(x-1):e%x-1;//取余知道纵坐标
var y1 = parseInt((e-1)/x)//相除知道在第几行
var temp = {
"background-position":"-"+x1*50+"px -"+y1*50+"px",
"background-image":" url("+imgurl+")",
"background-size":x*50+"px "+y*50+"px"
}
return temp;
}
function getpos(e){
var x1 = e%x==0?(x-1):e%x-1;//取余知道纵坐标
var y1 = parseInt((e-1)/x)//相除知道在第几行
return{
top:y1*50,
left:x1*50
}
}
function drawbox(){
$("#box").width(50*x);
$("#box").height(50*y);
}
function getarr(){
var index = x*y;
var arr = [];
for(var i=1;i<index;i++){
arr.push(i);
}
var flag =true;
while(flag){
var arr1 = Object.assign([],arr);
var arr2 = [];
while(arr1.length>0){
var temp = Math.floor(Math.random()*arr1.length);
arr2.push(arr1[temp]);
arr1.splice(temp,1);
}
var counts = 0;
for(var a = 0;a<arr2.length;a++){
for(var b = a+1;b<arr2.length;b++){
if(arr2[a]>arr2[b]){
counts++;
}
}
}
if(counts%2==0){
arr = Object.assign([],arr2);
flag = false;
}
}
return arr;
}
function drawbg(){
//更改背景的
$("#bg").css("background-image","url("+imgurl+")")
}
})
Explicación de la idea
- De hecho, el rompecabezas es solo una operación de combinación que determina los dos atributos necesarios para completar, por lo que mi propósito es seleccionar la cuadrícula N cuadrada, seleccionar la imagen de prueba y luego generarla directamente.
- Al renderizar, cada etiqueta de imagen viene con dos atributos, uno es su posición original correcta, el otro es su posición actual, porque los parámetros han sido claros, por lo que de acuerdo con estos dos parámetros, puedo encapsular el posicionamiento del bloque en el bloque. La posición flotante del cuerpo, dibuja una buena interfaz para el efecto de animación detrás
- En segundo lugar, con respecto a la cuestión de si hay una solución, sigo usando el número de orden inverso anterior para juzgar, porque cuando renderizo, el último mosaico correcto no se representa de forma predeterminada, por lo que su posición original y la posición actual coinciden, siempre que el número de orden inverso es par Entonces el rompecabezas fuera de orden exportado debe tener una solución
- Con respecto a la realización de la acción, en realidad puede reescribir el método anterior para lograrlo, pero como soy fácil de entender esta vez, el conteo se escribe desde 1, no desde cero, por lo que algunos lugares deben cambiarse, y luego puedo usarlo La
- Termina, descansa