jQuery制作可自定义大小的拼图游戏

前端技术 2023/09/09 JavaScript

我把大小限制在了3-10之间，实在闲的，或者有自虐倾向的可以试试改下。。
本来准备弄图片上去的，还没弄..

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>拼图</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边框宽度
var border_w=2;
//div大小
var size=50;
//是否过关
var st=false;
//背景图片地址（功能还没写）
var imgurl=\'\';
//灰色块的位置
var hui=0;
//游戏宽高
var width=3;
var height=3;
$(function(){
  init();
});
//判断两个数字能不能交换
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;
}
//判断两个数字是否在同一行
function ut_line(a,b,width){
  if(parseInt(a/width)==parseInt(b/width)){
    return true;
  }else{
    return false;  
  }
}
//生成可交换的集合（可与灰色块交换的集合）
function ut_sc(a){
  //最多为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:\'+li.length)
  return li;
}
//块的点击事件
function pt_click(){
  if(!st){
    return false;
  }
  //点击块的索引
  var index=get().index($(this));
   
  if(ut_jh(hui,index)){
    jh(hui,index);
     
    //判断是否过关
    pd();
  }
   
   
}
//两块交换
function jh(hui_,index_){
    //alert(hui+1+\",\"+(index_+1));
    var list=get();//所有块
    var h=list.eq(hui_);//灰色块
    var d=list.eq(index_);//点击的块
     
    //交换样式
    h.removeClass();
    d.addClass(\'hui\');
    h.html(d.html());
    d.html(\'\');
    hui=index_;
     
    //交换各自属性
    tg=h.attr(\'tg\');
    h.attr(\'tg\',d.attr(\'tg\'));
    d.attr(\'tg\',tg);
}
 
function init(){
  //不能太小...
  if(width<3||height<3){
    return false;  
  }
  hui=width*height-1;
  var pp=$(\"#pt_main\");
  pp.html(\'\');
  //创建并初始化
  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);
   
  //为每个块附加属性，记录当前的值
  $(\"#pt_main div\").each(function(index, element) {
    $(element).attr(\'tg\',index);
  });
   
   
  dl();
  st=true;
}
//判断是否通过(当每个块的值与自身的下标对应)
function pd(){
  var b=true;
  get().each(function(index, element) {
    if($(element).attr(\'tg\')!=index){
      b=false;
      return false;
    }
     
  });
  if(b){
    st=false;
    alert(\"恭喜过关！\");
    return true;
  }else{
    return false;
  }
}
//获取集合
function get(){
  return $(\"#pt_main div\");
}
//打乱
function dl(){
  //打乱次数
  var count=width*width*width;
   
  for(i =0;i<count;i++){
    //可交换集合
    var li=ut_sc(hui);
    var num=parseInt((li.length)*Math.random());
    jh(hui,li[num]);
  }
   
}
//初始化按钮的点击事件
function csh(){
  var dxv=$(\'#dx\').val();
  if(!parseInt(dxv)){
    alert(\'请输入3-10之间的数字\');
    $(\'#dx\').val(\'\');
    return false;
  }
  var v=parseInt(dxv);
  if(v<3||v>10){
    alert(\'请输入3-10之间的数字\');
    $(\'#dx\').val(\'\');
    return false;
  }
  width=v;
  height=v;
  init();
}
</script>
</head>
 
<body>
<div id=\'menu\'>
  大小:<input id=\'dx\' style=\"text-align:center;width:40px;\"/>
  <button onclick=\"csh()\">初始化</button>
  <button onclick=\"init()\">刷新</button>
</div>
<div id=\"pt_main\">
 
</div>
 
</body>
</html>

以上就是本文给大家分享的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/24048

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案