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

上一篇我们说了网页的基本布局。接下来将为大家带来具体的实现方法。

拼图通表格来实现，做一个方形的表格，改变其大小使之如图所示。

试想一下如果我们将一张图片剪成6张分别放入对应位置，然后再把它打乱，这样就可以进行拼图了。

可是，将图片放入和打乱图片倒是不难，可想要实现移动图片，这就有一点麻烦了。

不知道别人使用的什么方法，博主接下来会讲一种非常简单的办法去实现移动图片。

（ps：博主正在尝试通过HTML5的新特性去实现图片的拖拽移动，貌似不太理想。。。）

目前博主只能通过给表格留一个空白处作为移动区，如图。

当你点击一张图片之后他会检测图片的上下左右哪个方向存在空白区，

接着将点击的图片与空白区想对换，

简单来说就是把点击区域的背景给空白区，

再删除点击区域的图片，这样看起来就像是移动了。

道理都懂，接下来就让我们回归实际，看一看代码应该怎么写。

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());//显示所用时间
}

哈哈哈，这次就写这么多吧，博主我要看电影去了。（我买两千万德国赢，那部）

基本思路就是这样。

等我改天整理一下发完整的代码。

目前没有整理有点乱。。。

ps:博主小白 勿喷 勿喷 勿喷

欢迎指导交流，接受批评。

回见。