I limited the size to between 3-10. Those who are really idle or have a tendency to abuse themselves can try to change it. .
I was going to get the picture, but I haven't got it yet...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:///TR/xhtml1/DTD/">
<html xmlns="http:///1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>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="/"></script>
<script type="text/javascript">
//div border widthvar border_w=2;
//div sizevar size=50;
//Whether it is passedvar st=false;
//Background image address (function has not been written yet)var imgurl='';
//The position of the gray blockvar hui=0;
//The game width and heightvar width=3;
var height=3;
$(function(){
init();
});
//Judge whether two numbers can be exchangedfunction ut_jh(a,b){
if((a-b)==width){
return true;
}
if((a-b)==1&& ut_line(a,b,width) ){
return true;
}
return false;
}
//Judge whether the two numbers are on the same linefunction ut_line(a,b,width){
if(parseInt(a/width)==parseInt(b/width)){
return true;
}else{
return false;
}
}
// Generate an interchangeable set (a collection that can be exchanged with gray blocks)function ut_sc(a){
//Maximum 4 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:'+)
return li;
}
//Block click eventfunction pt_click(){
if(!st){
return false;
}
//Click the index of the block var index=get().index($(this));
if(ut_jh(hui,index)){
jh(hui,index);
//Judge whether it is passed pd();
}
}
//Two pieces exchangefunction jh(hui_,index_){
//alert(hui+1+","+(index_+1));
var list=get();//All blocks var h=(hui_);//Gray block var d=(index_);// Click the block
//Swap style ();
('hui');
(());
('');
hui=index_;
//Swap each attribute tg=('tg');
('tg',('tg'));
('tg',tg);
}
function init(){
//Not too small... if(width<3||height<3){
return false;
}
hui=width*height-1;
var pp=$("#pt_main");
('');
//Create and initialize var k=width*size+border_w*width*2;
var g=height*size+border_w*height*2;
({'width':k,'height':g});
for(i=0;i<width*height;i++){
var n=$("<div>"+(i+1)+"</div>");
({'width':size,
'height':size,
border:border_w+'px solid #000',
lineHeight:size+'px',
fontSize:parseInt(size/3)+'px'
});
if(imgurl!=''){
}
(n);
//alert(i)
}
get().last().html('');
get().last().addClass('hui');
get().on('click',pt_click);
//Add attributes for each block and record the current value $("#pt_main div").each(function(index, element) {
$(element).attr('tg',index);
});
dl();
st=true;
}
//Discribing whether it is passed (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 on passing!");
return true;
}else{
return false;
}
}
//Get the collectionfunction get(){
return $("#pt_main div");
}
//upsetfunction dl(){
//The number of disruptions var count=width*width*width;
for(i =0;i<count;i++){
//Exchangeable collection var li=ut_sc(hui);
var num=parseInt(()*());
jh(hui,li[num]);
}
}
//Initialize button click eventfunction csh(){
var dxv=$('#dx').val();
if(!parseInt(dxv)){
alert('Please enter a number between 3-10');
$('#dx').val('');
return false;
}
var v=parseInt(dxv);
if(v<3||v>10){
alert('Please enter a number between 3-10');
$('#dx').val('');
return false;
}
width=v;
height=v;
init();
}
</script>
</head>
<body>
<div id='menu'>
size:<input id='dx' style="text-align:center;width:40px;"/>
<button onclick="csh()">initialization</button>
<button onclick="init()">refresh</button>
</div>
<div >
</div>
</body>
</html>
The above is all the content shared by this article, I hope you like it.