每天一个jquery插件-N宫格拼图1
N宫格拼图1
一开始我做出来一个九宫格玩起来还不错，但是我朋友说Soeasy，有没有自选比例和难度的，我想了想，思路当时就捋清了，但是没有时间去做，所以今天就重新翻看了之前的笔记，然后开搞，额没搞完，笔记先记着，然后做完之后会打包展示在下面的
目前如下
代码部分
.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+")")
}
})
思路解释
- 其实拼图就是确定必要两个属性完成的组合操作而已，所以我目的就是，通过选择N宫格、选择测试图片，然后直接给生成出来就是了
- 渲染的时候每个图片标签自带两个属性，一个是它原本正确的位置，一个是现在处于的位置，因为参数已经明确，所以根据这两个参数我就可以封装图块的定位于图块本体的浮动位置，为后面动画效果绘制好界面
- 其次关于这里面有无解的问题，我还是用之前的逆序数判断的，因为我渲染的时候默认最后一个正确的图块不渲染，所以它的原本位置和现在位置重合，逆序数只要为偶那导出的乱序拼图就一定有解啦
- 关于动作的实现其实也可以重写前面的方法来实现，不过因为我这次为了方便理解，所以计数是从1开始写起的，不是从零开始，所以有些地方需要改一下，然后就能用啦
- 完事，休息