毎日のjqueryプラグイン-Nスクエアグリッドパズル1
Nパレスグリッドパズル1
初めは9マスのグリッドを作って遊んで良かったのですが、友達が「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+")")
}
})
アイデアの説明
- 実際、パズルは、完了するために必要な2つの属性を決定する単なる組み合わせ操作であるため、私の目的は、Nの正方形グリッドを選択し、テスト画像を選択して、それを直接生成することです。
- レンダリング時には、各画像ラベルに2つの属性があります。1つは元の正しい位置、もう1つは現在の位置です。パラメーターが明確になっているため、これら2つのパラメーターに従って、ブロック内のブロックの位置をカプセル化できます。ボディのフローティング位置は、背後にあるアニメーション効果のための優れたインターフェイスを描画します
- 第二に、解決策があるかどうかの質問に関しては、レンダリングするときに最後の正しいタイルがデフォルトでレンダリングされないため、元の位置と現在の位置が一致する限り、以前の逆順番号を使用して判断します逆順の番号は偶数です次に、エクスポートされた順不同のパズルには解決策が必要です
- アクションの実現に関しては、実際に前の方法を書き直して実現することもできますが、今回はわかりやすいので、カウントはゼロからではなく1から書きますので、場所を変えてからそれを使用することができますラ
- 終了、休憩