HTML+Javascript制作拼图小游戏详解（二）

function movepic(id)//移动图片函数，接受点击图片（需要移动图片）的id值
{
    //我们通过一个函数iskong(id)来判断该位置是否存在图片
　　//picnum为我们申明的全局变量用于存储拼图的大小（n*n）
　　if(iskong(id-picnum))//点击图像上方是否为空
    {
        //alert("moveup");
        move(id,id-picnum);//move()为执行的移动函数需要传两个值，一个移动元素id，另一个为目标id
    }
    else if(iskong(id+picnum))//点击图像下方是否为空
    {
        //alert("movedown");
        move(id,id+picnum);
    }
    else if(iskong(id-1))//点击图像左方是否为空
    {
        //alert("moveleft");
        move(id,id-1);
    }
    else if(iskong(id+1))//点击图像右方是否为空
    {
        //alert("moveright");
        move(id,id+1);
    }
    if(isstart)//isstart判断是否已经开始游戏
    {
        isWin();//每次移动后判断是否完成拼图
    }
}

function iskong(id)//判断改标签是否为空
{
    
    var bg=$('#'+id).css("background-image");
    if(bg=="none"){
        return true;
    }else
    {
        return false;
    }
}
　function move(id,target)//移动
　{
　　　//var temp=$('#'+id).css("background-image");
　　　//temp=$('#'+id).css("background-image","");
　　　$('#'+target).css("background-size","cover");
　　　$('#'+target).css("background-image",$('#'+id).css("background-image"));//把需要移动的表格td的背景给目标td（当然也可以用img标签）
　　　$('#'+id).css("background-image","none");
　}

function isWin()//判断是否胜利
{
    k=0;//声明一个变量用作为图片索引
    for(var i=1;i<picnum-1;i++)
      {
        for(var id=1;id<picnum*picnum;id++)
        {
            if(id>picnum*i+1&&id<picnum*(i+1))
        {
            var temp=$('#'+id).css("background-image");
            if(temp==picData[k])//picData[k]为初始化拼图时所存储的每个图片顺序等信息
            {
                k++;
            }
        }
        }
      }
      if(k==(picnum-2)*(picnum-2))//如果k等于图片总数表示图片和初始化时完全一致，这个时候就会执行赢的函数
      {
          clearTimeout(timer);//这里的timer为我们的计时器
          windo();//胜利时执行该函数
      }
}

function windo()//游戏胜利后执行
{
    $('.wingame').css("display","block");//显示胜利的窗口
    $('.pic2').click(function(){
        $('.wingame').css("display","none");
        startgame();
    });
    $('#timer2').text($('#timer').text());//显示所用时间
}