suchen

Heim >Web-Frontend >js-Tutorial >Erstellen Sie anpassbare Puzzles mit jQuery_jquery

Erstellen Sie anpassbare Puzzles mit jQuery_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 16:06:571098Durchsuche

Ich habe die Größe auf 3-10 begrenzt. Wenn Sie wirklich frei sind oder dazu neigen, sich selbst zu missbrauchen, können Sie versuchen, sie zu ändern. .
Ich hatte vor, Bilder zu posten, habe es aber noch nicht getan..

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>

Das Obige ist der gesamte Inhalt, der in diesem Artikel mit Ihnen geteilt wird. Ich hoffe, dass er Ihnen gefällt.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Kapselungscode zur Kollisionserkennung in der Spieleentwicklung unter Verwendung von Javascript_Javascript-KenntnissenNächster Artikel：Kapselungscode zur Kollisionserkennung in der Spieleentwicklung unter Verwendung von Javascript_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen