[原创]JS拼图游戏

效果查看地址:http://zqkaixin.com/lianxi/jigsaw.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<meta http-equiv="Content-type" content="text/html;charset=gb2312"/>
<head>
<style type="text/css">
*{padding:0px; margin:0px;}    
body{background-color:black; width:850px;}
#title{color:red;margin:20px auto;width:350px;font-size:30px}
#main{margin:0px auto;}
#imgtab{border-collapse:collapse;}
td{border:1px white solid;}
#realimg{position:absolute;left:10px;top:10px;}
</style>
    <title></title>
</head>
<body>
<div id='title'>拼图GAME,按f5换新图</div>
<div id='main'></div>
<div id='realimg' ></div>
<script type="text/javascript">
//载入图片
var imgs=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
var rand=parseInt(Math.random()*4);
var img=new Image;
img.src=imgs[rand];
img.onload=function(){
    //初始化表格
    var str="<table id='imgtab' >";
    for(var i=0;i<3;i++){
        str+="<tr>";
        for(var j=0;j<3;j++){
            str+="<td>&nbsp</td>";
        }
        str+="</tr>";
    }
    str+="</table>";
    document.getElementById("main").innerHTML=str;
    document.getElementById("realimg").innerHTML="<img id='realimg' width='100px' height='100px' src="+img.src+" />";
    imgW=img.width;
    imgH=img.height;
    
    //初始化变量
    var title=document.getElementById("title");
    var main=document.getElementById("main");
    var imgtab=document.getElementById("imgtab");
    var imgtabTd=imgtab.getElementsByTagName("td");
    imgtab.style.width=imgW+'px';
    main.style.width=imgW+'px';
    main.style.height=imgH+'px';
    imgtab.style.height=imgH+'px';
    var i=0;
    while(imgtabTd[i]){
        imgtabTd[i].style.width=imgW/3+'px';
        imgtabTd[i].style.height=imgH/3+'px';
        i++;
    }
    //填充表格
    var tabRand=randnum(0,7);
    for( j=0;j<8;j++){
        i=tabRand[j];
        var x=(j%3)*(imgW/3);
        var y=parseInt(j/3)*(imgH/3);
        imgtabTd[i].style.background="url("+img.src+") -"+x+"px -"+y+"px";
    }
    imgtabTd[8].style.background='white';
    
    //表格事件
    imgtab.onclick=function(e){
        e=e||event;
        var target=e.target||e.srcElement;
        if(target.tagName.toLowerCase()=='td'){
        var c=target.cellIndex;
        var r=target.parentNode.rowIndex;
        go(r-1,c,this,r,c);
        go(r,c-1,this,r,c);
        go(r+1,c,this,r,c);
        go(r,c+1,this,r,c);
        }
    }
}
//改变背景色函数
function go(i,j,obj,r,c){
    try{
    if(obj.rows[i].cells[j].style.backgroundColor=='white'){
        obj.rows[i].cells[j].style.background=obj.rows[r].cells[c].style.background;
        obj.rows[r].cells[c].style.background='white';
    }
    }catch(e){return;}
}//随机取出值函数
function randnum(min,max){
    var str=[];
    var newstr=[];
    for(i=min;i<=max;i++){str.push(i);}
    for(i=min;i<=max;i++){
    var randNumber=parseInt(Math.random()*str.length);
    newstr.push(str[randNumber]);
    str.splice(randNumber,1);
    }
    return newstr;
}
</script>
</body>
</html>

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <meta http-equiv="Content-type" content="text/html;charset=gb2312"/>
    <head>
    <style type="text/css">
    *{padding:0px; margin:0px;}   
    body{background-color:black; width:850px;}
    #title{color:red;margin:20px auto;width:350px;font-size:30px}
    #main{margin:0px auto;}
    #imgtab{border-collapse:collapse;}
    td{border:1px white solid;}
    #realimg{position:absolute;left:10px;top:10px;}
    </style>
      <title></title>
    </head>
    <body>
    <div id='title'>拼图GAME,按f5换新图</div>
    <div id='main'></div>
    <div id='realimg' ></div>
    <script type="text/javascript">
    //载入图片
    var imgs=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
    var rand=parseInt(Math.random()*4);
    var img=new Image;
    img.src=imgs[rand];
    img.onload=function(){
      //初始化表格
      var str="<table id='imgtab' >";
      for(var i=0;i<3;i++){
      str+="<tr>";
      for(var j=0;j<3;j++){
      str+="<td>&nbsp</td>";
      }
      str+="</tr>";
      }
      str+="</table>";
      document.getElementById("main").innerHTML=str;
      document.getElementById("realimg").innerHTML="<img id='realimg' width='100px' height='100px' src="+img.src+" />";
      imgW=img.width;
      imgH=img.height;
        
      //初始化变量
      var title=document.getElementById("title");
      var main=document.getElementById("main");
      var imgtab=document.getElementById("imgtab");
      var imgtabTd=imgtab.getElementsByTagName("td");
      imgtab.style.width=imgW+'px';
      main.style.width=imgW+'px';
      main.style.height=imgH+'px';
      imgtab.style.height=imgH+'px';
      var i=0;
      while(imgtabTd[i]){
      imgtabTd[i].style.width=imgW/3+'px';
      imgtabTd[i].style.height=imgH/3+'px';
      i++;
      }
      //填充表格
      var tabRand=randnum(0,7);
      for( j=0;j<8;j++){
      i=tabRand[j];
      var x=(j%3)*(imgW/3);
      var y=parseInt(j/3)*(imgH/3);
      imgtabTd[i].style.background="url("+img.src+") -"+x+"px -"+y+"px";
      }
      imgtabTd[8].style.background='white';
        
      //表格事件
      imgtab.onclick=function(e){
      e=e||event;
      var target=e.target||e.srcElement;
      if(target.tagName.toLowerCase()=='td'){
      var c=target.cellIndex;
      var r=target.parentNode.rowIndex;
      go(r-1,c,this,r,c);
      go(r,c-1,this,r,c);
      go(r+1,c,this,r,c);
      go(r,c+1,this,r,c);
      }
      }
    }
    //改变背景色函数
    function go(i,j,obj,r,c){
      try{
      if(obj.rows[i].cells[j].style.backgroundColor=='white'){
      obj.rows[i].cells[j].style.background=obj.rows[r].cells[c].style.background;
      obj.rows[r].cells[c].style.background='white';
      }
      }catch(e){return;}
    }//随机取出值函数
    function randnum(min,max){
      var str=[];
      var newstr=[];
      for(i=min;i<=max;i++){str.push(i);}
      for(i=min;i<=max;i++){
      var randNumber=parseInt(Math.random()*str.length);
      newstr.push(str[randNumber]);
      str.splice(randNumber,1);
      }
      return newstr;
    }
    </script>
    </body>
    </html>