Of Stack

jQuery makes jigsaw puzzles of customizable size

  • 2020-05-24 05:11:17
  • OfStack

I put the size limit between 3 and 10, really idle, or have the tendency to masochism can try to change.
I was going to get the pictures, but I didn't...

pintu.html 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> The puzzle </title>
<style type="text/css">
#pt_main{
  margin:0 auto;
  border:2px solid #000;}
#menu{
  text-align:center;}
#pt_main div{
  padding:0px;
  margin:0px;
  float:left;
  line-height:200px;
  font-size:100px;
  text-align:center;}
#pt_main div:hover{
  cursor:pointer;}
.hui{
  background:#CCC;}
</style>
 
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//div Border width 
var border_w=2;
//div The size of the 
var size=50;
// Whether to pass 
var st=false;
// Background image address (function not written yet) 
var imgurl='';
// The location of the gray block 
var hui=0;
// The game wide high 
var width=3;
var height=3;
$(function(){
  init();
});
// Determine if two Numbers can be swapped 
function ut_jh(a,b){
  if(Math.abs(a-b)==width){
    return true;
  }
  if(Math.abs(a-b)==1&& ut_line(a,b,width) ){
    return true;
  }
  return false;
}
// Determine if two Numbers are the same 1 line 
function ut_line(a,b,width){
  if(parseInt(a/width)==parseInt(b/width)){
    return true;
  }else{
    return false;  
  }
}
// Generate exchangeable sets (sets that can be swapped with grey blocks) 
function ut_sc(a){
  // For the most 4 a 
  var li=new Array();
  var i=0;
  if(a-width>=0){
    li[i++]=a-width;
  }
  if(a+width<=width*height-1){
    li[i++]=a+width;  
  }
  if(ut_line(a,a-1,width) && a-1>=0){
    li[i++]=a-1;  
  }
  if(ut_line(a,a+1,width) && a+1<=width*height-1){
    li[i++]=a+1;  
  }
  //alert(a+'-length:'+li.length)
  return li;
}
// Block click event 
function pt_click(){
  if(!st){
    return false;
  }
  // Click on the index of the block 
  var index=get().index($(this));
   
  if(ut_jh(hui,index)){
    jh(hui,index);
     
    // Judge whether or not to pass 
    pd();
  }
   
   
}
// Two pieces of exchange 
function jh(hui_,index_){
    //alert(hui+1+","+(index_+1));
    var list=get();// All the pieces 
    var h=list.eq(hui_);// The grey block 
    var d=list.eq(index_);// Click on the block 
     
    // Exchange style 
    h.removeClass();
    d.addClass('hui');
    h.html(d.html());
    d.html('');
    hui=index_;
     
    // Swap properties 
    tg=h.attr('tg');
    h.attr('tg',d.attr('tg'));
    d.attr('tg',tg);
}
 
function init(){
  // Not too small ...
  if(width<3||height<3){
    return false;  
  }
  hui=width*height-1;
  var pp=$("#pt_main");
  pp.html('');
  // Create and initialize 
  var k=width*size+border_w*width*2;
  var g=height*size+border_w*height*2;
  pp.css({'width':k,'height':g});
  for(i=0;i<width*height;i++){
    var n=$("<div>"+(i+1)+"</div>");  
    n.css({'width':size,
      'height':size,
      border:border_w+'px solid #000',
      lineHeight:size+'px',
      fontSize:parseInt(size/3)+'px'
    });
    if(imgurl!=''){
     
    }
    pp.append(n);
    //alert(i)
     
  }
  get().last().html('');
  get().last().addClass('hui');
  get().on('click',pt_click);
   
  // Append properties to each block and record the current value 
  $("#pt_main div").each(function(index, element) {
    $(element).attr('tg',index);
  });
   
   
  dl();
  st=true;
}
// Judge whether or not ( When the value of each block corresponds to its own subscript )
function pd(){
  var b=true;
  get().each(function(index, element) {
    if($(element).attr('tg')!=index){
      b=false;
      return false;
    }
     
  });
  if(b){
    st=false;
    alert(" Congratulations! ");
    return true;
  }else{
    return false;
  }
}
// For collection 
function get(){
  return $("#pt_main div");
}
// upset 
function dl(){
  // Number of upset 
  var count=width*width*width;
   
  for(i =0;i<count;i++){
    // Commutative set 
    var li=ut_sc(hui);
    var num=parseInt((li.length)*Math.random());
    jh(hui,li[num]);
  }
   
}
// Initializes the button's click event 
function csh(){
  var dxv=$('#dx').val();
  if(!parseInt(dxv)){
    alert(' Please enter the 3-10 The number between ');
    $('#dx').val('');
    return false;
  }
  var v=parseInt(dxv);
  if(v<3||v>10){
    alert(' Please enter the 3-10 The number between ');
    $('#dx').val('');
    return false;
  }
  width=v;
  height=v;
  init();
}
</script>
</head>
 
<body>
<div id='menu'>
   The size of the :<input id='dx' style="text-align:center;width:40px;"/>
  <button onclick="csh()"> Initialize the </button>
  <button onclick="init()"> The refresh </button>
</div>
<div id="pt_main">
 
</div>
 
</body>
</html>

That's all I want to share with you. I hope you like it.

Related articles: